initial commit

author: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
committer: Peter Bengtsson <mail@peterbe.com> 2020-12-08 14:43:23 -0500
commit: 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree: a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/api
parent: 074785cea106179cb3305637055ab0a009ca74f2 (diff)
download: translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
68 files changed, 11903 insertions, 0 deletions
diff --git a/files/uk/web/api/ambient_light_events/index.html b/files/uk/web/api/ambient_light_events/index.html
new file mode 100644
index 0000000000..3c5d48cc76
--- /dev/null
+++ b/files/uk/web/api/ambient_light_events/index.html
@@ -0,0 +1,66 @@
+---
+title: Ambient Light Events
+slug: Web/API/Ambient_Light_Events
+translation_of: Web/API/Ambient_Light_Events
+---
+<div>{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}</div>
+
+<p>Ambient Light Events - це зручний спосіб реагувати на будь-які зміни інтенсивності світла, наприклад, змінюючи кольорову контрастність інтерфейсу користувача (UI) або змінюючи експозицію, необхідну для фотографування.</p>
+
+<h2 id="Опис_події">Опис події</h2>
+
+<p>Коли датчик освітленості пристрою виявляє зміну рівня освітленості, він повідомляє браузер про цю зміну. Браузер, після отримання такого сповіщення, запускає подію {{domxref ("DeviceLightEvent")}}, яка надає інформацію про точну інтенсивність світла (в одиницях люкс).</p>
+
+<p>Цю подію можна перехопити на рівні об'єкту <code>window</code> за допомогою методу {{domxref ("EventTarget.addEventListener", "addEventListener")}} (використовуючи назву події {{event ("devicelight")}}) або прикріпивши обробку події як властивість {{domxref ("window.ondevicelight")}}.</p>
+
+<p>Після перехоплення об'єкт події надає доступ до інтенсивності світла, вираженої у {{interwiki ("wikipedia", "lux")}} через властивість {{domxref ("DeviceLightEvent.value")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: js notranslate">if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value &lt; 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('Подія devicelight не підтримується');
+}
+</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("AmbientLight", "", "Ambient Light Events")}}</td>
+   <td>{{Spec2("AmbientLight")}}</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.DeviceLightEvent")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{domxref("DeviceLightEvent")}}</li>
+ <li>{{event("devicelight")}}</li>
+</ul>
diff --git a/files/uk/web/api/angle_instanced_arrays/index.html b/files/uk/web/api/angle_instanced_arrays/index.html
new file mode 100644
index 0000000000..db1d1906ff
--- /dev/null
+++ b/files/uk/web/api/angle_instanced_arrays/index.html
@@ -0,0 +1,83 @@
+---
+title: ANGLE_instanced_arrays
+slug: Web/API/ANGLE_instanced_arrays
+translation_of: Web/API/ANGLE_instanced_arrays
+---
+<div>{{APIRef("WebGL")}}</div>
+
+<p><code><strong>ANGLE_instanced_arrays</strong></code> <span class="tlid-translation translation" lang="uk"><span title="">розширення є частиною</span></span> <a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a> <span class="tlid-translation translation" lang="uk"><span title="">і дозволяє малювати один і той же об'єкт або групи подібних об'єктів кілька разів, якщо вони поділяють однакові вершинні дані, лічильник примітиву і тип.</span></span></p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Розширення WebGL доступні за допомогою метода</span></span>{{domxref("WebGLRenderingContext.getExtension()")}} . <span class="tlid-translation translation" lang="uk"><span title="">Для отримання додаткової інформації див</span></span><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions"> Using Extensions</a> в <a href="/en-US/docs/Web/API/WebGL_API/Tutorial">WebGL tutorial</a>.</p>
+
+<div class="note">
+<p><strong><span class="tlid-translation translation" lang="uk"><span title="">Доступність:</span></span></strong> <span class="tlid-translation translation" lang="uk"><span title="">Це розширення доступне лише для</span></span> {{domxref("WebGLRenderingContext", "WebGL1", "", 1)}} <span class="tlid-translation translation" lang="uk"><span title="">контексті.</span></span> В {{domxref("WebGL2RenderingContext", "WebGL2", "", 1)}}, <span class="tlid-translation translation" lang="uk"><span title="">функціональність цього розширення доступна на</span></span> WebGL2 <span class="tlid-translation translation" lang="uk"><span title="">контекст за замовчуванням і константи і методи доступні без</span></span> <span class="tlid-translation translation" lang="uk"><span title="">суфіксу </span></span> "<code>ANGLE</code>".</p>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Незважаючи на назву</span></span> "ANGLE", <span class="tlid-translation translation" lang="uk"><span title="">це розширення працює на будь-якому пристрої, якщо його підтримує апаратне забезпечення, а не тільки на Windows, коли використовується бібліотека ANGLE. </span></span> "ANGLE" <span class="tlid-translation translation" lang="uk"><span title="">просто вказує, що це розширення було написано авторами бібліотеки ANGLE.</span></span></p>
+</div>
+
+<h2 id="Константи"><span class="tlid-translation translation" lang="uk"><span title="">Константи</span></span></h2>
+
+<p><span class="tlid-translation translation" lang="uk"><span title="">Це розширення виставляє одну нову константу, яку можна використовувати метод </span></span>{{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} :</p>
+
+<dl>
+ <dt><code>ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE</code></dt>
+ <dd><span class="tlid-translation translation" lang="uk"><span title="">Повертає </span></span>{{domxref("GLint")}} <span class="tlid-translation translation" lang="uk"><span title="">опису частотного дільника, використовуваного для інтрадерного візуалізації при використанні в</span></span> {{domxref("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} <span class="tlid-translation translation" lang="uk"><span title="">як параметр </span></span><code>pname</code> .</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p>This extension exposes three new methods.</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>
+ <p>Behaves identically to {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} except that multiple instances of the set of elements are executed and the instance advances between each set.</p>
+ </dd>
+ <dt>{{domxref("ANGLE_instanced_arrays.vertexAttribDivisorANGLE()", "ext.vertexAttribDivisorANGLE()")}}</dt>
+ <dd>
+ <p>Modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with {{domxref("ANGLE_instanced_arrays.drawArraysInstancedANGLE()", "ext.drawArraysInstancedANGLE()")}} and {{domxref("ANGLE_instanced_arrays.drawElementsInstancedANGLE()", "ext.drawElementsInstancedANGLE()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Enabling the extension:</p>
+
+<pre class="brush: js">var ext = gl.getExtension('ANGLE_instanced_arrays');
+</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('ANGLE_instanced_arrays', '', 'ANGLE_instanced_arrays')}}</td>
+   <td>{{Spec2('ANGLE_instanced_arrays')}}</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.ANGLE_instanced_arrays")}}</p>
+
+<h2 id="See_also">See also</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/uk/web/api/api_відображення_сторінки/index.html b/files/uk/web/api/api_відображення_сторінки/index.html
new file mode 100644
index 0000000000..6675a3783b
--- /dev/null
+++ b/files/uk/web/api/api_відображення_сторінки/index.html
@@ -0,0 +1,201 @@
+---
+title: API відображення сторінки
+slug: Web/API/API_відображення_сторінки
+tags:
+  - API
+  - API відображення сторінки
+  - visibilityState
+  - visibilitychange
+  - відображення сторінки
+  - процеси скритої закладки
+  - фоновий режим
+translation_of: Web/API/Page_Visibility_API
+---
+<div>{{DefaultAPISidebar("Page Visibility API")}}</div>
+
+<div></div>
+
+<p>При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.</p>
+</div>
+
+<p>Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.</p>
+
+<p>Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <code>&lt;iframe&gt;</code> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.</p>
+
+<h3 id="Випадки_використання">Випадки використання</h3>
+
+<p>Розглянемо декілька прикладів використання API видимості сторінки.</p>
+
+<ul>
+ <li>На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.</li>
+ <li>Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.</li>
+ <li>Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.</li>
+ <li>Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.</li>
+</ul>
+
+<p>Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.</p>
+
+<div class="note">
+<p><strong>Примітка:</strong> У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.</p>
+</div>
+
+<h3 id="Політика_позиціонування_як_сприяння_продуктивності_фонової_сторінки">Політика позиціонування, як сприяння продуктивності фонової сторінки</h3>
+
+<p>Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:</p>
+
+<ul>
+ <li>Більшість браузерів припиняють посилати {{domxref ("Window.requestAnimationFrame", "requestAnimationFrame ()")}} зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.</li>
+ <li>Такі таймери, як {{domxref ("WindowOrWorkerGlobalScope.setTimeout", "setTimeout ()")}}, гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок, що перевищують встановлені.</a></li>
+ <li>Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
+  <ul>
+   <li>У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.</li>
+   <li>Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок довше, ніж зазначено</a>).  У Chrome це значення дорівнює 10 секундам.</li>
+   <li>Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.</li>
+   <li>Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.</li>
+   <li>Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.</p>
+
+<ul>
+ <li>Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.</li>
+ <li>Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> та <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.</li>
+ <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> процеси також залишаються непорушними для уникнення тайм-аутів.</li>
+</ul>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Подивіться <a href="http://daniemon.com/tech/webapps/page-visibility/">живий приклад</a> (відео зі звуком).</p>
+
+<p>Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:</p>
+
+<pre class="brush: js">   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  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");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+</pre>
+
+<h2 id="Властивості_використані_в_інтерфейсі_документа">Властивості, використані в інтерфейсі документа</h2>
+
+<p>API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :</p>
+
+<dl>
+ <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
+ <dd>Повертає <code>true</code> , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і <code>false</code> якщо навпаки.</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
+ <dd> {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення:
+ <dl>
+  <dt><code>visible</code></dt>
+  <dd>Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.</dd>
+  <dt><code>hidden</code></dt>
+  <dd>Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.</dd>
+  <dt><code>prerender</code></dt>
+  <dd>Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують попереднє завантаження.</div>
+  </dd>
+  <dt><code>unloaded</code></dt>
+  <dd>Сторінка перебуває в процесі вивантаження з пам'яті.
+  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують це значення.</div>
+  </dd>
+ </dl>
+ </dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd> {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .</dd>
+</dl>
+
+<pre class="brush: js">//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+</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('Page Visibility API')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Початкове значення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Працює_з_браузерами">Працює з браузерами</h2>
+
+<div>
+<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>
+
+<div>
+
+
+<p>{{Compat("api.Document.visibilityState")}}</p>
+</div>
+</div>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li>Опис <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"> API Видимості сторінки</a> від IEBlog.</li>
+ <li>Опис <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">API Видимості сторінки</a>  від Google</li>
+</ul>
diff --git a/files/uk/web/api/blob/index.html b/files/uk/web/api/blob/index.html
new file mode 100644
index 0000000000..3cdfbcf46a
--- /dev/null
+++ b/files/uk/web/api/blob/index.html
@@ -0,0 +1,230 @@
+---
+title: Blob
+slug: Web/API/Blob
+translation_of: Web/API/Blob
+---
+<div>{{APIRef("File API")}}</div>
+
+<p>Об'єкт <code>Blob</code> являє собою файло-подібний об'єкт незмінних, початкових даних. Blob представляє дані, що не обов'язкові у нативному форматі JavaScript. Вигляд {{domxref("File")}} заснований на <code>Blob</code>, наслідує функціонал Blob та доповнює його для підтримки файлів з файлової системи користувача.</p>
+
+<p>Для <code>формування Blob</code> з інших не-blob об'єктів й даних використовується конструктор {{domxref("Blob.Blob", "Blob()")}}. Для створення Blob, що міститиме підмножину інших даних Blob, викликається метод {{domxref("Blob.slice()", "slice()")}}. Для отримання Blob для файла з файлової системи користувача перегляньте документацію до {{domxref("File")}}.</p>
+
+<p>API, що працюють з  <code>Blob</code>, також перелічені у документації {{domxref("File")}}.</p>
+
+<div class="note">
+<p><strong>Зауваження:</strong> <code>Метод slice()</code> другим парметром приймає початкову довжину для індикації кількості байтів<code>, які будуть скопійовані у новий Blob</code>. Якщо вказувати змінні таким чином<code>: початковій індекс + довижина, що привищує </code>розмір <code>джерела Blob</code>, <code>повератємий Blob</code> буде містити дані від початкового індексу <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>Повертає новостворенний <code>об'єкт Blob</code>, чий контент складається з ланцюга масивів значень вхідних парметрів.</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, можливо, звілняючи <span class="short_text" id="result_box" lang="uk"><span>використовувані</span></span> ресурси.</dd>
+ <dt>{{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}</dt>
+ <dd>Повертає новий об'єкт <code>Blob</code>, що містить дані у вказаному диапазоні байтів джерела <code>Blob</code>.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Приклад_використання_конструктора_Blob">Приклад використання конструктора Blob</h3>
+
+<p>{{domxref("Blob.Blob", "Blob() constructor")}} дозволяє створювати Blob з інших об'єктів. Наприклад, щоб сконструювати Blob із стрічки:</p>
+
+<pre>var debug = {hello: "world"};
+var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});</pre>
+
+<div class="warning">
+<p>До того, як конструктор Blob став доступний, це можна було зробити за допомогою {{domxref("BlobBuilder")}} API, яка зараз вважається застарілою:</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_типізованого_масиву_з_використанням_Blob">Приклад створення URL типізованого масиву з використанням Blob</h3>
+
+<p>Наступний код:</p>
+
+<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 буде виглядати наступним чином: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// тепер ви можете використовувати url у будь-якому контексті, де можуть бути використані звичайні URLs, наприклад img.src, тощо.
+</pre>
+
+<h3 id="Приклад_отримання_даних_з_Blob">Приклад отримання даних з Blob</h3>
+
+<p>Єдиний шлях для отримання даних з Blob це використовуючи {{domxref("FileReader")}}. Наступиний код зчитує дані з Blob у вигляді типізованого масиву.</p>
+
+<pre class="brush: js">var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result містить контент Blob у вигляді типізованого масиву
+});
+reader.readAsArrayBuffer(blob);</pre>
+
+<p>Вікористовуючи інші методи {{domxref("FileReader")}}, можна прочитати контент Blob у вигляді строки або 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('File API','#blob','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 (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>5<sup>[1]</sup></td>
+   <td>4<sup>[2]</sup></td>
+   <td>10</td>
+   <td>11.10<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>10 {{property_prefix("webkit")}}<br>
+    21</td>
+   <td>5 {{property_prefix("moz")}}<sup>[3]</sup><br>
+    13</td>
+   <td>10</td>
+   <td>12</td>
+   <td>5.1 {{property_prefix("webkit")}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code> constructor</td>
+   <td>20</td>
+   <td>{{CompatGeckoDesktop("13.0")}}</td>
+   <td>10</td>
+   <td>12.10</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<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>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>{{CompatGeckoMobile("13.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>slice()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>Blob()</code> constructor</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>close()</code> and <code>isClosed</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}<sup>[4]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="http://trac.webkit.org/changeset/55670">WebKit</a> and <a href="http://www.opera.com/docs/specs/presto28/file/#blob">Opera 11.10</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, WebKit removed support and added support for the new syntax as <a href="http://trac.webkit.org/changeset/83873"><code>Blob.webkitSlice()</code></a>.</p>
+
+<p>[2] A version of <code>slice()</code> taking the length as second argument was implemented in <a href="https://hg.mozilla.org/mozilla-central/rev/1b3947ed93c6">Firefox 4</a>. However, since that syntax differed from {{jsxref("Array/slice", "Array.slice()")}} and {{jsxref("String/slice", "String.slice()")}}, Gecko removed support and added support for the new syntax as <code>mozSlice()</code>.</p>
+
+<p>[3] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, there was a bug that affected the behavior of <code>slice()</code>; it did not work for <code>start</code> and <code>end</code> positions outside the range of signed 64-bit values; it has now been fixed to support unsigned 64-bit values.</p>
+
+<p>[4] See {{bug("1048325")}}</p>
+
+<h2 id="Gecko_notes_availability_in_privileged_code">Gecko notes: availability in privileged code</h2>
+
+<p>To use from chrome code, JSM and Bootstrap scope, you have to import it like this:</p>
+
+<pre class="brush: js">Cu.importGlobalProperties(['Blob']);
+</pre>
+
+<p><code>Blob</code> is available in Worker scopes.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("BlobBuilder")}}</li>
+ <li>{{domxref("File")}}</li>
+ <li>{{domxref("URL.createObjectURL")}}</li>
+ <li><a href="/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+</ul>
diff --git a/files/uk/web/api/canvas_api/index.html b/files/uk/web/api/canvas_api/index.html
new file mode 100644
index 0000000000..70dbbf1f8d
--- /dev/null
+++ b/files/uk/web/api/canvas_api/index.html
@@ -0,0 +1,166 @@
+---
+title: Canvas API
+slug: Web/API/Canvas_API
+tags:
+  - API
+  - Canvas
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Доданий в <a href="/en-US/docs/HTML/HTML5">HTML5</a>, <strong>елемент HTML {{HTMLElement("canvas")}}</strong> призначений для створення графіки засобами <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. Для прикладу, його використовують для малювання графіків, створення композиції фотографій, створення анімацій, і навіть для обробки та рендерингу відео в реальному часі.</p>
+
+<p>Mozilla applications gained support for <code>&lt;canvas&gt;</code> starting with Gecko 1.8 (i.e. <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). The element was originally introduced by Apple for the OS X Dashboard and Safari. Internet Explorer supports <code>&lt;canvas&gt;</code> from version 9 onwards; for earlier versions of IE, a page can effectively add support for <code>&lt;canvas&gt;</code> by including a script from Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas</a> project. Google Chrome and Opera 9 also support <code>&lt;canvas&gt;</code>.</p>
+
+<p>The <code>&lt;canvas&gt;</code> element is also used by <a href="/en-US/docs/Web/WebGL">WebGL</a> to draw hardware-accelerated 3D graphics on web pages.</p>
+
+<h2 id="Example">Example</h2>
+
+<p>This is just a simple code snippet which uses the {{domxref("CanvasRenderingContext2D.fillRect()")}} method.</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>Edit the code below and see your changes update live in the canvas:</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="Reference">Reference</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>The interfaces related to the <code>WebGLRenderingContext</code> are referenced under <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<h2 id="Guides_and_tutorials">Guides and tutorials</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt>
+ <dd>A comprehensive tutorial covering both the basic usage of <code>&lt;canvas&gt;</code> and its advanced features.</dd>
+ <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code snippets: Canvas</a></dt>
+ <dd>Some extension developer-oriented code snippets involving <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt>
+ <dd>A demo of ray-tracing animation using 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>How to draw DOM content, such as HTML elements, into a canvas.</dd>
+ <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulating video using canvas</a></dt>
+ <dd>Combining {{HTMLElement("video")}} and {{HTMLElement("canvas")}} to manipulate video data in real time.</dd>
+</dl>
+
+<h2 id="Resources">Resources</h2>
+
+<h3 id="Generic">Generic</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 Handbook</a></li>
+</ul>
+
+<h3 id="Libraries">Libraries</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> is an open source lightweight canvas library.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> is a free/open source library to make it easier to use canvas for games and art</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> is another open-source javascript library for creating and manipulating 2d canvas elements</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> is an open source library to create canvas based heatmaps</li>
+</ul>
+
+<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', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li>
+</ul>
diff --git a/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html
new file mode 100644
index 0000000000..e57e9fe4a0
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/basic_usage/index.html
@@ -0,0 +1,152 @@
+---
+title: Базове використання canvas
+slug: Web/API/Canvas_API/Tutorial/Basic_usage
+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>
+
+<div class="summary">
+<p>Давайте почнемо цей урок з розгляду елемента  {{HTMLElement("canvas")}} {{Glossary("HTML")}} як такого. Наприкінці ви дізнаєтесь, як задати canvas 2D context та  зможете намалювати перший приклад в соєму браузері.</p>
+</div>
+
+<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>Елемент {{HTMLElement("canvas")}} схожий на елемент {{HTMLElement("img")}} , з єдиною видимою різницею - він не має атрибутів <code>src</code> та <code>alt</code> attributes. Дійсно, <code>&lt;canvas&gt;</code> має лише два атрибути, {{htmlattrxref("width", "canvas")}} та{{htmlattrxref("height", "canvas")}}. Обидва вони не є обов'язковими, та можуть бути задані за допомогою {{Glossary("DOM")}} <a href="/en-US/docs/Web/API/HTMLCanvasElement">в</a>ластивостей. Коли значення <code>width</code> та <code>height</code> не встановлені, canvas за замовчуванням буде <strong>300 пікселів </strong>шириною, та <strong>150 пікселів</strong> у висоту. Також можливо задати довільні розміри за допомогою  {{Glossary("CSS")}}, але під час ренедерингу зображення буде масштабуватися згідно з його розмірами: якщо задані в CSS параметри не відповідають початковому співвідношенню сторін canvas, воно буде викривленим. </p>
+
+<div class="note">
+<p><strong>Примітка:</strong> Якщо ваше зображення здається викривленимб спробуйте задати атрибути <code>width</code> and <code>height</code> атрибути в тегу <code>&lt;canvas&gt;</code> не використовуючи CSS.</p>
+</div>
+
+<p>Атрибут <a href="/en-US/docs/Web/HTML/Global_attributes/id"><code>id</code></a> не специфіцний для  <code>&lt;canvas&gt;, проте це один з </code><a href="/en-US/docs/Web/HTML/Global_attributes">global HTML attributes</a> які можна викростивувати для  HTML елементів (наприклад, <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code>). Використання <code>id</code> завжди є хорошим рішенням, тому що полегшує ідентифікацію елемента в скрипті. .</p>
+
+<p><code>&lt;canvas&gt;</code> може бути стилізований так само, як і будь-яке звичайне зображення ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…). Ці правила, однак, не впливають на фактичний малюнок на canvas. Ми побачимо, як це робиться в спеціальній главі цього підручника. Якщо до canvas не застосовуються правила стилізації, воно за замовчуванням буде повністю прозорим.</p>
+
+<div id="section_2">
+<h3 id="Резервний_вміст">Резервний вміст</h3>
+
+<p><code>&lt;canvas&gt;</code> відрізняється від {{HTMLElement("img")}} тим, щоя як і для {{HTMLElement("video")}}, {{HTMLElement("audio")}}, або {{HTMLElement("picture")}} елементів, легко визначити деякий резервний вміст, котрий буде відображатися в старих браузерах, що не підтримують <code>&lt;canvas&gt;</code>, таких, як версії Internet Explorer до 9ї версії чи  текстових браузерах. Ви завжди повинні задавати резервний вміст, який буде відображатися в таких браузерах.</p>
+
+<p>Задати резервний вміст дуже просто, достатнь просто вставити альтернативний контент всередину елемента <code>&lt;canvas&gt;</code>. Браузери, які його не підтримують, проігноруюьб контейнер та відобразять альтернативний вміст замість нього. Браузери, які підтримують, пропустять вміст <code>&lt;canvas&gt;</code> і просто покажуть зображення нормально.</p>
+
+<p>наприклад, ми можемо задати текстовий опис вмісту  canvas чи використати статичне зображення динамічно створюваного контентуge of the dynamically rendered content. This can look something like this:</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, наприклад. Використання резервного вмісту або додаткового DOM допомогає <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">make the canvas more accessible</a><a href="/en-US/docs/">.</a></p>
+
+<h3 id="Обовязковий_тег_&lt;canvas>">Обов'язковий тег <code>&lt;/canvas&gt;</code> </h3>
+
+<p>Як наслідок способу надання резервного вмісту,  на відміну від елемента {{HTMLElement("img")}}, {{HTMLElement("canvas")}} <strong>вимагає </strong> закриваючого тега (<code>&lt;/canvas&gt;</code>). у випадку його відстусності, весь документ після  <code>&lt;/canvas&gt;</code> буде розглядатися як резервний вміст та не буде показаний.</p>
+
+<p>Якщо резервний вміст не потрібен, простий <code>&lt;canvas id="foo" ...&gt;&lt;/canvas&gt;</code> повністю сумісний з усіма браузерами, що підтримують canvas.</p>
+
+<h2 id="The_rendering_context">The rendering context</h2>
+
+<p>The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that exposes one or more <strong>rendering contexts</strong>, which are used to create and manipulate the content shown. In this tutorial, we focus on the 2D rendering context. Other contexts may provide different types of rendering; for example, <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> uses a 3D context based on <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p>
+
+<p>The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The {{HTMLElement("canvas")}} element has a method called {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, used to obtain the rendering context and its drawing functions. <code>getContext()</code> takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify <code>"2d"</code> to get a {{domxref("CanvasRenderingContext2D")}}.</p>
+
+<pre class="brush: js notranslate">var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+</pre>
+
+<p>The first line in the script retrieves the node in the DOM representing the {{HTMLElement("canvas")}} element by calling the {{domxref("document.getElementById()")}} method. Once you have the element node, you can access the drawing context using its <code>getContext()</code> method.</p>
+
+<div id="section_5">
+<h2 id="Checking_for_support">Checking for support</h2>
+
+<p>The fallback content is displayed in browsers which do not support {{HTMLElement("canvas")}}. Scripts can also check for support programmatically by simply testing for the presence of the <code>getContext()</code> method. Our code snippet from above becomes something like this:</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="A_skeleton_template">A skeleton template</h2>
+
+<p>Here is a minimalistic template, which we'll be using as a starting point for later examples.</p>
+
+<div class="note">
+<p><strong>Note:</strong> it is not good practice to embed a script inside HTML. We do it here to keep the example concise.</p>
+</div>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"/&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>The script includes a function called <code>draw()</code>, which is executed once the page finishes loading; this is done by listening for the {{event("load")}} event on the document. This function, or one like it, could also be called using {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, or any other event handler, as long as the page has been loaded first.</p>
+
+<p>Here is how a template would look in action. As shown here, it is initially blank.</p>
+
+<p>{{EmbedLiveSample("A_skeleton_template", 160, 160)}}</p>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>To begin, let's take a look at a simple example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples.</p>
+
+<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+ &lt;head&gt;
+  &lt;meta charset="utf-8"/&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, 50, 50);
+
+        ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
+        ctx.fillRect(30, 30, 50, 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>This example looks like this:</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 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/uk/web/api/canvas_api/tutorial/index.html b/files/uk/web/api/canvas_api/tutorial/index.html
new file mode 100644
index 0000000000..f712d8ed88
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/index.html
@@ -0,0 +1,63 @@
+---
+title: Canvas tutorial
+slug: Web/API/Canvas_API/Tutorial
+tags:
+  - Canvas
+  - Graphics
+  - Guide
+  - HTML
+  - HTML5
+  - Intermediate
+  - NeedsTranslation
+  - TopicStub
+  - Web
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div>{{CanvasSidebar}}</div>
+
+<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p>
+
+<div class="summary">
+<p><a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> is an <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> element which can be used to draw graphics using scripting (usually <a href="/en-US/docs/Glossary/JavaScript" title="JavaScript">JavaScript</a>). This can, for instance, be used to draw graphs, make photo composition or simple (and <a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="A_Basic_RayCaster">not so simple</a>) animations. The images on this page show examples of <a href="/en-US/docs/Web/HTML/Element/canvas" title="HTML/Canvas"><strong><code>&lt;canvas&gt;</code></strong></a> implementations which will be created in this tutorial.</p>
+</div>
+
+<p><span class="seoSummary">This tutorial describes how to use the <code>&lt;canvas&gt;</code> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.</span></p>
+
+<p>First introduced in WebKit by Apple for the OS X Dashboard, <code>&lt;canvas&gt;</code> has since been implemented in browsers. Today, all major browsers support it.</p>
+
+<h2 id="Before_you_start" name="Before_you_start">Before you start</h2>
+
+<p>Using the <code>&lt;canvas&gt;</code> element is not very difficult, but you do need a basic understanding of <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> and <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. The <code>&lt;canvas&gt;</code> element is not supported in some older browsers, but is supported in recent versions of all major browsers. The default size of the canvas is 300 px × 150 px (width × height). But custom sizes can be defined using the HTML <code>height</code> and <code>width</code> property. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.</p>
+
+<h2 id="In_this_tutorial" name="In_this_tutorial">In this tutorial</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage" title="Canvas_tutorial/Basic_usage">Basic usage</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Canvas_tutorial/Drawing_shapes">Drawing shapes</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Applying styles and colors</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Drawing text</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images" title="Canvas_tutorial/Using_images">Using images</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing and clipping</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas">Pixel manipulation</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Hit regions and accessibility</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Finale">Finale</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</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://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li>
+</ul>
+
+<h2 id="A_note_to_contributors">A note to contributors</h2>
+
+<p>Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.</p>
+
+<div>{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}</div>
diff --git a/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html b/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html
new file mode 100644
index 0000000000..cb7b8b615b
--- /dev/null
+++ b/files/uk/web/api/canvas_api/tutorial/чутливі_ділянки_та_доступність/index.html
@@ -0,0 +1,108 @@
+---
+title: Чутливі ділянки та доступність
+slug: Web/API/Canvas_API/Tutorial/Чутливі_ділянки_та_доступність
+tags:
+  - Canvas
+  - Графіка
+  - Полотно
+  - Підручник
+translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility
+---
+<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
+
+<div class="summary">Власне HTML-елемент {{HTMLElement("canvas")}} являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.</div>
+
+<h2 id="Запасний_вміст">Запасний вміст</h2>
+
+<p>Вміст між тегами <code>&lt;canvas&gt; … &lt;/canvas&gt;</code> може відігравати роль запасного варіанту для тих {{glossary("Browser", "переглядачів")}}, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> показує, як це можна здійснити:</p>
+
+<pre class="brush: html">&lt;canvas&gt;
+  &lt;h2&gt;Shapes&lt;/h2&gt;
+  &lt;p&gt;A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the &lt;a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();"&gt;circle&lt;/a&gt;.
+   Partially overlaying the circle is a green
+   &lt;a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();"&gt;square&lt;/a&gt;
+   and a purple &lt;a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();"&gt;triangle&lt;/a&gt;,
+   both of which are semi-opaque, so the full circle can be seen underneath.&lt;/p&gt;
+&lt;/canvas&gt; </pre>
+
+<p>Перегляньте відео від Стіва Фолкнера про те, як <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">екранний диктор NVDA читає цей приклад</a>.</p>
+
+<h2 id="Правила_ARIA">Правила ARIA</h2>
+
+<p>Accessible Rich Internet Applications <strong>(<a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:</p>
+
+<pre class="brush: html">&lt;canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"&gt;&lt;/canvas&gt;
+</pre>
+
+<p>Дивіться <a href="/uk/docs/Web/Accessibility/ARIA">ARIA</a> та <a href="/uk/docs/Web/Accessibility/ARIA/ARIA_Techniques">Використання ARIA</a>, щоб дізнатись більше.</p>
+
+<h2 id="Чутливі_ділянки">Чутливі ділянки</h2>
+
+<p>Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам <a href="/uk/docs/Web/Accessibility">доступності</a>. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):</p>
+
+<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>
+
+<p>Створюючи новий контур з допомогою {{domxref("CanvasRenderingContext2D.beginPath()")}} можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості {{domxref("MouseEvent.region")}}, з'ясовувати, чи влучає миша у вказану область:</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(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
+  }
+});
+</pre>
+
+<p>Крім того, метод <code>addHitRegion()</code> може також приймати параметр <code>control</code>, що вказує елемент (має бути нащадком елемента <code>canvas</code>), до якого доправлятимуться події:</p>
+
+<pre class="brush: js">ctx.addHitRegion({control: element});</pre>
+
+<p>Наприклад, це може стати в нагоді для доправлення подій до елементів {{HTMLElement("input")}}.</p>
+
+<h2 id="Облямівки_фокуса">Облямівки фокуса</h2>
+
+<p>Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом <code>drawFocusIfNeeded()</code>.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt>
+ <dd>Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.</dd>
+</dl>
+
+<p>Крім того, можна використати метод <code>scrollPathIntoView()</code>, щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.</p>
+
+<dl>
+ <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt>
+ <dd>Гортає поточний чи вказаний контур до видимої області.</dd>
+</dl>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Потреби доступності Canvas</a></li>
+ <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Вади доступності елемента canvas</a></li>
+ <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">Доступність HTML5 Canvas у Firefox 13 — Стів Фолкнер</a></li>
+ <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Найкращі рішення для взаємодії з елементами полотна</a></li>
+</ul>
+
+<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div>
diff --git a/files/uk/web/api/console/dir/index.html b/files/uk/web/api/console/dir/index.html
new file mode 100644
index 0000000000..1f697b7b5e
--- /dev/null
+++ b/files/uk/web/api/console/dir/index.html
@@ -0,0 +1,104 @@
+---
+title: Console.dir()
+slug: Web/API/Console/dir
+translation_of: Web/API/Console/dir
+---
+<div>{{APIRef("Console API")}}{{Non-standard_header}}</div>
+
+<p>Відображає інтерактивний перелік властивостей заданого JavaScript об'єкту. Кінцеві дані показуються у вигляді ієрархічного списку з трикутниками, клікнувши на які мишкою Ви можете переглянути вміст дочірніх об'єктів.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<p><img alt="console-dir.png" class="default internal" src="/@api/deki/files/6081/=console-dir.png"></p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">console.dir(<em>object</em>);
+</pre>
+
+<h2 id="Параметри">Параметри</h2>
+
+<dl>
+ <dt><code>object</code></dt>
+ <dd>Об'єкт JavaScript, властивості якого ви хочете переглянути.</dd>
+</dl>
+
+<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("8.0")}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Available in 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>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("8.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>{{CompatGeckoDesktop("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>
+ <li><a href="https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject">Chrome Console API reference</a></li>
+</ul>
diff --git a/files/uk/web/api/console/index.html b/files/uk/web/api/console/index.html
new file mode 100644
index 0000000000..8a19610a53
--- /dev/null
+++ b/files/uk/web/api/console/index.html
@@ -0,0 +1,278 @@
+---
+title: Console
+slug: Web/API/Console
+tags:
+  - API
+  - Debugging
+  - Interface
+  - NeedsCompatTable
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - console
+  - web console
+translation_of: Web/API/Console
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>The <strong><code>Console</code></strong> object 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.</p>
+
+<p>The <code>Console</code> object can be accessed from any global object, {{domxref("Window")}} on browsing scopes, {{domxref("WorkerGlobalScope")}}, and its specific variants in workers via property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as simply <code>console</code>. For example:</p>
+
+<pre class="brush: js">console.log("Failed to open the specified link")</pre>
+
+<p>This page documents the {{anch("Methods")}} available on the <code>Console</code> object and gives a few {{anch("Usage")}} examples.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Console.assert()")}}</dt>
+ <dd>Log a message and stack trace to console if first argument is <code>false</code>.</dd>
+ <dt>{{domxref("Console.clear()")}}</dt>
+ <dd>Clear the console.</dd>
+ <dt>{{domxref("Console.count()")}}</dt>
+ <dd>Log the number of times this line has been called with the given label.</dd>
+ <dt>{{domxref("Console.debug()")}}</dt>
+ <dd>An alias for <code>log() - starting with Chromium 58 this method is a no-op on Chromium browsers.</code></dd>
+ <dt>{{domxref("Console.dir()")}} {{Non-standard_inline}}</dt>
+ <dd>Displays an interactive listing of the properties of a specified JavaScript object. This listing lets you use disclosure triangles to examine the contents of child objects.</dd>
+ <dt>{{domxref("Console.dirxml()")}} {{Non-standard_inline}}</dt>
+ <dd>
+ <p>Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.</p>
+ </dd>
+ <dt>{{domxref("Console.error()")}}</dt>
+ <dd>Outputs an error message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.exception()")}} {{Non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>An alias for <code>error()</code></dd>
+ <dt>{{domxref("Console.group()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupCollapsed()")}}</dt>
+ <dd>Creates a new inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>, indenting all following output by another level; unlike <code>group()</code>, this starts with the inline group collapsed, requiring the use of a disclosure button to expand it. To move back out a level, call <code>groupEnd()</code>.</dd>
+ <dt>{{domxref("Console.groupEnd()")}}</dt>
+ <dd>Exits the current inline <a href="/en-US/docs/Web/API/console#Using_groups_in_the_console">group</a>.</dd>
+ <dt>{{domxref("Console.info()")}}</dt>
+ <dd>Informative logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.log()")}}</dt>
+ <dd>For general output of logging information. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+ <dt>{{domxref("Console.profile()")}} {{Non-standard_inline}}</dt>
+ <dd>Starts the browser's build-in profiler (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>). You can specify an optional name for the profile.</dd>
+ <dt>{{domxref("Console.profileEnd()")}} {{Non-standard_inline}}</dt>
+ <dd>Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the <a href="/en-US/docs/Tools/Performance">Firefox performance tool</a>).</dd>
+ <dt>{{domxref("Console.table()")}}</dt>
+ <dd>Displays tabular data as a table.</dd>
+ <dt>{{domxref("Console.time()")}}</dt>
+ <dd>Starts a <a href="/en-US/docs/Web/API/console#Timers">timer</a> with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.</dd>
+ <dt>{{domxref("Console.timeEnd()")}}</dt>
+ <dd>Stops the specified <a href="/en-US/docs/Web/API/console#Timers">timer</a> and logs the elapsed time in seconds since its start.</dd>
+ <dt>{{domxref("Console.timeStamp()")}} {{Non-standard_inline}}</dt>
+ <dd>Adds a marker to the browser's <a href="https://developer.chrome.com/devtools/docs/timeline">Timeline</a> or <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> tool.</dd>
+ <dt>{{domxref("Console.trace()")}}</dt>
+ <dd>Outputs a <a href="/en-US/docs/Web/API/console#Stack_traces">stack trace</a>.</dd>
+ <dt>{{domxref("Console.warn()")}}</dt>
+ <dd>Outputs a warning message. You may use <a href="/en-US/docs/Web/API/console#Using_string_substitutions">string substitution</a> and additional arguments with this method.</dd>
+</dl>
+
+
+<h2 id="Usage" name="Usage">Usage</h2>
+
+<h3 id="Outputting_text_to_the_console" name="Outputting_text_to_the_console">Outputting text to the console</h3>
+
+<p>The most frequently-used feature of the console is logging of text and other data. There are four categories of output you can generate, using the {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}}, and {{domxref("console.error()")}} methods. Each of these results in output that's styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.</p>
+
+<p>There are two ways to use each of the output methods; you can simply pass in a list of objects whose string representations get concatenated into one string, then output to the console, or you can pass in a string containing zero or more substitution strings followed by a list of the objects with which to replace them.</p>
+
+<h4 id="Outputting_a_single_object">Outputting a single object</h4>
+
+<p>The simplest way to use the logging methods is to output a single object:</p>
+
+<pre class="brush: js">var someObject = { str: "Some text", id: 5 };
+console.log(someObject);
+</pre>
+
+<p>The output looks something like this:</p>
+
+<pre>[09:27:13.475] ({str:"Some text", id:5})</pre>
+
+<h4 id="Outputting_multiple_objects">Outputting multiple objects</h4>
+
+<p>You can also output multiple objects by simply listing them when calling the logging method, like this:</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>This output will look like this:</p>
+
+<pre>[09:28:22.711] My first car was a Dodge Charger . The object is:  ({str:"Some text", id:5})
+</pre>
+
+<h4 id="Using_string_substitutions">Using string substitutions</h4>
+
+<p>Gecko 9.0 {{geckoRelease("9.0")}} introduced support for string substitutions. When passing a string to one of the console object's methods that accepts a string, you may use these substitution strings:</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">Substitution string</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td>%o or %O</td>
+   <td>Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.</td>
+  </tr>
+  <tr>
+   <td>%d or %i</td>
+   <td>Outputs an integer. Number formatting is supported, for example  <code>console.log("Foo %.2d", 1.1)</code> will output the number as two significant figures with a leading 0: <code>Foo 01</code></td>
+  </tr>
+  <tr>
+   <td>%s</td>
+   <td>Outputs a string.</td>
+  </tr>
+  <tr>
+   <td>%f</td>
+   <td>Outputs a floating-point value. Formatting is supported, for example  <code>console.log("Foo %.2f", 1.1)</code> will output the number to 2 decimal places: <code>Foo 1.10</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Each of these pulls the next argument after the format string off the parameter list. For example:</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>The output looks like this:</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="Styling_console_output">Styling console output</h4>
+
+<p>You can use the <code>"%c"</code> directive to apply a CSS style to console output:</p>
+
+<pre class="brush: js">console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");</pre>
+
+<div>The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.</div>
+
+<div> </div>
+
+<div><img alt="" src="https://mdn.mozillademos.org/files/12527/CSS-styling.png" style="display: block; margin: 0 auto;"></div>
+
+<div> </div>
+
+<div class="note">
+<p><strong>Note</strong>: Quite a few CSS properties are supported by this styling; you should experiment and see which ones provide useful.</p>
+</div>
+
+<div> </div>
+
+<div>{{h3_gecko_minversion("Using groups in the console", "9.0")}}</div>
+
+<p>You can use nested groups to help organize your output by visually combining related material. To create a new nested block, call <code>console.group()</code>. The <code>console.groupCollapsed()</code> method is similar, but creates the new block collapsed, requiring the use of a disclosure button to open it for reading.</p>
+
+<div class="note"><strong>Note:</strong> Collapsed groups are not supported yet in Gecko; the <code>groupCollapsed()</code> method is the same as <code>group()</code> at this time.</div>
+
+<p>To exit the current group, simply call console.groupEnd(). For example, given this 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>The output looks like this:</p>
+
+<p><img alt="nesting.png" class="default internal" src="/@api/deki/files/6082/=nesting.png"></p>
+
+<div>{{h3_gecko_minversion("Timers", "10.0")}}</div>
+
+<p>In order to calculate the duration of a specific operation, Gecko 10 introduced the support of timers in the <code>console</code> object. To start a timer, call the <code>console.time</code><code>()</code> method, giving it a name as the only parameter. To stop the timer, and to get the elapsed time in milliseconds, just call the <code>console.timeEnd()</code> method, again passing the timer's name as the parameter. Up to 10,000 timers can run simultaneously on a given page.</p>
+
+<p>For example, given this code:</p>
+
+<pre class="brush: js">console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+</pre>
+
+<p>will log the time needed by the user to discard the alert box:</p>
+
+<p><img alt="timerresult.png" class="default internal" src="/@api/deki/files/6084/=timerresult.png"></p>
+
+<p>Notice that the timer's name is displayed both when the timer is started and when it's stopped.</p>
+
+<div class="note"><strong>Note:</strong> It's important to note that if you're using this to log the timing for network traffic, the timer will report the total time for the transaction, while the time listed in the network panel is just the amount of time required for the header. If you have response body logging enabled, the time listed for the response header and body combined should match what you see in the console output.</div>
+
+<h3 id="Stack_traces">Stack traces</h3>
+
+<p>The console object also supports outputting a stack trace; this will show you the call path taken to reach the point at which you call {{domxref("console.trace()")}}. Given code like this:</p>
+
+<pre class="brush: js">function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+</pre>
+
+<p>The output in the console looks something like this:</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="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>
+
+<h2 id="Notes">Notes</h2>
+
+<ul>
+ <li>At least in Firefox, if a page defines a <code>console</code> object, that object overrides the one built into Firefox.</li>
+ <li>Prior to {{Gecko("12.0")}}, the console object's methods only work when the Web Console is open. Starting with {{Gecko("12.0")}}, output is cached until the Web Console is opened, then displayed at that time.</li>
+ <li>It's worth noting that the Firefox's built-in <code>Console</code> object is compatible with the one provided by <a class="external" href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Tools" title="Tools">Tools</a></li>
+ <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a> — how the Web Console in Firefox handles console API calls</li>
+ <li><a href="/en-US/docs/Tools/Remote_Debugging">Remote debugging</a> — how to see console output when the debugging target is a mobile device</li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/On-device_console_logging">On-device console logging</a> — how to do logging on Firefox OS devices</li>
+</ul>
+
+<h3 id="Other_implementations">Other implementations</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/en-us/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/uk/web/api/console/log/index.html b/files/uk/web/api/console/log/index.html
new file mode 100644
index 0000000000..8155ab780b
--- /dev/null
+++ b/files/uk/web/api/console/log/index.html
@@ -0,0 +1,173 @@
+---
+title: Console.log()
+slug: Web/API/Console/log
+translation_of: Web/API/Console/log
+---
+<div>{{APIRef("Console API")}}</div>
+
+<p>Виводить повідомлення  у веб консоль.</p>
+
+<p>Повідомлення може бути одним рядком (з необов'язковими значеннями заміщення) або може бути будь-яким одним або декількома об'єктами JavaScript.</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>, які не обов'язково є "значенням" даного об'єкту на момент виклику console.log(), але точно є значенням об'єкту в момент кліку по ньому, щоб відкрити.</dd>
+ <dt><code>msg</code></dt>
+ <dd> JavaScript рядок містить нуль або більше  <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символів підміни</a>.</dd>
+ <dt><code>subst1</code> ... <code>substN</code></dt>
+ <dd>JavaScript об'єкти за допомогою яких можливо заміняти <a href="https://developer.mozilla.org/en/docs/Web/API/console#Using_string_substitutions">символи підміни</a> в межах <code>msg</code>. Це надає додатковий контроль формату виводу.</dd>
+</dl>
+
+<p>Дивіться <a href="https://developer.mozilla.org/en-US/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>Initial definition</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>{{CompatVersionUnknown}}<br>
+    {{CompatChrome(28)}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("9.0")}}</td>
+   <td>10<sup>[2]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступність для "воркерів"</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>Рядки заміщення</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("9.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Доступність для "воркерів"</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] Якщо від`ємне значення прямує до <code>%d</code>, воно буде заокруглене до найближчого від`ємного цілого, тому -0.1 стає -1.</p>
+
+<p>[2] <code>%c</code> не підтримується, <code>%d</code> буде візуалізоване, як 0, якщо це не є числом.</p>
+
+<h2 id="Різниця_із_console.dir()">Різниця із console.dir()</h2>
+
+<p>Ви можете запитати себе, яка ж відмінність між console.dir() та console.log().</p>
+
+<p>Інша корисна відмінність існує у Chrome, коли відбувається надсилання DOM- елементів до консолі.</p>
+
+<p><img alt="" 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</a>.</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/uk/web/api/customevent/index.html b/files/uk/web/api/customevent/index.html
new file mode 100644
index 0000000000..76b8aeef1a
--- /dev/null
+++ b/files/uk/web/api/customevent/index.html
@@ -0,0 +1,96 @@
+---
+title: CustomEvent
+slug: Web/API/CustomEvent
+tags:
+  - API
+  - DOM
+  - Interface
+  - NeedsCompatTable
+  - NeedsExample
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/CustomEvent
+---
+<p>{{APIRef("DOM")}} Інтерфейс <strong><code>CustomEvent</code></strong> являє собою події, ініціалізовані додатком для будь-яких цілей.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</dt>
+ <dd>Створює <code>CustomEvent</code>.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.detail")}} {{readonlyinline}}</dt>
+ <dd>Будь-які дані, передані при ініціалізації події.</dd>
+</dl>
+
+<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "Properties")}}</p>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}</dt>
+ <dd>
+ <p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Ініціалізує об'єкт </span></font>CustomEvent</code>. Якщо подія вже відправлена, цей метод нічого не робить.</p>
+ </dd>
+</dl>
+
+<p><em>Цей інтерфейс успадковує властивості від батьків, </em>{{domxref("Event")}}:</p>
+
+<p>{{Page("/en-US/docs/Web/API/Event", "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('DOM WHATWG','#interface-customevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Браузерна_сумісність">Браузерна сумісність</h2>
+
+
+
+<p>{{Compat("api.CustomEvent")}}</p>
+
+<h2 id="Firing_from_privileged_code_to_non-privileged_code">Firing from privileged code to non-privileged code</h2>
+
+<p>When firing a CustomEvent from privileged code (i.e. an extension) to non-privileged code (i.e. a webpage), security issues should be considered. Firefox and other Gecko applications restrict an object created in one context from being directly used for another, which will automatically prevent security holes, but these restrictions may also prevent your code from running as expected.</p>
+
+<p>While creating a CustomEvent object, you must create the object from the same <a href="/en-US/docs/XUL/window">window</a>. The <code>detail</code> attribute of your CustomEvent will be subjected to the same restrictions. String and Array values will be readable by the content without restrictions, but custom Objects will not. While using a custom Object, you will need to define the attributes of that object that are readable from the content script using <a href="/en-US/docs/">Components.utils.cloneInto()</a>.</p>
+
+<pre class="brush: js">// doc is a reference to the content document
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}</pre>
+
+<p>But one needs to keep in mind that exposing a function will allow the content script to run it with chrome privileges, which can open a security vulnerability.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged pages</a></li>
+ <li><a href="/en-US/docs/Web/API/window.postMessage" title="/en-US/docs/Web/API/window.postMessage">Window.postMessage</a></li>
+ <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li>
+</ul>
diff --git a/files/uk/web/api/customevent/initcustomevent/index.html b/files/uk/web/api/customevent/initcustomevent/index.html
new file mode 100644
index 0000000000..84ea6d6a28
--- /dev/null
+++ b/files/uk/web/api/customevent/initcustomevent/index.html
@@ -0,0 +1,120 @@
+---
+title: CustomEvent.initCustomEvent()
+slug: Web/API/CustomEvent/initCustomEvent
+translation_of: Web/API/CustomEvent/initCustomEvent
+---
+<p>{{APIRef("DOM")}}{{deprecated_header}}</p>
+
+<p>Метод <code><strong>CustomEvent.initCustomEvent()</strong></code> ініціалізує  <code>CustomEvent</code> об'єкт. Якщо на момент ініціалізації event-об'єкт вже був переданий(dispatched), то виклик метода {{ domxref("CustomEvent.initCustomEvent()") }} не матиме ніякого ефекту.</p>
+
+<p>Події,ініціалізовані у такий спосіб, повинні бути створені за допомогою метода {{domxref("Document.createEvent()") }}.Вказаний метод має бути викликаний для створення події до того, як вона буде передана за допомогою {{ domxref("EventTarget.dispatchEvent()") }}. Як тільки подія є переданою, ніяких дій цей метод більше не виконує. </p>
+
+<div class="note">
+<p><strong>Більше не використовуйте цей метод, оскільки він засуджується.</strong></p>
+
+<p>Натомість, використовуйте спеціальні конструктори подій, наприклад {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}. Сторінка про  <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> містить більше інформації про способи їхнього використання.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>event</em>.initCustomEvent(<em>type</em>, <em>canBubble</em>, <em>cancelable</em>, <em>detail</em>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code><em>type</em></code></dt>
+ <dd>Це {{domxref("DOMString")}} , що містить назву події</dd>
+ <dt><em><code>canBubble</code></em></dt>
+ <dd>Це {{jsxref("Boolean")}} , що вказує чи подія виринає вгору(bubbles up) крізь DOM чи ні.</dd>
+ <dt><code><em>cancelable</em></code></dt>
+ <dd>Це {{jsxref("Boolean")}} , що вказує чи подія є cancelable.</dd>
+ <dt><em><code>deta</code></em><em><code>il</code></em></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('DOM WHATWG','#dom-customevent-initcustomevent','CustomEvent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Початкове визначення, однак, вже вважається небажаним, натомість, рекомендується використання конструктора,{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}</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>
+    <p>Базова підтримка</p>
+   </td>
+   <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(6)}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>5.1 (533.3)</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Опис</th>
+   <th>Android Webview</th>
+   <th>Chrome для 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>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{ CompatVersionUnknown() }}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(6)}}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+   <td>{{ CompatUnknown() }}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Починаючи з Chrome 59, <code>canBubble</code>, <code>cancelable</code>, та <code>detail</code> є необов'язковими параметрами , які за замовчуванням містять значення <code>false</code>, <code>false</code>, та <code>null</code> відповідно.</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li>{{domxref("CustomEvent")}}</li>
+ <li>Конструктор для використання замість небажаного метода:{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.</li>
+</ul>
diff --git a/files/uk/web/api/document/index.html b/files/uk/web/api/document/index.html
new file mode 100644
index 0000000000..44b1bddc0e
--- /dev/null
+++ b/files/uk/web/api/document/index.html
@@ -0,0 +1,470 @@
+---
+title: Document
+slug: Web/API/Document
+tags:
+  - API
+  - DOM
+  - Інтерфейс
+  - Документ
+  - Посилання
+translation_of: Web/API/Document
+---
+<div>{{APIRef}}</div>
+
+<div> </div>
+
+<p><span class="seoSummary"><strong><code>Document</code></strong> інтерфейс представляє будь-яку веб-сторінку, завантажену в браузер і яка слугує точкою входу в контент веб-сторінки, чим є <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>.</span> DOM tree включає елементи такі як {{HTMLElement("body")}} і {{HTMLElement("table")}}, серед <a href="/en-US/docs/Web/HTML/Element">багатьох інших</a>. Це забезпечує глобальну функціональність для документу, таку як отримувати URL сторінки і створювати нові елементи в документі.</p>
+
+<p>{{inheritanceDiagram}}</p>
+
+<p><code>Інтерфейс Document</code> описує загальні властивості і методи для будь-якого типу документу. Залежно від типу документу (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), більший API доступний: HTML-документи, які подаються з <code>text/html</code> типом контенту, також реалізовують {{domxref("HTMLDocument")}} інтерфейс, тоді як XML і SVG документи реалізовують {{domxref("XMLDocument")}} інтерфейс.</p>
+
+<h2 id="Properties" name="Properties">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Document.Document","Document()")}}{{non-standard_inline}}</dt>
+ <dd>Створює новий <code>Document</code> об'єкт.</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">Властивості</h2>
+
+<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt>
+ <dd>Забезпечує доступ до всіх елементів в документі. Це застарілий, нестандартний інтерфейс і він не повинен використовуватись.</dd>
+ <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt>
+ <dd>Використовується з {{domxref("Document.load")}} щоб вказати асинхронний запит.</dd>
+ <dt>{{domxref("Document.body")}}</dt>
+ <dd>Повертає {{HTMLElement("body")}}, або {{htmlelement("frameset")}} вузол поточного документу.</dd>
+ <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає кодування, яке використовується в документі.</dd>
+ <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd>
+ <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Вказує чи документ інтерпретується в <em>quirks</em> чи <em>strict</em> режимі.</dd>
+ <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>Повертає Content-Type з MIME-заголовку поточного документу.</dd>
+ <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt>
+ <dd>Повертає Визначення Типу Документу (DTD) поточного документу.</dd>
+ <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("Element")}}, який є прямим нащадком document. Для HTML-документів, це, як правило, <span class="seoSummary">{{domxref("HTMLElement")}}</span> елемент.</dd>
+ <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt>
+ <dd>Повертає розміщення документу у вигляді стрічки.</dd>
+ <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt>
+ <dd>Повинна повертати {{domxref("DOMConfiguration")}} об'єкт.</dd>
+ <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt>
+ <dd><code>true,</code>якщо документ в {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd>
+ <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt>
+ <dd>Повертає DOM реалізацію, асоційовану з поточним документом.</dd>
+ <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt>
+ <dd>Псевдонім для {{domxref("Document.characterSet")}}. Використовуй цю властивість взамін.</dd>
+ <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає ім'я набору стилів, які були останніми включені.  Має значення <code>null,</code> аж поки таблиця стилів змінена встановленням значення {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd>
+ <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt>
+ <dd>Повертає {{jsxref("Boolean")}}, яким є <code>true</code> лише якщо цей документ є синтетичним, таким як окреме зображення, відео-, аудіо-файл, або т. п.</dd>
+ <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd>Елемент, який зараз є в повноекранному режимі для цього документу.</dd>
+ <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt>
+ <dd><code>true,</code> якщо виклик {{domxref("Element.mozRequestFullscreen()")}} буде успішним в поточному документі.</dd>
+ <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt>
+ <dd>Повертає бажаний набір стилів, як вказано автором сторінки.</dd>
+ <dt>{{domxref("Document.scrollingElement")}} {{readonlyinline}}</dt>
+ <dd>Повертає посилання на {{domxref("Element")}} ,який прокручує документ.</dd>
+ <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt>
+ <dd>Повертає набір стилів, який зараз у використанні.</dd>
+ <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt>
+ <dd>Повертає список наборів стилів, доступних для документу.</dd>
+ <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt>
+ <dd>…</dd>
+ <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt>
+ <dd>
+ <p>Повертає <code>string,</code> яка виражає видимість стану документу. Можливими значеннями є <code>visible</code>,  <code>hidden</code>,  <code>prerender</code>, і <code>unloaded</code>.</p>
+ </dd>
+ <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає кодування, як визначено XML-оголошенням.</dd>
+ <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Повертає <code>true,</code> якщо оголошення XML  вказує документу бути автономним (<em>e.g.,</em> Зовнішня частина DTD впливає на контент документу), або <code>false</code>.</dd>
+ <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt>
+ <dd>Повертає номер версії, як вказано в XML-оголошенні, або <code>"1.0",</code> якщо оголошення відсутнє.</dd>
+</dl>
+
+<p><code>Document</code> інтерфейс розширюється {{domxref("ParentNode")}} інтерфейсом:</p>
+
+<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p>
+
+<h3 id="Розширення_для_HTML-документу"> Розширення для HTML-документу</h3>
+
+<p><em>Інтерфейс <code>Document</code> для HTML-документів розширює {{domxref("HTMLDocument")}} інтерфейс, або, починаючи з HTML5,  розширюється для таких документів.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає або встановлює колір активних посилань в тілі документу.</dd>
+ <dt>{{domxref("Document.anchors")}}</dt>
+ <dd>Повертає список всіх якорів в документі.</dd>
+ <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt>
+ <dd>Повертає впорядкований список апплетів в межах документу.</dd>
+ <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює фоновий колір поточного документу.</dd>
+ <dt>{{domxref("Document.cookie")}}</dt>
+ <dd>Повертає список куків, розділених крапкою з комою, для того документу або встановлює одиничний кукі.</dd>
+ <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt>
+ <dd>Повертає посилання на об'єкт window.</dd>
+ <dt>{{domxref("Document.designMode")}}</dt>
+ <dd>Отримує/встановлює можливість редагування цілого документу.</dd>
+ <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt>
+ <dd>Отримує/встановлює направленість (rtl - справа наліво/ltr зліва направо) документу.</dd>
+ <dt>{{domxref("Document.domain")}}</dt>
+ <dd>Отримує/встановлює домен поточного документу.</dd>
+ <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt>
+ <dd>Повертає список вбудованих {{HTMLElement('embed')}} елементів в межах поточного документу.</dd>
+ <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір переднього плану, або колір тексту поточного документу.</dd>
+ <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt>
+ <dd>Повертає список {{HTMLElement("form")}} елементів в межах поточного документу.</dd>
+ <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{HTMLElement("head")}} елемент поточного документу.</dd>
+ <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Отримує/встановлює висоту поточного документу.</dd>
+ <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt>
+ <dd>Повертає список зображень в поточному документі.</dd>
+ <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt>
+ <dd>Повертає дату, коли документ був востаннє змінений.</dd>
+ <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір гіперпосилань в документі.</dd>
+ <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt>
+ <dd>Повертає список всіх гіперпосилань в документі.</dd>
+ <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt>
+ <dd>Повертає URI поточного документу.</dd>
+ <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt>
+ <dd>Повертає список доступних плагінів.</dd>
+ <dt>{{domxref("Document.readyState")}} {{readonlyinline}}  {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Повертає статус завантаження документу.</dd>
+ <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt>
+ <dd>Повертає URI сторінки, яка прив'язана до цієї сторінки.</dd>
+ <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt>
+ <dd>Повертає всі {{HTMLElement("script")}} елементи в документі.</dd>
+ <dt>{{domxref("Document.title")}}</dt>
+ <dd>Встановлює або отримує назву поточного документу.</dd>
+ <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt>
+ <dd><span style="line-height: 19.0909080505371px;">Повертає розміщення документу у вигляді стрічки.</span></dd>
+ <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt>
+ <dd>Отримує/встановлює колір відвіданих гіперпосилань.</dd>
+ <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Повертає ширину поточного документу.</dd>
+</dl>
+
+<h3 id="Властивості_включені_з_DocumentOrShadowRoot">Властивості, включені з DocumentOrShadowRoot</h3>
+
+<p><em>Інтерфейс <code>Document</code> включає наступні властивості, визначені в {{domxref("DocumentOrShadowRoot")}} міксині. Зверни увагу, що це, на даний час, реалізовано в Chrome; інші браузери все ще реалізують їх безпосередньо через {{domxref("Document")}} інтерфейс.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.activeElement")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref('Element')}} within the shadow tree that has focus.</dd>
+ <dt>{{domxref("Document.fullscreenElement")}} {{readonlyinline}}</dt>
+ <dd>The element that's currently in full screen mode for this document.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.pointerLockElement")}} {{readonlyinline}} {{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("DocumentOrShadowRoot.styleSheets")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref('StyleSheetList')}} of {{domxref('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
+</dl>
+
+<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd>
+ <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("copy")}} event.</dd>
+ <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("cut")}} event.</dd>
+ <dt>{{domxref("Document.onfullscreenchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onfullscreenerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd>
+ <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("paste")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd>
+ <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("pointerlockerror")}} event.</dd>
+ <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd>
+ <dt>{{domxref("Document.onselectionchange")}} {{experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onvisibilitychange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd>
+ <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt>
+ <dd>Represents the event handling code for the {{event("wheel")}} event.</dd>
+</dl>
+
+<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p>
+
+<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p>
+
+<h2 id="Methods" name="Methods">Методи</h2>
+
+<p><em>Цей інтерфейс також розширює {{domxref("Node")}} і {{domxref("EventTarget")}} інтерфейси.</em></p>
+
+<dl>
+ <dt>{{domxref("Document.adoptNode()")}}</dt>
+ <dd>Приймає вузол із зовнішнього документу.</dd>
+ <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Дивись {{domxref("Window.captureEvents")}}.</dd>
+ <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt>
+ <dd>Отримує об'єкт {{Domxref("Range")}} для фрагмента документу у відповідності до вказаних координат.</dd>
+ <dt>{{domxref("Document.createAttribute()")}}</dt>
+ <dd>Створює новий об'єкт {{domxref("Attr")}} і повертає його.</dd>
+ <dt>{{domxref("Document.createAttributeNS()")}}</dt>
+ <dd>Створює  новий вузол атрибута в заданому просторі імен і повертає його.</dd>
+ <dt>{{domxref("Document.createCDATASection()")}}</dt>
+ <dd>Створює новий вузол CDATA і повертає його.</dd>
+ <dt>{{domxref("Document.createComment()")}}</dt>
+ <dd> Створює новий вузол коментаря і повертає його.</dd>
+ <dt>{{domxref("Document.createDocumentFragment()")}}</dt>
+ <dd>Створює новий фрагмент документу.</dd>
+ <dt>{{domxref("Document.createElement()")}}</dt>
+ <dd>Створює новий елемент із заданим ім'ям тега.</dd>
+ <dt>{{domxref("Document.createElementNS()")}}</dt>
+ <dd>Створює новий елемент із заданим ім'ям тега і URI простором імен.</dd>
+ <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt>
+ <dd>Створює нове посилання на об'єкт і повертає його.</dd>
+ <dt>{{domxref("Document.createEvent()")}}</dt>
+ <dd>Створює об'єкт події.</dd>
+ <dt>{{domxref("Document.createNodeIterator()")}}</dt>
+ <dd>Створює об'єкт {{domxref("NodeIterator")}}.</dd>
+ <dt>{{domxref("Document.createProcessingInstruction()")}}</dt>
+ <dd>Створює новий об'єкт {{domxref("ProcessingInstruction")}}.</dd>
+ <dt>{{domxref("Document.createRange()")}}</dt>
+ <dd>Створює об'єкт {{domxref("Range")}}.</dd>
+ <dt>{{domxref("Document.createTextNode()")}}</dt>
+ <dd>Створює текстовий вузол.</dd>
+ <dt>{{domxref("Document.createTouch()")}} {{Deprecated_inline}}</dt>
+ <dd>Створює об'єкт {{domxref("Touch")}}.</dd>
+ <dt>{{domxref("Document.createTouchList()")}}</dt>
+ <dd>Створює об'єкт {{domxref("TouchList")}}.</dd>
+ <dt>{{domxref("Document.createTreeWalker()")}}</dt>
+ <dd> Створює об'єкт{{domxref("TreeWalker")}}.</dd>
+ <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt>
+ <dd>Вмикає таблиці стилів для вказаного набору таблиць стилів.</dd>
+ <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt>
+ <dd>Звільняє блокування вказівника.</dd>
+ <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt>
+ <dd>Повертає масив всіх об'єктів {{domxref("Animation")}}, які діють на даний момент, чиї цільові елементи є нащадками <code>document</code>.</dd>
+ <dt>{{domxref("Document.getElementsByClassName()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям класу.</dd>
+ <dt>{{domxref("Document.getElementsByTagName()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям тега.</dd>
+ <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt>
+ <dd>Повертає список елементів із заданим ім'ям тега і простором імен.</dd>
+ <dt>{{domxref("Document.importNode()")}}</dt>
+ <dd>Повертає клон вузла з зовнішнього документу.</dd>
+ <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt>
+ <dd>Заміняє сутності, нормалізує текстові вузли, і т. д.</dd>
+ <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Звільняє поточний захват мишки, якщо він знаходиться на елементі в цьому документі.</dd>
+ <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Дивись {{domxref("Window.releaseEvents()")}}.</dd>
+ <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt>
+ <dd>Дивись {{domxref("Window.routeEvent()")}}.</dd>
+ <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Дозволяє змінити елемент, який використовуєтья в якості фонового зображення для вказаного ідентифікатора елемента. </dd>
+</dl>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("ParentNode")}}:</p>
+
+<dl>
+ <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt>
+ <dd>Повертає посилання на об'єкт визначеного елемента.</dd>
+ <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Повертає перший Element-вузол в межах документу, в порядку документу, який співпадає зі вказаними селекторами.</dd>
+ <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Повертає список всіх Element-вузлів в межах документу, які співпадають з вказаними селекторами.</dd>
+</dl>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Інтерфейс </span></font>Document</code> розширюється інтерфейсом {{domxref("XPathEvaluator")}}:</p>
+
+<dl>
+ <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt>
+ <dd>Компілює <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> який може тоді бути використаний для (повторюваних) оцінювань.</dd>
+ <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt>
+ <dd>Створює об'єкт {{domxref("XPathNSResolver")}}.</dd>
+ <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt>
+ <dd>Вираховує вираз XPath.</dd>
+</dl>
+
+<h3 id="Розширення_для_HTML-документів">Розширення для HTML-документів</h3>
+
+<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">інтерфейс </span></font>Document</code> для HTML-документів наслідується від інтерфейсу {{domxref("HTMLDocument")}} або, починаючи з HTML5,  розширюється для таких документів:</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.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 formating command.</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>
+
+<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3>
+
+<p><em>The <code>Document</code> interface includes the following methods defined on the {{domxref("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{domxref("Document")}} interface.</em></p>
+
+<dl>
+ <dt>{{domxref("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Returns a {{domxref('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Returns the topmost element at the specified coordinates.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Returns an array of all elements at the specified coordinates.</dd>
+ <dt>{{domxref("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Returns a {{domxref('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</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('Page Visibility API', '#onvisiblitychange-event-handler', 'onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Adds <code>onvisibility</code><code>change</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td>
+  </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 document.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</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_notes">Browser compatibility notes</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")}} {{non-standard_inline}} {{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>
diff --git a/files/uk/web/api/document/visibilitychange_event/index.html b/files/uk/web/api/document/visibilitychange_event/index.html
new file mode 100644
index 0000000000..be68d28a48
--- /dev/null
+++ b/files/uk/web/api/document/visibilitychange_event/index.html
@@ -0,0 +1,82 @@
+---
+title: 'Документ: зміна видимості'
+slug: Web/API/Document/visibilitychange_event
+tags:
+  - API
+  - API відображення сторінки
+  - visibilitychange
+  - відображення сторінки
+  - фоновий режим
+translation_of: Web/API/Document/visibilitychange_event
+---
+<div>{{APIRef}}</div>
+
+<p>Подія <code> visibilitychange</code> запускається в документі, коли вміст його вкладки змінився, став видимим або прихованим.</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("Document.onvisibilitychange", "onvisibilitychange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Інформація_про_використання">Інформація про використання</h2>
+
+<p>У подію не включено оновлення статусу видимості документа, але цю інформацію можна отримати з властивості {{domxref ("Document.visibilityState", "visibilityState")}} документа.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У цьому прикладі починається відтворення музичного запису, коли документ стає видимим, і призупиняється відтворення музики, коли документ більше не видно.</p>
+
+<pre class="brush:js">document.addEventListener("visibilitychange", function() {
+  if (document.visibilityState === 'visible') {
+    backgroundMusic.play();
+  } else {
+    backgroundMusic.pause();
+  }
+});
+</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('Page Visibility API','#sec-visibilitychange-event','visibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність з браузерами</h2>
+
+<p>{{Compat("api.Document.visibilitychange")}}</p>
+
+<h2 id="Дивись_також">Дивись також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">API видимості сторінки</a></li>
+ <li>{{domxref("Document.visibilityState")}}</li>
+</ul>
diff --git a/files/uk/web/api/domstring/index.html b/files/uk/web/api/domstring/index.html
new file mode 100644
index 0000000000..54ba0dee57
--- /dev/null
+++ b/files/uk/web/api/domstring/index.html
@@ -0,0 +1,45 @@
+---
+title: DOMString
+slug: Web/API/DOMString
+translation_of: Web/API/DOMString
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>DOMString</code></strong>  є 16-бітовою послідовністю безнакових цілих, типово інтерпретуєтьсят як UTF-16 <a href="http://www.unicode.org/glossary/#code_unit">code units</a>. Це точно відповідає до JavaScript <a href="https://tc39.es/ecma262/#sec-ecmascript-language-types-string-type">примітивному типу String</a>. Коли <code>DOMString</code> застосовється у JavaScript, це напряму відображує відповідну {{jsxref("String")}}.</p>
+
+<p>When a Web API accepts a <code>DOMString</code>, the value provided will be stringified, using the <code><a href="https://tc39.es/ecma262/#sec-tostring">ToString</a></code> abstract operation. (For types other than Symbol, this has the same behavior as the {{jsxref("String/String", "String()")}} function.)</p>
+
+<p>Certain Web APIs accepting a <code>DOMString</code> have an additional legacy behavior, where passing {{jsxref("null")}} stringifies to the empty string instead of the usual <code>"null"</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('WebIDL', '#idl-DOMString', 'DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebIDL', '#es-DOMString')}}</td>
+   <td>{{Spec2('WebIDL')}}</td>
+   <td>This defines how JavaScript values are converted to <code>DOMString</code> and vice versa.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Також_дивися">Також дивися:</h2>
+
+<ul>
+ <li>JavaScript {{jsxref("String")}}</li>
+ <li>{{domxref("USVString")}}</li>
+ <li>{{domxref("CSSOMString")}}</li>
+ <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li>
+</ul>
diff --git a/files/uk/web/api/element/getclientrects/index.html b/files/uk/web/api/element/getclientrects/index.html
new file mode 100644
index 0000000000..5a88f0321c
--- /dev/null
+++ b/files/uk/web/api/element/getclientrects/index.html
@@ -0,0 +1,219 @@
+---
+title: Element.getClientRects()
+slug: Web/API/Element/getClientRects
+translation_of: Web/API/Element/getClientRects
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>getClientRects()</strong></code> метод {{domxref("Element")}} інтерфейсу повертає колекцію {{DOMxRef("DOMRect")}} об'єктів, які позначають границі прямокутників для кожної <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS border box</a> в клієнта.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><code>let <em>rectCollection</em> = <var>object</var>.getClientRects();</code></pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>Повернене значення є колекцією {{DOMxRef("DOMRect")}} об'єктів, один для кожної CSS border box асоційованої з елементом. Кожен {{DOMxRef("DOMRect")}} об'єкт містить лише для читання <code>left</code>, <code>top</code>, <code>right</code> <code>і bottom</code> властивості, які описують border box, в пікселях, з top-left відносно до top-left видимої області веб-сторінки. For tables with captions, the caption is included even though it's outside the border box of the table. When called on SVG elements other than an outer-<code>&lt;svg&gt;</code>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<code>&lt;svg&gt;</code> establishes (and to be clear, the rectangles are also transformed by the outer-<code>&lt;svg&gt;</code>'s <code>viewBox</code> transform, if any).</p>
+
+<p>Originally, Microsoft intended this method to return a <code>TextRectangle</code> object for each <em>line</em> of text. However, the CSSOM working draft specifies that it returns a {{DOMxRef("DOMRect")}} for each <em>border box</em>. For an inline element, the two definitions are the same. But for a block element, Mozilla will return only a single rectangle.</p>
+
+<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 adds <code>width</code> and <code>height</code> properties to the <code>TextRectangle</code> object.")}}</p>
+
+<p>The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.</p>
+
+<p>The returned rectangles do not include the bounds of any child elements that might happen to overflow.</p>
+
+<p>For HTML {{HtmlElement("area")}} elements, SVG elements that do not render anything themselves, <code>display:none</code> elements, and generally any elements that are not directly rendered, an empty list is returned.</p>
+
+<p>Rectangles are returned even for CSS boxes that have empty border-boxes. The <code>left</code>, <code>top</code>, <code>right</code>, and <code>bottom</code> coordinates can still be meaningful.</p>
+
+<p>Fractional pixel offsets are possible.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class <code>withClientRectsOverlay</code>.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>Example 1: This HTML creates three paragraphs with a <code>&lt;span&gt;</code> inside, each embedded in a <code>&lt;div&gt;</code> block. Client rects are painted for the paragraph in the second block, and for the <code>&lt;span&gt;</code> element in the third block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A paragraph with a span inside&lt;/h3&gt;
+&lt;p&gt;Both the span and the paragraph have a border set. The
+  client rects are in red. Note that the p has onlyone border
+  box, while the span has multiple border boxes.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;p&gt;
+    &lt;span&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;p's rect&lt;/strong&gt;
+  &lt;p class="withClientRectsOverlay"&gt;
+    &lt;span&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;span's rect&lt;/strong&gt;
+  &lt;p&gt;
+    &lt;span class="withClientRectsOverlay"&gt;Paragraph that spans multiple lines&lt;/span&gt;
+  &lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<p>Example 2: This HTML creates three ordered lists. Client rects are painted for the <code>&lt;ol&gt;</code> in the second block, and for each <code>&lt;li&gt;</code> element in the third block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A list&lt;/h3&gt;
+&lt;p&gt;Note that the border box doesn't include the number, so
+  neither do the client rects.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;ol&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;ol's rect&lt;/strong&gt;
+  &lt;ol class="withClientRectsOverlay"&gt;
+    &lt;li&gt;Item 1&lt;/li&gt;
+    &lt;li&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;each li's rect&lt;/strong&gt;
+  &lt;ol&gt;
+    &lt;li class="withClientRectsOverlay"&gt;Item 1&lt;/li&gt;
+    &lt;li class="withClientRectsOverlay"&gt;Item 2&lt;/li&gt;
+  &lt;/ol&gt;
+&lt;/div&gt;</pre>
+
+<p>Example 3: This HTML creates two tables with captions. Client rects are painted for the <code>&lt;table&gt;</code> in the second block.</p>
+
+<pre class="brush: html">&lt;h3&gt;A table with a caption&lt;/h3&gt;
+&lt;p&gt;Although the table's border box doesn't include the
+  caption, the client rects do include the caption.&lt;/p&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;Original&lt;/strong&gt;
+  &lt;table&gt;
+    &lt;caption&gt;caption&lt;/caption&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;&lt;th&gt;thead&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;&lt;td&gt;tbody&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+&lt;/div&gt;
+
+&lt;div&gt;
+  &lt;strong&gt;table's rect&lt;/strong&gt;
+  &lt;table class="withClientRectsOverlay"&gt;
+    &lt;caption&gt;caption&lt;/caption&gt;
+    &lt;thead&gt;
+      &lt;tr&gt;&lt;th&gt;thead&lt;/th&gt;&lt;/tr&gt;
+    &lt;/thead&gt;
+    &lt;tbody&gt;
+      &lt;tr&gt;&lt;td&gt;tbody&lt;/td&gt;&lt;/tr&gt;
+    &lt;/tbody&gt;
+  &lt;/table&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS draws borders around the paragraph and the <code>&lt;span&gt;</code> inside each <code>&lt;div&gt;</code> block for the first example, around the <code>&lt;ol&gt;</code> and <code>li</code> for the second example, and around <code>&lt;table&gt;</code>, <code>&lt;th&gt;</code>, and <code>&lt;td&gt;</code> elements for the third example.</p>
+
+<pre class="brush: css">strong {
+  text-align: center;
+}
+div {
+  display: inline-block;
+  width: 150px;
+}
+div p, ol, table {
+  border: 1px solid blue;
+}
+span, li, th, td {
+  border: 1px solid green;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>The JavaScript code draws the client rects for all HTML elements that have CSS class <code>withClientRectsOverlay</code> assigned.</p>
+
+<pre class="brush: js">function addClientRectsOverlay(elt) {
+  /* Absolutely position a div over each client rect so that its border width
+     is the same as the rectangle's width.
+     Note: the overlays will be out of place if the user resizes or zooms. */
+  var rects = elt.getClientRects();
+  for (var i = 0; i != rects.length; i++) {
+    var rect = rects[i];
+    var tableRectDiv = document.createElement('div');
+    tableRectDiv.style.position = 'absolute';
+    tableRectDiv.style.border = '1px solid red';
+    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
+    tableRectDiv.style.margin = tableRectDiv.style.padding = '0';
+    tableRectDiv.style.top = (rect.top + scrollTop) + 'px';
+    tableRectDiv.style.left = (rect.left + scrollLeft) + 'px';
+    // We want rect.width to be the border width, so content width is 2px less.
+    tableRectDiv.style.width = (rect.width - 2) + 'px';
+    tableRectDiv.style.height = (rect.height - 2) + 'px';
+    document.body.appendChild(tableRectDiv);
+  }
+}
+
+(function() {
+  /* Call function addClientRectsOverlay(elt) for all elements with
+     assigned class "withClientRectsOverlay" */
+  var elt = document.getElementsByClassName('withClientRectsOverlay');
+  for (var i = 0; i &lt; elt.length; i++) {
+    addClientRectsOverlay(elt[i]);
+  }
+})();</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('Examples', 680, 650)}}</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("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes">Notes</h3>
+
+<p><code>getClientRects()</code> was first introduced in the MS IE DHTML object model.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element.getClientRects")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
+ <li>{{DOMxRef("Element.getClientRects()")}}</li>
+</ul>
diff --git a/files/uk/web/api/element/index.html b/files/uk/web/api/element/index.html
new file mode 100644
index 0000000000..aa007c48e7
--- /dev/null
+++ b/files/uk/web/api/element/index.html
@@ -0,0 +1,490 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Element
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web API
+translation_of: Web/API/Element
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>Element</code></strong><code>це найбільш загальний базовий класс</code>з якого наслідуються всі об'єкти {{DOMxRef("Document")}} .  Тільки він має методи та властивості, загальні для всіх видів елементів. Більшість специфічних классів наслідуються з <code>Element</code>.</span> Наприклад, {{DOMxRef("HTMLElement")}} інтерфейс є базовим інтерфейсом для HTML елементів, тоді як {{DOMxRef("SVGElement")}} інтерфейс є базовим для усіх SVG елементів. Більшість функціональності визначається ще далі у ієрархії классу.</p>
+
+<p>Мови за межами сфери Web платформ, такі як XUL, через інтерфейс <code>XULElement</code> , також застосовують <code>Element</code>.</p>
+
+<p>{{InheritanceDiagram}}implement</p>
+
+<h2 id="Properties" name="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p>
+
+<dl>
+ <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("NamedNodeMap")}} object containing the assigned attributes of the corresponding HTML element.</dd>
+ <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMTokenList")}} containing the list of class attributes.</dd>
+ <dt>{{DOMxRef("Element.className")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the class of the element.</dd>
+ <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner height of the element.</dd>
+ <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the left border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the width of the top border of the element.</dd>
+ <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the inner width of the element.</dd>
+ <dt>{{DOMxRef("Element.computedName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the label exposed to accessibility.</dd>
+ <dt>{{DOMxRef("Element.computedRole")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("DOMString")}} containing the ARIA role that has been applied to a particular element. </dd>
+ <dt>{{DOMxRef("Element.id")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the id of the element.</dd>
+ <dt>{{DOMxRef("Element.innerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element's content.</dd>
+ <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the local part of the qualified name of the element.</dd>
+ <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
+ <dd>The namespace URI of the element, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <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> namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.nextElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is an {{DOMxRef("Element")}}, the element immediately following the given one in the tree, or <code>null</code> if there's no sibling node.</dd>
+ <dt>{{DOMxRef("Element.outerHTML")}}</dt>
+ <dd>Is a {{DOMxRef("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.</dd>
+ <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
+ <dd>A {{DOMxRef("DOMString")}} representing the namespace prefix of the element, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{DOMxRef("NonDocumentTypeChildNode.previousElementSibling")}} {{readOnlyInline}}</dt>
+ <dd>Is a {{DOMxRef("Element")}}, the element immediately preceding the given one in the tree, or <code>null</code> if there is no sibling element.</dd>
+ <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view height of an element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
+ <dd>Is a {{jsxref("Number")}} representing the left scroll offset of the element.</dd>
+ <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollTop")}}</dt>
+ <dd>A {{jsxref("Number")}} representing number of pixels the top of the document is scrolled vertically.</dd>
+ <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the maximum top scroll offset possible for the element.</dd>
+ <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("Number")}} representing the scroll view width of the element.</dd>
+ <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
+ <dd>Returns the open shadow root that is hosted by the element, or null if no open shadow root is present.</dd>
+ <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the shadow root that is hosted by the element, regardless if its open or closed. <strong>Available only to <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</strong></dd>
+ <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the name of the shadow DOM slot the element is inserted in.</dd>
+ <dt>{{DOMxRef("Element.tabStop")}} {{Non-standard_Inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating if the element can receive input focus via the tab key.</dd>
+ <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{jsxref("String")}} with the name of the tag for the given element.</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>Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> DOM Level 3 defined <code>namespaceURI</code>, <code>localName</code> and <code>prefix</code> on the {{DOMxRef("Node")}} interface. In DOM4 they were moved to <code>Element</code>.</p>
+
+<p>This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.</p>
+</div>
+
+<h3 id="Properties_included_from_Slotable">Properties included from Slotable</h3>
+
+<p><em>The <code>Element</code> interface includes the following property, defined on the {{DOMxRef("Slotable")}} mixin.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("Slotable.assignedSlot")}}{{readonlyInline}}</dt>
+ <dd>Returns a {{DOMxRef("HTMLSlotElement")}} representing the {{htmlelement("slot")}} the node is inserted in.</dd>
+</dl>
+
+<h3 id="Handlers" name="Handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("Element.onfullscreenchange")}}</dt>
+ <dd>An event handler for the {{event("fullscreenchange")}} event, which is sent when the element enters or exits full-screen mode. This can be used to watch both for successful expected transitions, but also to watch for unexpected changes, such as when your app is running in the background.</dd>
+ <dt>{{domxref("Element.onfullscreenerror")}}</dt>
+ <dd>An event handler for the {{event("fullscreenerror")}} event, which is sent when an error occurs while attempting to change into full-screen mode.</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parents {{DOMxRef("Node")}}, and its own parent, {{DOMxRef("EventTarget")}}<em>, and implements those of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}<em>, {{DOMxRef("NonDocumentTypeChildNode")}}, </em></em>and {{DOMxRef("Animatable")}}.</em></p>
+
+<dl>
+ <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
+ <dd>Registers an event handler to a specific event type on the element.</dd>
+ <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
+ <dd>Attaches a shadow DOM tree to the specified element and returns a reference to its {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
+ <dd>A shortcut method to create and run an animation on an element. Returns the created Animation object instance.</dd>
+ <dt>{{DOMxRef("Element.closest()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns the {{DOMxRef("Element")}} which is the closest ancestor of the current element (or the current element itself) which matches the selectors given in parameter.</dd>
+ <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
+ <dd>Creates a <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a> on on the element, turning it into a shadow host. Returns a {{DOMxRef("ShadowRoot")}}.</dd>
+ <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("StylePropertyMapReadOnly")}} interface which provides a read-only representation of a CSS declaration block that is an alternative to {{DOMxRef("CSSStyleDeclaration")}}.</dd>
+ <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
+ <dd>Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates whether no handler canceled the event.</dd>
+ <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns an array of Animation objects currently active on the element.</dd>
+ <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
+ <dd>Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
+ <dd>Returns an array of attribute names from the current element.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
+ <dd>Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the named attribute from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{DOMxRef("Attr")}}.</dd>
+ <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
+ <dd>Returns the size of an element and its position relative to the viewport.</dd>
+ <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
+ <dd>Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.</dd>
+ <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} that contains all descendants of the current element that possess the list of classes given in the parameter.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name, from the current element.</dd>
+ <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
+ <dd>Returns a live {{DOMxRef("HTMLCollection")}} containing all descendant elements, of a particular tag name and namespace, from the current element.</dd>
+ <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.</dd>
+ <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has one or more HTML attributes present.</dd>
+ <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
+ <dd>Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
+ <dd>Inserts a given element node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
+ <dd>Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.</dd>
+ <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
+ <dd>Inserts a given text node at a given position relative to the element it is invoked upon.</dd>
+ <dt>{{DOMxRef("Element.matches()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.</dd>
+ <dt>{{DOMxRef("Element.pseudo()")}} {{Experimental_Inline}}</dt>
+ <dd>Returns a {{DOMxRef("CSSPseudoElement")}} representing the child pseudo-element matched by the specified pseudo-element selector.</dd>
+ <dt>{{DOMxRef("Element.querySelector()")}}</dt>
+ <dd>Returns the first {{DOMxRef("Node")}} which matches the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
+ <dd>Returns a {{DOMxRef("NodeList")}} of nodes which match the specified selector string relative to the element.</dd>
+ <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
+ <dd>Releases (stops) pointer capture that was previously set for a specific {{DOMxRef("PointerEvent","pointer event")}}.</dd>
+ <dt>{{DOMxRef("ChildNode.remove()")}} {{Experimental_Inline}}</dt>
+ <dd>Removes the element from the children list of its parent.</dd>
+ <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
+ <dd>Removes the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
+ <dd>Removes the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.removeAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Removes the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
+ <dd>Removes an event listener from the element.</dd>
+ <dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
+ <dd>Asynchronously asks the browser to make the element full-screen.</dd>
+ <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
+ <dd>Allows to asynchronously ask for the pointer to be locked on the given element.</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("Element.scroll()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{domxref("Element.scrollBy()")}}</dt>
+ <dd>Scrolls an element by the given amount.</dd>
+ <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
+ <dd>Scrolls the page until the element gets into the view.</dd>
+ <dt>{{domxref("Element.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates inside a given element.</dd>
+ <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
+ <dd>Sets the value of a named attribute of the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
+ <dd>Sets the value of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNode()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the named attribute from the current node.</dd>
+ <dt>{{DOMxRef("Element.setAttributeNodeNS()")}} {{Obsolete_Inline}}</dt>
+ <dd>Sets the node representation of the attribute with the specified name and namespace, from the current node.</dd>
+ <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}</dt>
+ <dd>Sets up mouse event capture, redirecting all mouse events to this element.</dd>
+ <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
+ <dd>Designates a specific element as the capture target of future <a href="/en-US/docs/Web/API/Pointer_events">pointer events</a>.</dd>
+ <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
+ <dd>Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt>{{domxref("Element/cancel_event", "cancel")}}</dt>
+ <dd>Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. For example, the browser might fire this event when the user presses the <kbd>Esc</kbd> key or clicks a "Close dialog" button which is part of the browser's UI.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/Element/error_event">error</a></code></dt>
+ <dd>Fired when when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onerror", "onerror")}} property.</dd>
+ <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
+ <dd>Fired when the document view or an element has been scrolled.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} property.</dd>
+ <dt>{{domxref("Element/select_event", "select")}}</dt>
+ <dd>Fired when some text has been selected.<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} property.</dd>
+ <dt>{{domxref("Element/show_event", "show")}}</dt>
+ <dd>Fired when a <a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> event was fired on/bubbled to an element that has a <a href="https://developer.mozilla.org/en-US/DOM/element.contextmenu" title="/en-US/docs/Mozilla_event_reference/contextmenu">contextmenu</a> attribute. {{deprecated_inline}}<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} property.</dd>
+ <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
+ <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br>
+ Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} property.</dd>
+</dl>
+
+<h3 id="Clipboard_events">Clipboard events</h3>
+
+<dl>
+ <dt>{{domxref("Element/copy_event", "copy")}}</dt>
+ <dd>Fired when the user initiates a copy action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} property.</dd>
+ <dt>{{domxref("Element/cut_event", "cut")}}</dt>
+ <dd>Fired when the user initiates a cut action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/oncut", "oncut")}} property.</dd>
+ <dt>{{domxref("Element/paste_event", "paste")}}</dt>
+ <dd>Fired when the user initiates a paste action through the browser's user interface.<br>
+ Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} property.</dd>
+</dl>
+
+<h3 id="Composition_events">Composition events</h3>
+
+<dl>
+ <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} completes or cancels the current composition session.</dd>
+ <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
+ <dd>Fired when a text composition system such as an {{glossary("input method editor")}} starts a new composition session.</dd>
+ <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
+ <dd>Fired when a new character is received in the context of a text composition session controlled by a text composition system such as an {{glossary("input method editor")}}.</dd>
+</dl>
+
+<h3 id="Focus_events">Focus events</h3>
+
+<dl>
+ <dt>{{domxref("Element/blur_event", "blur")}}</dt>
+ <dd>Fired when an element has lost focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onblur", "onblur")}} property.</dd>
+ <dt>{{domxref("Element/focus_event", "focus")}}</dt>
+ <dd>Fired when an element has gained focus.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} property</dd>
+ <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
+ <dd>Fired when an element is about to gain focus.</dd>
+ <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
+ <dd>Fired when an element is about to lose focus.</dd>
+</dl>
+
+<h3 id="Fullscreen_events">Fullscreen events</h3>
+
+<dl>
+ <dt><code>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</code></dt>
+ <dd>Sent to an {{domxref("Element")}} when it transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
+ Also available via the {{domxref("Element.onfullscreenchange", "onfullscreenchange")}}  property.</dd>
+ <dt><code>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</code></dt>
+ <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br>
+ Also available via the {{domxref("Element.onfullscreenerror", "onfullscreenerror")}} property.</dd>
+</dl>
+
+<h3 id="Keyboard_events">Keyboard events</h3>
+
+<dl>
+ <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
+ <dd>Fired when a key is pressed.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} property.</dd>
+ <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
+ <dd>Fired when a key that produces a character value is pressed down. {{deprecated_inline}}<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} property.</dd>
+ <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
+ <dd>Fired when a key is released.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} property.</dd>
+</dl>
+
+<h3 id="Mouse_events">Mouse events</h3>
+
+<dl>
+ <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
+ <dd>Fired when a non-primary pointing device button (e.g., any mouse button other than the left button) has been pressed and released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} property.</dd>
+ <dt>{{domxref("Element/click_event", "click")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is pressed and released on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onclick", "onclick")}} property.</dd>
+ <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
+ <dd>Fired when the user attempts to open a context menu.<br>
+ Also available via the {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} property.</dd>
+ <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
+ <dd>Fired when a pointing device button (e.g., a mouse's primary button) is clicked twice on a single element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} property.</dd>
+ <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
+ <dd>Occurs when an element is activated, for instance, through a mouse click or a keypress.</dd>
+ <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
+ <dd>Fired when a pointing device button is pressed on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} property.</dd>
+ <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} property.</dd>
+ <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
+ <dd>Fired when the pointer of a pointing device (usually a mouse) is moved out of an element that has the listener attached to it.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} property.</dd>
+ <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved while over an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} property.</dd>
+ <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
+ <dd>Fired when a pointing device (usually a mouse) is moved off the element to which the listener is attached or off one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} property.</dd>
+ <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
+ <dd>Fired when a pointing device is moved onto the element to which the listener is attached or onto one of its children.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} property.</dd>
+ <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
+ <dd>Fired when a pointing device button is released on an element.<br>
+ Also available via the {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} property.</dd>
+ <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
+ <dd>Fired each time the amount of pressure changes on the trackpadtouchscreen.</dd>
+ <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
+ <dd>Fired after the mousedown event as soon as sufficient pressure has been applied to qualify as a "force click".</dd>
+ <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
+ <dd>Fired before the {{domxref("Element/mousedown_event", "mousedown")}} event.</dd>
+ <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
+ <dd>Fired after the {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} event as soon as the pressure has been reduced sufficiently to end the "force click".</dd>
+</dl>
+
+<h3 id="Touch_events">Touch events</h3>
+
+<dl>
+ <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
+ <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} property.</dd>
+ <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
+ <dd>Fired when one or more touch points are removed from the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd>
+ <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
+ <dd>Fired when one or more touch points are moved along the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd>
+ <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
+ <dd>Fired when one or more touch points are placed on the touch surface.<br>
+ Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd>
+</dl>
+
+<dl>
+ <dt></dt>
+</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("CSS4 Pseudo-Elements", '#window-interface', 'Element')}}</td>
+   <td>{{Spec2("CSS4 Pseudo-Elements")}}</td>
+   <td>Added the <code>pseudo()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("Web Animations", '', '')}}</td>
+   <td>{{Spec2("Web Animations")}}</td>
+   <td>Added the <code>getAnimations()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Undo Manager', '', 'Element')}}</td>
+   <td>{{Spec2('Undo Manager')}}</td>
+   <td>Added the <code>undoScope</code> and <code>undoManager</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events 2', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events 2')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Events')}}</td>
+   <td>Added the following event handlers: <code>ongotpointercapture</code> and <code>onlostpointercapture</code>.<br>
+    Added the following methods: <code>setPointerCapture()</code> and <code>releasePointerCapture()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}</td>
+   <td>{{Spec2('Selectors API Level 1')}}</td>
+   <td>Added the following methods: <code>querySelector()</code> and <code>querySelectorAll()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}</td>
+   <td>{{Spec2('Pointer Lock')}}</td>
+   <td>Added the <code>requestPointerLock()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Fullscreen', '#api', 'Element')}}</td>
+   <td>{{Spec2('Fullscreen')}}</td>
+   <td>Added the <code>requestFullscreen()</code> method.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('DOM Parsing')}}</td>
+   <td>Added the following properties: <code>innerHTML</code>, and <code>outerHTML</code>.<br>
+    Added the following method: <code>insertAdjacentHTML()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the following properties: <code>scrollTop</code>, <code>scrollLeft</code>, <code>scrollWidth</code>, <code>scrollHeight</code>, <code>clientTop</code>, <code>clientLeft</code>, <code>clientWidth</code>, and <code>clientHeight</code>.<br>
+    Added the following methods: <code>getClientRects()</code>, <code>getBoundingClientRect()</code>, <code>scroll()</code>, <code>scrollBy()</code>, <code>scrollTo()</code> and <code>scrollIntoView()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}</td>
+   <td>{{Spec2('Element Traversal')}}</td>
+   <td>Added inheritance of the {{DOMxRef("ElementTraversal")}} interface.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Added the following methods: <code>closest()</code>, <code>insertAdjacentElement()</code> and <code>insertAdjacentText()</code>.<br>
+    Moved <code>hasAttributes()</code> from the <code>Node</code> interface to this one.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#interface-element", "Element")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td>Removed the following methods: <code>setIdAttribute()</code>, <code>setIdAttributeNS()</code>, and <code>setIdAttributeNode()</code>.<br>
+    Modified the return value of <code>getElementsByTagName()</code> and <code>getElementsByTagNameNS()</code>.<br>
+    Removed the <code>schemaTypeInfo</code> property.</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>The <code>normalize()</code> method has been moved to {{DOMxRef("Node")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Element")}}</p>
diff --git a/files/uk/web/api/globaleventhandlers/index.html b/files/uk/web/api/globaleventhandlers/index.html
new file mode 100644
index 0000000000..982d3d2ca3
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/index.html
@@ -0,0 +1,273 @@
+---
+title: GlobalEventHandlers
+slug: Web/API/GlobalEventHandlers
+tags:
+  - API
+  - GlobalEventHandlers
+  - HTML DOM
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - events
+translation_of: Web/API/GlobalEventHandlers
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <strong><code>GlobalEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("HTMLElement")}}, {{domxref("Document")}}, or {{domxref("Window")}}.</span> Each of these interfaces can, of course, add more event handlers in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>GlobalEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>GlobalEventHandlers</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p><em>This interface doesn't include any properties except for the event handlers listed below.</em></p>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin, and implemented by {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, as well as by {{domxref("WorkerGlobalScope")}} for Web Workers.</p>
+
+<div id="Properties">
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{domxref("HTMLMediaElement/abort_event", "abort")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationcancel")}} event is sent, indicating that a running <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has been canceled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has stopped playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationiteration")}} event has been sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has begun playing a new iteration of the animation sequence.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("animationstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS animation</a> has started playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when an {{event("auxclick")}} event is sent, indicating that a non-primary button has been pressed on an input device (e.g. a middle mouse button).</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.onformdata")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} for processing {{event("formdata")}} events, fired after the entry list representing the form's data is constructed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("gotpointercapture")}} event type 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.onloadend")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadend")}} event is raised (when progress has stopped on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)</dd>
+ <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("lostpointercapture")}} event type 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")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised. Deprecated. Use <code>onwheel</code> instead.</dd>
+ <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("wheel")}} 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("pointerenter")}} 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.onresize")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} 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.onselectstart")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the user starts to make a new text selection on a web page.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised, i.e. when the text selected on a web page changes.</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.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitioncancel")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has been cancelled.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionend")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has finished playing.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionrun")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionrun")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> is running, though not nessarilty started.</dd>
+ <dt>{{domxref("GlobalEventHandlers.ontransitionstart")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called when a {{event("transitionstart")}} event is sent, indicating that a <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> has started transitioning.</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>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface defines no methods.</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("Selection API",'', 'Extension to GlobalEventHandlers')}}</td>
+   <td>{{Spec2('Selection API')}}</td>
+   <td>Adds <code>onselectionchange.</code></td>
+  </tr>
+  <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("HTML5 W3C")}} 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="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Element")}}</li>
+ <li>{{domxref("EventHandler")}}</li>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onkeydown/index.html b/files/uk/web/api/globaleventhandlers/onkeydown/index.html
new file mode 100644
index 0000000000..535fd8b0a0
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onkeydown/index.html
@@ -0,0 +1,93 @@
+---
+title: GlobalEventHandlers.onkeydown
+slug: Web/API/GlobalEventHandlers/onkeydown
+tags:
+  - HTML DOM
+  - Обробник подій
+  - клавіатура
+  - події клавіатури
+translation_of: Web/API/GlobalEventHandlers/onkeydown
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Властивість <code><strong>onkeydown</strong></code> спільно з <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/GlobalEventHandlers"><code>GlobalEventHandlers</code></a> є <a href="https://wiki.developer.mozilla.org/uk/docs/Web/API/EventHandler" rel="nofollow"><code>EventHandler</code></a> обробляє події {{event("keydown")}}.</p>
+
+<p>Подія <code>keydown</code> спрацьовує, коли користувач натискає клавішу клавіатури.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.onkeydown = <em>functionRef</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>functionRef</code> це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У цьому прикладі виводитимуться значення {{domxref("KeyboardEvent.code")}} щоразу, коли ви натискаете клавішу всередині елемента  {{HtmlElement("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">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("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</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-onkeydown','onkeydown')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами </h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onkeydown")}}</p>
+
+<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3>
+
+<p>Так якб Firefox 65 події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=354358" rel="noopener">bug 354358</a>, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/" rel="noopener">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p>
+
+<pre class="brush: js"><code>eventTarget.addEventListener("keydown", event =&gt; {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь    });</code>
+</pre>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>Подія {{Event("keydown")}} </li>
+ <li>Пов'язані обробники подій
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onkeyup/index.html b/files/uk/web/api/globaleventhandlers/onkeyup/index.html
new file mode 100644
index 0000000000..d429593327
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onkeyup/index.html
@@ -0,0 +1,95 @@
+---
+title: GlobalEventHandlers.onkeyup
+slug: Web/API/GlobalEventHandlers/onkeyup
+tags:
+  - HTML DOM
+  - Обробник подій
+  - клавіатура
+  - події клавіатури
+translation_of: Web/API/GlobalEventHandlers/onkeyup
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<div></div>
+
+<p>Властивість <code><strong>onkeyup</strong></code> спільно з {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} обробляє події  {{event("keyup")}} .</p>
+
+<p>Подія <code>keyup</code> спрацьовує, коли користувач відпускає раніше натиснуту клавішу клавіатури.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>target</em>.onkeyup = <em>functionRef</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>functionRef </code>це ім'я функції або вираз функції. В якості єдиного аргументу функція отримує об'єкт {{domxref("KeyboardEvent")}}.</p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У цьому прикладі виводитимуться значення {{domxref ("KeyboardEvent.code")}} щоразу, коли ви відпускаєте клавішу всередині елемента {{HtmlElement ("input")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;input&gt;
+&lt;p id="log"&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeyup = logKey; //
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`; //Видає у тегу &lt;p&gt; ключ натиснутої клавіші
+}</pre>
+
+<h3 id="Підсумок">Підсумок</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</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-onkeyup','onkeyup')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+
+
+<p>{{Compat("api.GlobalEventHandlers.onkeyup")}}</p>
+
+<h3 id="Нотатки_щодо_сумісності">Нотатки щодо сумісності</h3>
+
+<p>Так як Firefox 65, події клавіатури і ключа тепер запускаються під час складання IME, для поліпшення крос-браузерної сумісності для користувачів CJKT ({{bug (354358)}}, також більш детальну інформацію дивіться <a href="https://www.fxsitecompat.com/en-CA/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">keydown and keyup події наразі запускаються під час складання IME</a>. Щоб проігнорувати всі події <code>keyup</code> , зробіть щось на зразок цього (229 це спеціальний набір значень для <code>keyCode</code> що відноситься до читу, який був використаний IME):</p>
+
+<pre class="brush: js"><code>eventTarget.addEventListener("keyup", event =&gt; {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // зробити що-небудь
+});</code></pre>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Подія {{Event("keyup")}} </li>
+ <li>Пов'язані обробники подій
+  <ul>
+   <li>{{domxref("GlobalEventHandlers.onkeydown")}}</li>
+   <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/globaleventhandlers/onmouseover/index.html b/files/uk/web/api/globaleventhandlers/onmouseover/index.html
new file mode 100644
index 0000000000..b3d98e075e
--- /dev/null
+++ b/files/uk/web/api/globaleventhandlers/onmouseover/index.html
@@ -0,0 +1,71 @@
+---
+title: Обробник_глобальних_подій.onmouseover
+slug: Web/API/GlobalEventHandlers/onmouseover
+tags:
+  - Event Handler
+  - onmouseover
+  - Обробник глобальних подій
+  - Подія мищі
+translation_of: Web/API/GlobalEventHandlers/onmouseover
+---
+<div>{{ApiRef("HTML DOM")}}</div>
+
+<p>Властивістю <code><strong>onmouseover</strong></code> мікшіна {{domxref("GlobalEventHandlers")}} є {{domxref("EventHandler")}} , який обробляє події наведення миші {{event("mouseover")}}.</p>
+
+<p>Подія <code>mouseover</code> запускається, коли користувач переміщує курсор на певний елемент. </p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>element</em>.onmouseover = <em>function</em>;
+</pre>
+
+<h2 class="editable" id="Приклад"><span>Приклад</span></h2>
+
+<p><span><span>Цей приклад додає <code>onmouseover</code> та <code>onmouseout</code> подіі до параграфу. Спробуйте перемістити мишу до елементу.</span></span></p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Test your mouse on me!&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const p = document.querySelector('p');
+p.onmouseover = logMouseOver;
+p.onmouseout = logMouseOut;
+
+function logMouseOver() {
+  p.innerHTML = 'Виявлено MOUSE OVER';
+}
+
+function logMouseOut() {
+  p.innerHTML = 'Виявлено MOUSE OUT';
+}</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Специфікації">Специфікації</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-onmouseover','onmouseover')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2>
+
+<div>
+
+
+<p>{{Compat("api.GlobalEventHandlers.onmouseover")}}</p>
+</div>
diff --git a/files/uk/web/api/headers/index.html b/files/uk/web/api/headers/index.html
new file mode 100644
index 0000000000..529712ef22
--- /dev/null
+++ b/files/uk/web/api/headers/index.html
@@ -0,0 +1,133 @@
+---
+title: Заголовки
+slug: Web/API/Headers
+tags:
+  - API
+  - Fetch
+  - Fetch API
+  - Headers
+  - Інтерфейс
+  - Заголовки
+translation_of: Web/API/Headers
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p>Інтерфейс <strong><code>Headers</code></strong>  <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> дозволяє вам виконувати різні дії з  HTTP запитами і заголовками відповідей. Ці дії включають отримання налаштування, додавання і видалення . Об'єкт <code>Headers</code> має асоціативний список заголовків, який по замовчуванню пустий і містить ноль чи більше пар імен і значень. Ви можете додавати то цього списку, використовуючи метод типу<span style="line-height: 19.0909080505371px;"> {{domxref("Headers.append","append()")}}. У всіх методах цього інтерфейсу імена заголовків знаходяться по  не чутливим до реєсту запитам </span>. </p>
+
+<p>З метою безпеки деякі заголовки можуть контролюватись тільки за допомогою user agent. Ці заголовки включають: {{Glossary("Forbidden_header_name", "forbidden header names", 1)}}  і {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
+
+<p>Об'єкт заголовку також має associated guard, що приймає значення: <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code> чи <code>none</code>. Це впливає на те чи меоди: {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, і {{domxref("Headers.append","append()")}} змінюватимуть заголовок. Для більшої інформації дивіться {{Glossary("Guard")}}.</p>
+
+<p>Ви можете отримати об'єкт <code>Headers</code>  через властивості {{domxref("Request.headers")}} і{{domxref("Response.headers")}}, і створити новий об'єкт  <code>Headers</code>, використовуючи конструктор {{domxref("Headers.Headers()")}}.</p>
+
+<p>Об'єкт, що імплементує <code>Headers</code> може напряму використовуватись в структурі {{jsxref("Statements/for...of", "for...of")}} замість{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code>тотожний <code>for (var p of myHeaders.entries())</code>.</p>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Ви можете знайти більше про доступні заголовки прочитавши довідку по <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
+</div>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("Headers.Headers()")}}</dt>
+ <dd>Створює новий об'єкт заголовку <code>Headers</code>.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<dl>
+ <dt>{{domxref("Headers.append()")}}</dt>
+ <dd>Додає нове значення до існуючого заголовка в об'єкті <code>Headers</code>, або додає заголовок якщо той не існує.</dd>
+ <dt>{{domxref("Headers.delete()")}}</dt>
+ <dd>Видаляє заголовок з об'єкта <code>Headers</code>.</dd>
+ <dt>{{domxref("Headers.entries()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols","iterator")}}, дозволяючи проводити через всі пари ключ/значення, що знаходяться в об'єкті.</dd>
+ <dt>{{domxref("Headers.forEach()")}}</dt>
+ <dd>Виконує вказану функцію для кожного елементу масива.</dd>
+ <dt>{{domxref("Headers.get()")}}</dt>
+ <dd>Повертає {{domxref("ByteString")}} послідовність всіх значеннях заголовків об'єкта <code>Headers</code> з заданим іменем.</dd>
+ <dt>{{domxref("Headers.has()")}}</dt>
+ <dd>Повертає логічне значення чи має обєкт <code>Headers</code> певний заголовок</dd>
+ <dt>{{domxref("Headers.keys()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам пройтись по всім ключам пар ключ/значення, що містяться в об'єкті.</dd>
+ <dt>{{domxref("Headers.set()")}}</dt>
+ <dd>Задає нове значення існуючого заголовку всередині об'єкта <code>Headers</code>, або додає заголовок, якщо той не існує.</dd>
+ <dt>{{domxref("Headers.values()")}}</dt>
+ <dd>Повертає {{jsxref("Iteration_protocols", "iterator")}}, що дозволяє вам проходитись по всім значенням пар ключ/значення, які містяться в цьому об'єкті.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Нотатка</strong>:  Різниця між {{domxref("Headers.set()")}} і {{domxref("Headers.append()")}} в тому, що якщо вказаний заголовок уже існує і допускає багато значень, {{domxref("Headers.set()")}} перезаписуватиме існуючі значення новим., тоді як {{domxref("Headers.append()")}} буде додавати нове значення в кінець набору значень. Дивіться їх сторінки для прикладу кода.</p>
+</div>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Всі методи Headers видаватимуть помилку <code>TypeError</code> якщо ви спробуєте передати не <a href="https://fetch.spec.whatwg.org/#concept-header-name">Валідне ім'я заголовку</a>. Операції зміни заголовку видаватимуть <code>TypeError,</code> якщо заголовок  незмінний {{Glossary("Guard")}}. У разі інших невдач, вийняток не виникатиме.</p>
+</div>
+
+<div class="note">
+<p><strong>Нотатка</strong>: Коли значення Header повторюються вони автоматично сортуються в лексикографічному порядку і значення дубльованих заголовків комбінуються.</p>
+</div>
+
+<h3 id="Застарілі_методи">Застарілі методи</h3>
+
+<dl>
+ <dt>{{domxref("Headers.getAll()")}}</dt>
+ <dd>Використовується для повернення масиву всіх значень заголовка з заданим іменем в об'єкті <code>Headers</code> ; цей метод - видалений із специфікації і натомість тепер {{domxref("Headers.get()")}} повертає всі значення замість одного.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>В наступномуIn the following фрагменті ми створили новий заголовок, використавши конструктор <code>Headers()</code> constructor, додали новий заголовок за допомогою <code>append()</code>, потім повернули значення цього заголовку, використовуючи <code>get()</code>:</p>
+
+<pre class="brush: js">var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+</pre>
+
+<p>Те ж можна досягнути передаванням масиву масивів чи літералу об'єкта до конструктора:</p>
+
+<pre class="brush: js">var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+</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','#headers-class','Headers')}}</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.Headers")}}</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 контроль доступу (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/uk/web/api/history_api/index.html b/files/uk/web/api/history_api/index.html
new file mode 100644
index 0000000000..47dc8cad03
--- /dev/null
+++ b/files/uk/web/api/history_api/index.html
@@ -0,0 +1,122 @@
+---
+title: History API
+slug: Web/API/History_API
+translation_of: Web/API/History_API
+---
+<div>{{DefaultAPISidebar("History API")}}</div>
+
+<p>Об'єкт DOM {{DOMxRef("Window")}} надає доступ до сеансу історії браузера через об'єкт {{DOMxRef("Window.history","history")}}. Він має корисні методи та властивості, які дозволяють відкривати попередні і наступні сторінки з історії користувача та впливати на вміст стеку історії.</p>
+
+<h2 id="Концепція_та_використання">Концепція та використання</h2>
+
+<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація </span></span></span> по історії користувача здійснюється за допомогою методів {{DOMxRef("History.back","back()")}}, {{DOMxRef("History.forward","forward()")}} та {{DOMxRef("History.go","go()")}}.</p>
+
+<h3 id="Навігація_вперед_і_назад"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Навігація вперед і назад</span></span></span></h3>
+
+<p>Щоб відкрити попередню сторінку:</p>
+
+<pre class="brush: js notranslate">window.history.back()
+</pre>
+
+<p>Цей метод діє так само, ніби реальний користувач натиснув кнопку <kbd><strong>Назад</strong></kbd> на панелі інструментів свого браузера.</p>
+
+<p>Подібним чином можна відкрити наступну сторінку (кнопка <kbd><strong>Вперед</strong></kbd> на панелі інструментів):</p>
+
+<pre class="brush: js notranslate">window.history.forward()
+</pre>
+
+<h3 id="Перехід_до_певної_точки_в_історії"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід до певної точки в історії</span></span></span></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><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Перехід на сторінку вперед, подібно до виклику </span></span></span>{{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="brush: js notranslate">// Наступний код
+// оновить поточну сторінку
+window.history.go(0)
+window.history.go()
+</pre>
+
+<p>Кількість сторінок у стеку історії визначається значенням властивості <code>length</code>:</p>
+
+<pre class="brush: js notranslate">let 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="brush:js line-numbers language-js notranslate">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() // виведе в консоль "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back() // виведе в консоль "location: http://example.com/example.html, state: null"
+history.go(2)  // виведе в консоль "location: http://example.com/example.html?page=3, state: {"page":3}"</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", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>No change from {{SpecName("HTML5 W3C")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "browsers.html#history", "History")}}</td>
+   <td>{{Spec2("HTML5 W3C")}}</td>
+   <td>Initial definition.</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="/en-US/docs/Web/API/History_API/Working_with_the_History_API">Working with the History API</a></li>
+</ul>
diff --git a/files/uk/web/api/html_dom_api/index.html b/files/uk/web/api/html_dom_api/index.html
new file mode 100644
index 0000000000..4f94294e96
--- /dev/null
+++ b/files/uk/web/api/html_dom_api/index.html
@@ -0,0 +1,472 @@
+---
+title: The HTML DOM API
+slug: Web/API/HTML_DOM_API
+tags:
+  - API
+  - Beginner
+  - DOM
+  - Documents
+  - Elements
+  - HTML DOM
+  - HTML DOM API
+  - NeedsTranslation
+  - Nodes
+  - Overview
+  - TopicStub
+  - Web
+  - Windows
+  - hierarchy
+translation_of: Web/API/HTML_DOM_API
+---
+<p>{{DefaultAPISidebar("HTML DOM")}}</p>
+
+<p>The <strong>HTML DOM API</strong> is made up of the interfaces that define the functionality of each of the {{Glossary("element", "elements")}} in {{Glossary("HTML")}}, as well as any supporting types and interfaces they rely upon.</p>
+
+<p>The functional areas included in the HTML DOM API include:</p>
+
+<ul>
+	<li>Access to and control of HTML elements via the {{Glossary("DOM")}}.</li>
+	<li>Access to and manipulation of form data.</li>
+	<li>Interacting with the contents of 2D images and the context of an HTML {{HTMLElement("canvas")}}, for example to draw on top of them.</li>
+	<li>Management of media connected to the HTML media elements ({{HTMLElement("audio")}} and {{HTMLElement("video")}}).</li>
+	<li>Dragging and dropping of content on webpages.</li>
+	<li>Access to the browser navigation history</li>
+	<li>Supporting and connective interfaces for other APIs such as <a href="/en-US/docs/Web/Web_Components">Web Components</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>, and <a href="/en-US/docs/Web/API/Server-sent_events">Server-sent events</a>.</li>
+</ul>
+
+<h2 id="HTML_DOM_concepts_and_usage">HTML DOM concepts and usage</h2>
+
+<p>In this article, we'll focus on the parts of the HTML DOM that involve engaging with HTML elements. Discussion of other areas, such as <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">Drag and Drop</a>, <a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a>, <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a>, etc. can be found in the documentation for those APIs.</p>
+
+<h3 id="Structure_of_an_HTML_document">Structure of an HTML document</h3>
+
+<p>The Document Object Model ({{Glossary("DOM")}}) is an architecture that describes the structure of a {{domxref("document")}}; each document is represented by an instance of the interface {{domxref("Document")}}. A document, in turn, consists of a hierarchical tree of <strong>nodes</strong>, in which a node is a fundamental record representing a single object within the document (such as an element or text node).</p>
+
+<p>Nodes may be strictly organizational, providing a means for grouping other nodes together or for providing a point at which a hierarchy can be constructed; other nodes may represent visible components of a document. Each node is based on the {{domxref("Node")}} interface, which provides properties for getting information about the node as well as methods for creating, deleting, and organizing nodes within the DOM.</p>
+
+<p>Nodes don't have any concept of including the content that is actually displayed in the document. They're empty vessels. The fundamental notion of a node that can represent visual content is introduced by the {{domxref("Element")}} interface. An <code>Element</code> object instance represents a single element in a document created using either HTML or an {{glossary("XML")}} vocabulary such as {{glossary("SVG")}}.</p>
+
+<p>For example, consider a document with two elements, one of which has two more elements nested inside it:</p>
+
+<p><img alt="Structure of a document with elements inside a document in a window" src="https://mdn.mozillademos.org/files/16587/dom-structure.svg" style="display: block; height: 379px; margin: 0 auto; width: 291px;"></p>
+
+<p>While the {{domxref("Document")}} interface is defined as part of the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> specification, the HTML specification significantly enhances it to add information specific to using the DOM in the context of a web browser, as well as to using it to represent HTML documents specifically.</p>
+
+<p>Among the things added to <code>Document</code> by the HTML standard are:</p>
+
+<ul>
+	<li>Support for accessing various information provided by the {{Glossary("HTTP")}} headers when loading the page, such as the <a href="/en-US/docs/Web/API/Document/location">location</a> from which the document was loaded, <a href="/en-US/docs/Web/API/Document/cookie">cookies</a>, <a href="/en-US/docs/Web/API/Document/lastModified">modification date</a>, <a href="/en-US/docs/Web/API/Document/referrer">referring site</a>, and so forth.</li>
+	<li>Access to lists of elements in the document's {{HTMLElement("head")}} block and <a href="/en-US/docs/Web/API/Document/body">body</a>, as well as lists of the <a href="/en-US/docs/Web/API/Document/images">images</a>, <a href="/en-US/docs/Web/API/Document/links">links</a>, <a href="/en-US/docs/Web/API/Document/scripts">scripts</a>, etc. contained in the document.</li>
+	<li>Support for interacting with the user by examining <a href="/en-US/docs/Web/API/Document/hasFocus">focus</a> and by executing commands on <a href="/en-US/docs/Web/HTML/Global_attributes/contenteditable">editable content</a>.</li>
+	<li>Event handlers for document <a href="/en-US/docs/Web/API/GlobalEventHandlers">events defined by the HTML standard</a> to allow access to <a href="/en-US/docs/Web/API/MouseEvent">mouse</a> and <a href="/en-US/docs/Web/API/KeyboardEvent">keyboard</a> events, <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">drag and drop</a>, <a href="/en-US/docs/Web/API/HTMLMediaElement">media control</a>, and more.</li>
+	<li>Event handlers for events that can be delivered to both elements and documents; these presently include only <a href="/en-US/docs/Web/API/HTMLElement/oncopy">copy</a>, <a href="/en-US/docs/Web/API/HTMLElement/oncut">cut</a>, and <a href="/en-US/docs/Web/API/HTMLElement/onpaste">paste</a> actions.</li>
+</ul>
+
+<h3 id="HTML_element_interfaces">HTML element interfaces</h3>
+
+<p>The <code>Element</code> interface has been further adapted to represent HTML elements specifically by introducing the {{domxref("HTMLElement")}} interface, which all more specific HTML element classes inherit from. This expands the <code>Element</code> class to add HTML-specific general features to the element nodes. Properties added by <code>HTMLElement</code> include for example {{domxref("HTMLElement.hidden", "hidden")}} and {{domxref("HTMLElement.innerText", "innerText")}}. <code>HTMLElement</code> also adds all the <a href="/en-US/docs/Web/API/GlobalEventHandlers">global event handlers</a>.</p>
+
+<p>An {{Glossary("HTML")}} document is a DOM tree in which each of the nodes is an HTML element, represented by the {{domxref("HTMLElement")}} interface. The <code>HTMLElement</code> class, in turn, implements <code>Node</code>, so every element is also a node (but not the other way around). This way, the structural features implemented by the {{domxref("Node")}} interface are also available to HTML elements, allowing them to be nested within each other, created and deleted, moved around, and so forth.</p>
+
+<p>The <code>HTMLElement</code> interface is generic, however, providing only the functionality common to all HTML elements such as the element's ID, its coordinates, the HTML making up the element, information about scroll position, and so forth.</p>
+
+<p>In order to expand upon the functionality of the core <code>HTMLElement</code> interface to provide the features needed by a specific element, the <code>HTMLElement</code> class is subclassed to add the needed properties and methods. For example, the {{HTMLElement("canvas")}} element is represented by an object of type {{domxref("HTMLCanvasElement")}}. <code>HTMLCanvasElement</code> augments the <code>HTMLElement</code> type by adding properties such as {{domxref("HTMLCanvasElement.height", "height")}} and methods like {{domxref("HTMLCanvasElement.getContext", "getContext()")}} to provide canvas-specific features.</p>
+
+<p>The overall inheritance for HTML element classes looks like this:</p>
+
+<p><img alt="Hierarchy of interfaces for HTML elements" src="https://mdn.mozillademos.org/files/16596/html-dom-hierarchy.svg" style="display: block; height: 565px; margin: 0 auto; width: 661px;"></p>
+
+<p>As such, an element inherits the properties and methods of all of its ancestors. For example, consider a {{HTMLElement("a")}} element, which is represented in the DOM by an object of type {{domxref("HTMLAnchorElement")}}. The element, then, includes the anchor-specific properties and methods described in that class's documentation, but also those defined by {{domxref("HTMLElement")}} and {{domxref("Element")}}, as well as from {{domxref("Node")}} and, finally, {{domxref("EventTarget")}}.</p>
+
+<p>Each level defines a key aspect of the utility of the element. From <code>Node</code>, the element inherits concepts surrounding the ability for the element to be contained by another element, and to contain other elements itself. Of special importance is what is gained by inheriting from <code>EventTarget</code>: the ability to receive and handle events such as mouse clicks, play and pause events, and so forth.</p>
+
+<p>There are elements that share commonalities and thus have an additional intermediary type. For example, the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements both present audiovisual media. The corresponding types, {{domxref("HTMLAudioElement")}} and {{domxref("HTMLVideoElement")}}, are both based upon the common type {{domxref("HTMLMediaElement")}}, which in turn is based upon {{domxref("HTMLElement")}} and so forth. <code>HTMLMediaElement</code> defines the methods and properties held in common between audio and video elements.</p>
+
+<p>These element-specific interfaces make up the majority of the HTML DOM API, and are the focus of this article. To learn more about the actual structure of the <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a>, see <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a>.</p>
+
+<h2 id="HTML_DOM_target_audience">HTML DOM target audience</h2>
+
+<p>The features exposed by the HTML DOM are among the most commonly-used APIs in the web developer's arsenal. All but the most simple web applications will use some features of the HTML DOM.</p>
+
+<h2 id="HTML_DOM_API_interfaces">HTML DOM API interfaces</h2>
+
+<p>The majority of the interfaces that comprise the HTML DOM API map almost one-to-one to individual HTML elements, or to a small group of elements with similar functionality. In addition, the HTML DOM API includes a few interfaces and types to support the HTML element interfaces.</p>
+
+<h3 id="HTML_element_interfaces_2">HTML element interfaces</h3>
+
+<p>These interfaces represent specific HTML elements (or sets of related elements which have the same properties and methods associated with them).</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDirectoryElement"><code>HTMLDirectoryElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameElement"><code>HTMLFrameElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFrameSetElement"><code>HTMLFrameSetElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHRElement"><code>HTMLHRElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadElement"><code>HTMLHeadElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHeadingElement"><code>HTMLHeadingElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLHtmlElement"><code>HTMLHtmlElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLIsIndexElement"><code>HTMLIsIndexElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLIElement"><code>HTMLLIElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLabelElement"><code>HTMLLabelElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLegendElement"><code>HTMLLegendElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMapElement"><code>HTMLMapElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMarqueeElement"><code>HTMLMarqueeElement</code></a> {{deprecated_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuElement"><code>HTMLMenuElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMenuItemElement"><code>HTMLMenuItemElement</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMetaElement"><code>HTMLMetaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLMeterElement"><code>HTMLMeterElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLObjectElement"><code>HTMLObjectElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptGroupElement"><code>HTMLOptGroupElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionElement"><code>HTMLOptionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOutputElement"><code>HTMLOutputElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParagraphElement"><code>HTMLParagraphElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLParamElement"><code>HTMLParamElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPictureElement"><code>HTMLPictureElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLPreElement"><code>HTMLPreElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLProgressElement"><code>HTMLProgressElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLScriptElement"><code>HTMLScriptElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSelectElement"><code>HTMLSelectElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSlotElement"><code>HTMLSlotElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSourceElement"><code>HTMLSourceElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLStyleElement"><code>HTMLStyleElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableCellElement"><code>HTMLTableCellElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableElement"><code>HTMLTableElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTableSectionElement"><code>HTMLTableSectionElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTemplateElement"><code>HTMLTemplateElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTextAreaElement"><code>HTMLTextAreaElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTimeElement"><code>HTMLTimeElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTitleElement"><code>HTMLTitleElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLTrackElement"><code>HTMLTrackElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUListElement"><code>HTMLUListElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLVideoElement"><code>HTMLVideoElement</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Web_app_and_browser_integration_interfaces">Web app and browser integration interfaces</h3>
+
+<p>These interfaces offer access to the browser window and document that contain the HTML, as well as to the browser's state, available plugins (if any), and various configuration options.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ApplicationCache"><code>ApplicationCache</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BarProp"><code>BarProp</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/External"><code>External</code></a> {{deprecated_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Navigator"><code>Navigator</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Plugin"><code>Plugin</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PluginArray"><code>PluginArray</code></a> {{obsolete_inline}}</span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><code><a href="/en-US/docs/Web/API/Window">Window</a></code></span></span></li>
+</ul>
+</div>
+
+<h3 id="Form_support_interfaces">Form support interfaces</h3>
+
+<p>These interfaces provide structure and functionality required by the elements used to create and manage forms, including the {{HTMLElement("form")}} and {{HTMLElement("input")}} elements.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/FormDataEvent"><code>FormDataEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLFormControlsCollection"><code>HTMLFormControlsCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLOptionsCollection"><code>HTMLOptionsCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/RadioNodeList"><code>RadioNodeList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ValidityState"><code>ValidityState</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Canvas_and_image_interfaces">Canvas and image interfaces</h3>
+
+<p>These interfaces represent objects used by the Canvas API as well as the {{HTMLElement("img")}} element and {{HTMLElement("picture")}} elements.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasGradient"><code>CanvasGradient</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasPattern"><code>CanvasPattern</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmap"><code>ImageBitmap</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageBitmapRenderingContext"><code>ImageBitmapRenderingContext</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ImageData"><code>ImageData</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvas"><code>OffscreenCanvas</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/OffscreenCanvasRenderingContext2D"><code>OffscreenCanvasRenderingContext2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Path2D"><code>Path2D</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextMetrics"><code>TextMetrics</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Media_interfaces">Media interfaces</h3>
+
+<p>The media interfaces provide HTML access to the contents of the media elements: {{HTMLElement("audio")}} and {{HTMLElement("video")}}.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrack"><code>AudioTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MediaError"><code>MediaError</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrack"><code>TextTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCue"><code>TextTrackCue</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackCueList"><code>TextTrackCueList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TextTrackList"><code>TextTrackList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TimeRanges"><code>TimeRanges</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/TrackEvent"><code>TrackEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrack"><code>VideoTrack</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Drag_and_drop_interfaces">Drag and drop interfaces</h3>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a> to represent individual draggable (or dragged) items, groups of dragged or draggable items, and to handle the drag and drop process.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransfer"><code>DataTransfer</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItem"><code>DataTransferItem</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DataTransferItemList"><code>DataTransferItemList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DragEvent"><code>DragEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Page_history_interfaces">Page history interfaces</h3>
+
+<p>The History API interfaces let you access information about the browser's history, as well as to shift the browser's current tab forward and backward through that history.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BeforeUnloadEvent"><code>BeforeUnloadEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HashChangeEvent"><code>HashChangeEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/History"><code>History</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Location"><code>Location</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PageTransitionEvent"><code>PageTransitionEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PopStateEvent"><code>PopStateEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Web_Components_interfaces">Web Components interfaces</h3>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/Web_Components">Web Components API</a> to create and manage the available <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">custom elements</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CustomElementRegistry"><code>CustomElementRegistry</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Miscellaneous_and_supporting_interfaces">Miscellaneous and supporting interfaces</h3>
+
+<p>These supporting object types are used in a variety of ways in the HTML DOM API; in addition, {{domxref("PromiseRejectionEvent")}} represents the event delivered when a {{Glossary("JavaScript")}} {{jsxref("Promise")}} is rejected.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringList"><code>DOMStringList</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DOMStringMap"><code>DOMStringMap</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/ErrorEvent"><code>ErrorEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/HTMLAllCollection"><code>HTMLAllCollection</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeType"><code>MimeType</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MimeTypeArray"><code>MimeTypeArray</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/PromiseRejectionEvent"><code>PromiseRejectionEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h3 id="Interfaces_belonging_to_other_APIs">Interfaces belonging to other APIs</h3>
+
+<p>There are several interfaces which are technically defined in the HTML specification while actually being part of other APIs.</p>
+
+<h4 id="Web_storage_interfaces">Web storage interfaces</h4>
+
+<p>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> provides the ability for web sites to store data either temporarily or permanently on the user's device for later re-use.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Storage"><code>Storage</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/StorageEvent"><code>StorageEvent</code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="Web_Workers_interfaces">Web Workers interfaces</h4>
+
+<p>These interfaces are used by the <a href="/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> both to establish the ability for workers to interact with an app and its content, but also to support messaging between windows or apps.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/BroadcastChannel"><code>BroadcastChannel</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/DedicatedWorkerGlobalScope"><code>DedicatedWorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageChannel"><code>MessageChannel</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/MessagePort"><code>MessagePort</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorker"><code>SharedWorker</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/SharedWorkerGlobalScope"><code>SharedWorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/Worker"><code>Worker</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerGlobalScope"><code>WorkerGlobalScope</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerLocation"><code>WorkerLocation</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WorkerNavigator "><code>WorkerNavigator </code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="WebSocket_interfaces">WebSocket interfaces</h4>
+
+<p>These interfaces, defined by the HTML specification, are used by the <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket API</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a></span></span></li>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/WebSocket"><code>WebSocket</code></a></span></span></li>
+</ul>
+</div>
+
+<h4 id="Server-sent_events_interfaces">Server-sent events interfaces</h4>
+
+<p>The {{domxref("EventSource")}} interface represents the source which sent or is sending <a href="/en-US/docs/Web/API/Server-sent_events">server-sent events</a>.</p>
+
+<div class="index">
+<ul>
+	<li><span class="indexListRow"><span class="indexListTerm"><a href="/en-US/docs/Web/API/EventSource"><code>EventSource</code></a></span></span></li>
+</ul>
+</div>
+
+<h2 id="Examples">Examples</h2>
+
+<p>In this example, an {{HTMLElement("input")}} element's {{domxref("HTMLInputElement.input_event", "input")}} event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.</p>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">const nameField = document.getElementById("userName");
+const sendButton = document.getElementById("sendButton")
+
+sendButton.disabled = true;
+// [note: this is disabled since it causes this article to always load with this example focused and scrolled into view]
+//nameField.focus();
+
+nameField.addEventListener("input", event =&gt; {
+  const elem = event.target;
+  const valid = elem.value.length != 0;
+
+  if (valid &amp;&amp; sendButton.disabled) {
+    sendButton.disabled = false;
+  } else if (!valid &amp;&amp; !sendButton.disabled) {
+    sendButton.disabled = true;
+  }
+});</pre>
+
+<p>This code uses the {{domxref("Document")}} interface's {{domxref("Document.getElementById", "getElementById()")}} method to get the DOM object representing the {{HTMLElement("input")}} elements whose IDs are <code>userName</code> and <code>sendButton</code>.  With these, we can access the properties and methods that provide information about and grant control over these elements.</p>
+
+<p>The {{domxref("HTMLInputElement")}} object for the "Send" button's {{domxref("HTMLInputElement.disabled", "disabled")}} property is set to <code>true</code>, which disables the "Send" button so it can't be clicked. In addition, the user name input field is made the active focus by calling the {{domxref("HTMLElement.focus", "focus()")}} method it inherits from {{domxref("HTMLElement")}}.</p>
+
+<p>Then {{domxref("EventTarget.addEventListener", "addEventListener()")}} is called to add a handler for the <code>input</code> event to the user name input. This code looks at the length of the current value of the input; if it's zero, then the "Send" button is disabled if it's not already disabled. Otherwise, the code ensures that the button is enabled.</p>
+
+<p>With this in place, the "Send" button is always enabled whenever the user name input field has a value, and disabled when it's empty.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>The HTML for the form looks like this:</p>
+
+<pre class="brush: html">&lt;p&gt;Please provide the information below. Items marked with "*" are required.&lt;/p&gt;
+&lt;form action="" method="get"&gt;
+  &lt;p&gt;
+    &lt;label for="userName" required&gt;Your name:&lt;/label&gt;
+    &lt;input type="text" id="userName"&gt; (*)
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="email"&gt;Email:&lt;/label&gt;
+    &lt;input type="email" id="userEmail"&gt;
+  &lt;/p&gt;
+  &lt;input type="submit" value="Send" id="sendButton"&gt;
+&lt;/form&gt;
+</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{EmbedLiveSample("Examples", 640, 300)}}</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')}}</td>
+			<td>{{Spec2('HTML WHATWG')}}</td>
+			<td>WHATWG HTML Specification</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('HTML5 W3C')}}</td>
+			<td>{{Spec2('HTML5 W3C')}}</td>
+			<td>No change from {{SpecName("DOM2 HTML")}}</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM2 HTML')}}</td>
+			<td>{{Spec2('DOM2 HTML')}}</td>
+			<td>No change from {{SpecName("DOM1")}}.</td>
+		</tr>
+		<tr>
+			<td>{{SpecName('DOM1')}}</td>
+			<td>{{Spec2('DOM1')}}</td>
+			<td>Initial definition.</td>
+		</tr>
+	</tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.HTMLElement")}}</p>
+</div>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+	<dt>References</dt>
+	<dd>
+	<ul>
+		<li><a href="/en-US/docs/Web/HTML/Element">HTML elements reference</a></li>
+		<li><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></li>
+		<li><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM)</a> reference</li>
+	</ul>
+	</dd>
+	<dt>Guides</dt>
+	<dd>
+	<ul>
+		<li>
+		<p><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents" style="font-size: 1rem; letter-spacing: -0.00278rem;">Manipulating documents</a><span style="font-size: 1rem; letter-spacing: -0.00278rem;">: A beginner's guide to manipulating the DOM.</span></p>
+		</li>
+	</ul>
+	</dd>
+</dl>
diff --git a/files/uk/web/api/html_dom_api/microtask_guide/index.html b/files/uk/web/api/html_dom_api/microtask_guide/index.html
new file mode 100644
index 0000000000..7b02378a59
--- /dev/null
+++ b/files/uk/web/api/html_dom_api/microtask_guide/index.html
@@ -0,0 +1,324 @@
+---
+title: Використання мікрозадач у JavaScript за допомогою queueMicrotask()
+slug: Web/API/HTML_DOM_API/Microtask_guide
+tags:
+  - API
+  - JavaScript
+  - ServiceWorker
+  - SharedWorker
+  - Window
+  - Worker
+  - queueMicrotask
+  - Довідник
+  - асинхронний
+  - мікрозадача
+  - пакет
+  - черга
+translation_of: Web/API/HTML_DOM_API/Microtask_guide
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p><span class="seoSummary"><strong>Мікрозадача</strong> - це коротка функція, яка виконується після того, як функція чи програма, яка її створила, завершується, <em>та</em> тільки якщо стек виконання JavaScript порожній, але перед поверненням контролю до циклу подій {{Glossary("user agent", "користувацького агента")}} для керування середовищем виконання скрипта.</span> Даний цикл подій може бути або головним циклом подій веб-переглядача, або циклом подій, що керує <a href="/uk/docs/Web/API/Web_Workers_API">веб-виконавцем</a>. Це дозволяє даній функції виконуватись без ризику втрутитись у виконання іншого скрипта, в той же час гарантує, що мікрозадача виконається до того, як користувацький агент матиме змогу відреагувати на дії, виконані цією мікрозадачею.</p>
+
+<p><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Проміси</a> JavaScript та <a href="/uk/docs/Web/API/Mutation_Observer_API">Mutation Observer API</a> використовують чергу мікрозадач для виконання своїх зворотніх викликів, але бувають інші випадки, коли здатність відкласти роботу до завершення поточного проходу циклу подій може бути корисна. Щоб дозволити стороннім бібліотекам, фреймворкам та поліфілам використовувати мікрозадачі, метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} доступний у інтерфейсах {{domxref("Window")}} та {{domxref("Worker")}} через домішку {{domxref("WindowOrWorkerGlobalScope")}}.</p>
+
+<h2 id="Задачі_та_мікрозадачі">Задачі та мікрозадачі</h2>
+
+<p>Щоб належно обговорювати мікрозадачі, насамперед, корисно знати, що таке задача JavaScript та чим мікрозадачі відрізняються від задач. Це швидке, спрощене пояснення, але якщо вам потрібно більше подробиць, ви можете їх дізнатись у статті <a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a>.</p>
+
+<h3 id="Задачі">Задачі</h3>
+
+<p><strong>Задача</strong> - це будь-який код JavaScript, що запланований до запуску стандартними механізмами, такими як початковий запуск програми, запуск зворотного виклику для події, або запуск таймера чи інтервалу. Всі вони розташовуються у <strong>черзі задач</strong>.</p>
+
+<p>Задачі додаються до черги задач, коли:</p>
+
+<ul>
+ <li>Безпосередньо виконується нова програма чи підпрограма JavaScript (наприклад, з консолі чи запуском коду у елементі {{HTMLElement("script")}}).</li>
+ <li>Спрацьовує подія, додаючи функцію зворотного виклику події до черги задач.</li>
+ <li>Доходить черга таймера чи інтервалу, створеного методом {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} чи {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}, що спричиняє додавання відповідного зворотного виклику до черги задач.</li>
+</ul>
+
+<p>Цикл подій, що керує вашим кодом, обробляє ці задачі одна за одною, в тому порядку, в якому вони були додані у чергу. Лише ті задачі, які <em>вже знаходились у черзі задач</em>, коли почався прохід циклу подій, будуть виконані протягом поточної ітерації. Решті доведеться зачекати наступної ітерації.</p>
+
+<h3 id="Мікрозадачі">Мікрозадачі</h3>
+
+<p>Спершу різниця між мікрозадачами та задачами здається незначною. І вони дійсно схожі; і те, й інше - код JavaScript, який розміщується у черзі та запускається у належний час. Однак, в той час, як цикл подій запускає лише задачі, наявні у черзі на момент початку ітерації, одна за одною, з мікрозадачами він поводиться зовсім по-іншому.</p>
+
+<p>Є дві ключові відмінності.</p>
+
+<p>По-перше, кожен раз, коли задача завершується, цикл подій перевіряє, чи задача повертає контроль іншому коду JavaScript. Якщо ні, він запускає всі мікрозадачі з черги мікрозадач. Таким чином, черга мікрозадач обробляється багаторазово протягом однієї ітерації циклу подій, в тому числі після обробки подій та інших зворотних викликів.</p>
+
+<p>По-друге, якщо мікрозадача додає інші мікрозадачі до черги, викликаючи метод {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, ці додані мікрозадачі <em>виконуються перед запуском наступної задачі</em>. Все тому, що цикл подій викликатиме мікрозадачі, доки у черзі не залишиться жодної, навіть якщо при цьому додаються нові.</p>
+
+<div class="blockIndicator warning">
+<p><strong>Застереження:</strong> Оскільки мікрозадачі можуть ставити у чергу інші мікрозадачі, а цикл подій продовжуватиме обробляти мікрозадачі, доки черга не спорожніє, існує реальний ризик спричинити нескінченну обробку мікрозадач циклом подій. Будьте обережні, додаючи мікрозадачі рекурсивно.</p>
+</div>
+
+<h2 id="Використання_мікрозадач">Використання мікрозадач</h2>
+
+<p>Перед тим, як продовжити, важливо зазначити ще раз, що більшість програмістів нечасто використовують мікрозадачі, якщо взагалі використовують. Це вузькоспеціалізована функціональність сучасної JavaScript-розробки для переглядачів, що дозволяє вам запланувати виконання коду попереду чогось іншого у довгому списку речей, що чекають на виконання комп'ютером користувача. Зловживання цією можливістю призведе до проблем з продуктивністю.</p>
+
+<h3 id="Додавання_мікрозадач_у_чергу">Додавання мікрозадач у чергу</h3>
+
+<p>Таким чином, вам варто використовувати мікрозадачі лише тоді, коли немає іншого рішення, або при створенні фреймворків чи бібліотек, які мають використовувати мікрозадачі для створення функціональності, яку реалізують. Хоча раніше існували трюки, які дозволяли ставити мікрозадачі в чергу (наприклад, створення проміса, який негайно вирішується), введення методу {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} додає стандартний спосіб створення мікрозадач безпечно та без допомоги трюків.</p>
+
+<p>Введення методу <code>queueMicrotask()</code> дозволяє уникнути вивертів, що трапляються під час такого проникнення у чергу мікрозадач за допомогою промісів. Наприклад, при використанні промісів для створення мікрозадач, винятки, викинуті зворотним викликом, повідомляються як відхилені проміси, а не як стандартні винятки. Також, створення та знищення промісів потребує додаткових витрат як часу, так і пам'яті, цього уникає функція, яка належним чином ставить мікрозадачі у чергу.</p>
+
+<p>Просто передайте {{jsxref("Function","функцію")}} JavaScript, яку треба викликати, коли контекст обробляє мікрозадачі, у метод <code>queueMicrotask()</code>, доступний у глобальному контексті, як визначено у інтерфейсі {{domxref("Window")}} або {{domxref("Worker")}}, в залежності від поточного контексту виконання.</p>
+
+<pre class="brush: js">queueMicrotask(() =&gt; {
+  /* тут код, який виконує мікрозадача */
+});
+</pre>
+
+<p>Сама функція мікрозадачі не приймає параметрів та не повертає значення.</p>
+
+<h3 id="Коли_використовувати_мікрозадачі">Коли використовувати мікрозадачі</h3>
+
+<p>У цьому розділі ми розглянемо сценарії, в яких мікрозадачі є особливо корисними. Загалом, мова йде про отримання та перевірку результатів, або прибирання, після того, як головне тіло контексту виконання JavaScript завершується, але перед тим, як опрацьовуються будь-які обробники подій, таймери та інтервали, чи інші зворотні виклики.</p>
+
+<p>Коли це корисно?</p>
+
+<p>Головна причина використання мікрозадач проста: забезпечити послідовний порядок виконання задач, навіть коли результати чи дані доступні синхронно, одночасно знижуючи ризик помітних користувачу затримок у операціях.</p>
+
+<h4 id="Забезпечення_порядку_виконання_при_використанні_промісів_в_умовних_конструкціях">Забезпечення порядку виконання при використанні промісів в умовних конструкціях</h4>
+
+<p>Одна з ситуацій, в якій можуть використовуватись мікрозадачі - це забезпечення завжди послідовного порядку виконання у ситуації, коли проміси використовуються у одному блоці конструкції <code>if...else</code> (чи іншої умовної конструкції), але не в іншому блоці. Розглянемо наступний код:</p>
+
+<pre class="brush: js">customElement.prototype.getData = url =&gt; {
+  if (this.cache[url]) {
+    this.data = this.cache[url];
+    this.dispatchEvent(new Event("load"));
+  } else {
+    fetch(url).then(result =&gt; result.arrayBuffer()).then(data =&gt; {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<p>Проблема тут полягає в тому, що, використовуючи задачу в одній гілці конструкції <code>if...else</code> (у випадку, коли зображення доступне з кешу), але маючи проміси у блоці <code>else</code>, ми отримуємо ситуацію, в якій порядок операцій може бути різним; наприклад, як показано нижче.</p>
+
+<pre class="brush: js">element.addEventListener("load", () =&gt; console.log("Завантажені дані"));
+console.log("Отримання даних...");
+element.getData();
+console.log("Дані отримано");
+</pre>
+
+<p>Виконання цього коду два рази підряд дає результати, наведені у таблиці:</p>
+
+<table class="standard-table">
+ <caption>Результати, коли дані не кешовані (зліва) та коли дані знайдені в кеші</caption>
+ <thead>
+  <tr>
+   <th scope="col">Дані не кешовані</th>
+   <th scope="col">Дані кешовані</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>
+    <pre>
+Отримання даних
+Дані отримано
+Завантажені дані
+</pre>
+   </td>
+   <td>
+    <pre>
+Отримання даних
+Завантажені дані
+Дані отримано
+</pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Навіть гірше, іноді властивість елементів <code>data</code> буде встановлена, а іноді не буде, на той момент, коли цей код завершує виконання.</p>
+
+<p>Ми можемо забезпечити послідовний порядок цих операцій використанням мікрозадачі у блоці <code>if</code>, щоб збалансувати два блоки:</p>
+
+<pre class="brush: js">customElement.prototype.getData = url =&gt; {
+  if (this.cache[url]) {
+    queueMicrotask(() =&gt; {
+      this.data = this.cache[url];
+      this.dispatchEvent(new Event("load"));
+    });
+  } else {
+    fetch(url).then(result =&gt; result.arrayBuffer()).then(data =&gt; {
+      this.cache[url] = data;
+      this.data = data;
+      this.dispatchEvent(new Event("load"));
+    });
+  }
+};</pre>
+
+<p>Це збалансовує два блоки, бо тепер в обох ситуаціях встановлення значення <code>data</code> та запуск події <code>load</code> відбувається всередині мікрозадачі (за допомогою <code>queueMicrotask()</code> у блоці <code>if</code> та за допомогою промісів, що використовуються методом {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, у блоці <code>else</code>).</p>
+
+<h4 id="Пакетне_виконання_операцій">Пакетне виконання операцій</h4>
+
+<p>Ви також можете використати мікрозадачі, щоб зібрати множину запитів з різних джерел у єдиний пакет, уникаючи можливих затрат, пов'язаних з багатьма викликами задля виконання задач одного типу.</p>
+
+<p>Фрагмент коду, наведений нижче, створює функцію, яка збирає множину повідомлень у масив, використовуючи мікрозадачу, щоб відправити їх як єдиний об'єкт по завершенні контексту.</p>
+
+<pre class="brush: js">const messageQueue = [];
+
+let sendMessage = message =&gt; {
+  messageQueue.push(message);
+
+  if (messageQueue.length === 1) {
+    queueMicrotask(() =&gt; {
+      const json = JSON.stringify(messageQueue);
+      messageQueue.length = 0;
+      fetch("url-of-receiver", json);
+    });
+  }
+};
+</pre>
+
+<p>Коли викликається <code>sendMessage()</code>, вказане повідомлення спочатку додається у масив черги повідомлень. А далі відбувається цікаве.</p>
+
+<p>Якщо повідомлення, яке ми додали до масиву, є першим, ми додаємо мікрозадачу, яка відправлятиме пакет. Мікрозадача виконається, як завжди, коли шлях виконання JavaScript сягне верхнього рівня, одразу перед зворотними викликами. Це означає, що будь-які подальші виклики <code>sendMessage()</code>, зроблені в цей час, додадуть свої повідомлення до черги повідомлень, але, завдяки перевірці довжини масиву перед додаванням мікрозадачі, нових мікрозадач у чергу не буде додано.</p>
+
+<p>Коли запускається мікрозадача, то вона має масив, потенційно, багатьох повідомлень, які на неї очікують. Вона починається кодуванням його як JSON за допомогою методу {{jsxref("JSON.stringify()")}}. Після цього вміст масиву більше не потрібний, а отже, ми спорожнюємо масив <code>messageQueue</code>. Нарешті, ми використовуємо метод {{domxref("WindowOrWorkerGlobalScope.fetch", "fetch()")}}, щоб відправити рядок JSON на сервер.</p>
+
+<p>Це дозволяє кожному виклику <code>sendMessage()</code>, зробленому під час тієї самої ітерації циклу подій, додавати свої повідомлення до тієї самої операції <code>fetch()</code>, без потенційних затримок трансмісії іншими задачами, такими як таймери та подібні.</p>
+
+<p>Сервер отримає рядок JSON, далі, ймовірно, декодує його та обробить повідомлення, які знайде у отриманому масиві.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Простий_приклад_мікрозадачі">Простий приклад мікрозадачі</h3>
+
+<p>У цьому простому прикладі ми бачимо, що додавання мікрозадачі у чергу спричиняє запуск зворотного виклику мікрозадачі після того, як тіло цього скрипта верхнього рівня завершує виконання.</p>
+
+<div class="hidden">
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, що використовується для планування запуску мікрозадачі. Цей виклик оточують виклики <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p>
+
+<pre class="brush: js">log("До розміщення мікрозадачі в черзі");
+queueMicrotask(() =&gt; {
+  log("Мікрозадача запустилась.")
+});
+log("Після розміщення мікрозадачі в черзі");</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Простий_приклад_мікрозадачі", 640, 80)}}</p>
+
+<h3 id="Таймер_та_приклад_мікрозадачі">Таймер та приклад мікрозадачі</h3>
+
+<p>У цьому прикладі встановлюється таймер для запуску через нуль мілісекунд (або "якомога швидше"). Це демонструє різницю між тим, що означає "якомога швидше" при плануванні нової задачі (наприклад, при використанні <code>setTimeout()</code>) у порівнянні з використанням мікрозадачі.</p>
+
+<div class="hidden">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>У наступному коді ми бачимо виклик {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, який використовується для планування запуску мікрозадачі. Цей виклик розташований між викликами <code>log()</code>, користувацької функції, яка просто виводить текст на екран.</p>
+
+<p>Наступний код встановлює таймер, який має запуститися через нуль мілісекунд, після чого додає у чергу мікрозадачу. Він оточений викликами <code>log()</code> для виводу додаткових повідомлень.</p>
+
+<pre class="brush: js">let callback = () =&gt; log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () =&gt; log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+queueMicrotask(urgentCallback);
+log("Кінець головної програми");</pre>
+
+<h4 id="Результат_2">Результат</h4>
+
+<p>{{EmbedLiveSample("Таймер_та_приклад_мікрозадачі", 640, 100)}}</p>
+
+<p>Зауважте, що текст, який виводиться головною програмою, з'являється першим, далі текст, виведений мікрозадачею, а за ним текст зворотного виклику таймера. Все тому, що, коли задача, що керує виконанням головної програми, завершується, черга мікрозадач обробляється раніше черги задач, в якій розташований зворотний виклик таймера. Знання того, що задачі та мікрозадачі розташовуються у різних чергах, і те, що мікрозадачі виконуються першими, допомагає легше в цьому розібратись.</p>
+
+<h3 id="Мікрозадача_з_функції">Мікрозадача з функції</h3>
+
+<p>Цей приклад трохи розширює попередній додаванням функції, яка виконує певну роботу. Ця функція використовує <code>queueMicrotask()</code>, щоб додати мікрозадачу. Важливий момент, який варто з нього винести - мікрозадача не виконується, коли завершується функція, а тільки коли завершується головна програма.</p>
+
+<div class="hidden">
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html">&lt;pre id="log"&gt;
+&lt;/pre&gt;</pre>
+</div>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<div class="hidden">
+<p>Наведений нижче код використовується для логування результату.</p>
+
+<pre class="brush: js">let logElem = document.getElementById("log");
+let log = s =&gt; logElem.innerHTML += s + "&lt;br&gt;";</pre>
+</div>
+
+<p>Код головної програми наступний. Функція <code>doWork()</code> викликає <code>queueMicrotask()</code>, але мікрозадача не запускається, доки вся програма не завершується, оскільки саме тоді завершується задача і не залишається нічого іншого у стеку виконання.</p>
+
+<pre class="brush: js">let callback = () =&gt; log("Запустився звичайний зворотний виклик таймера");
+
+let urgentCallback = () =&gt; log("*** О, ні! Запустився терміновий зворотний виклик!");
+
+let doWork = () =&gt; {
+  let result = 1;
+
+  queueMicrotask(urgentCallback);
+
+  for (let i=2; i&lt;=10; i++) {
+    result *= i;
+  }
+  return result;
+};
+
+log("Початок головної програми");
+setTimeout(callback, 0);
+log(`10! дорівнює ${doWork()}`);
+log("Кінець головної програми");</pre>
+
+<h4 id="Результат_3">Результат</h4>
+
+<p>{{EmbedLiveSample("Мікрозадача_з_функції", 640, 100)}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth">В подробицях: мікрозадачі та середовище виконання JavaScript</a></li>
+ <li>{{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}</li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+   <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/htmlcanvaselement/index.html b/files/uk/web/api/htmlcanvaselement/index.html
new file mode 100644
index 0000000000..9f1a6452ed
--- /dev/null
+++ b/files/uk/web/api/htmlcanvaselement/index.html
@@ -0,0 +1,264 @@
+---
+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>The <strong><code>HTMLCanvasElement</code></strong> interface provides properties and methods for manipulating the layout and presentation of canvas elements. The <code>HTMLCanvasElement</code> interface also inherits the properties and methods of the {{domxref("HTMLElement")}} interface.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.height")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("height", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>150</code> is used.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} reflecting the {{htmlattrxref("moz-opaque", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.</dd>
+ <dt>{{domxref("HTMLCanvasElement.width")}}</dt>
+ <dd>Is a positive <code>integer</code> reflecting the {{htmlattrxref("width", "canvas")}} HTML attribute of the {{HTMLElement("canvas")}} element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of <code>300</code> is used.</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="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, </em><em>{{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("CanvasCaptureMediaStream")}} that is a real-time video capture of the surface of the canvas.</dd>
+ <dt>{{domxref("HTMLCanvasElement.getContext()")}}</dt>
+ <dd>Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with <code>"2d"</code> returns a {{domxref("CanvasRenderingContext2D")}} object, whereas calling it with <code>"experimental-webgl"</code> (or <code>"webgl"</code>) returns a {{domxref("WebGLRenderingContext")}} object. This context is only available on browsers that implement <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toDataURL()")}}</dt>
+ <dd>Returns a data-URL containing a representation of the image in the format specified by the <code>type</code> parameter (defaults to <code>png</code>). The returned image is in a resolution of 96dpi.</dd>
+ <dt>{{domxref("HTMLCanvasElement.toBlob()")}}</dt>
+ <dd>Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.</dd>
+ <dt>{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}</dt>
+ <dd>Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.</dd>
+ <dt>{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}</dt>
+ <dd>Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified <code>name</code>. If <code>type</code> is not specified, the image type is <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>Edge</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>{{CompatVersionUnknown}}</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>{{CompatNo}}</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>{{CompatUnknown}}</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>{{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>{{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>{{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>Edge</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>{{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>{{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>{{CompatNo}}</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>{{CompatUnknown}}</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>{{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>{{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>{{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/uk/web/api/htmlelement/index.html b/files/uk/web/api/htmlelement/index.html
new file mode 100644
index 0000000000..02de0c792e
--- /dev/null
+++ b/files/uk/web/api/htmlelement/index.html
@@ -0,0 +1,486 @@
+---
+title: HTMLElement
+slug: Web/API/HTMLElement
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - NeedsMobileBrowserCompatibility
+  - NeedsNewLayout
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLElement
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+</div>
+
+<div> </div>
+
+<p>The <strong><code>HTMLElement</code></strong> interface represents any <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a> element. Some elements directly implement this interface, others implement it via an interface that inherits it.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("Element")}}, and implements those from {{domxref("GlobalEventHandlers")}} and {{domxref("TouchEventHandlers")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLElement.accessKey")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the access key assigned to the element.</dd>
+ <dt>{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the element's assigned access key.</dd>
+ <dt>{{domxref("HTMLElement.contentEditable")}}</dt>
+ <dd>Is a {{domxref("DOMString")}}, where a value of <code>"true"</code> means the element is editable and a value of <code>"false"</code> means it isn't.</dd>
+ <dt>{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that indicates whether or not the content of the element can be edited.</dd>
+ <dt>{{domxref("HTMLElement.contextMenu")}}</dt>
+ <dd>Is a {{domxref("HTMLMenuElement")}} representing the contextual menu associated with the element. It may be <code>null</code>.</dd>
+ <dt>{{domxref("HTMLElement.dataset")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMStringMap")}} with which script can read and write the element's <a href="/en-US/docs/Web/Guide/HTML/Using_data_attributes">custom data attributes</a> (<code>data-*</code>) .</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")}} representing the item scope.</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")}} representing the item ID.</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 a {{jsxref("Object")}} representing the item value.</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.noModule")}}</dt>
+ <dd>Is a {{jsxref("Boolean")}} indicating wether an import script can be executed in user agents that support module scripts.</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 a {{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 a {{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 doesn't have an effect on all of them.</dd>
+ <dt>{{domxref("HTMLElement.style")}}</dt>
+ <dd>Is a {{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")}} representing the translation.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<p>Most event handler properties, of the form <code>onXYZ</code>, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by <code>HTMLElement</code>. In addition, the following handlers 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>Runs the spell checker on the element's contents.</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>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatChrome(17)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoDesktop("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoDesktop("5.0")}}</td>
+   <td>{{CompatChrome(9)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>6.0</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatChrome(8)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>11</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>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.contentEditable", "contentEditable")}}</td>
+   <td>{{CompatGeckoDesktop("1.9")}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</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>
+   <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>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.draggable", "draggable")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.onModule")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(47)}}</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>
+   <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>{{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>{{CompatNo}}</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>{{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>{{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>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Edge</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKey", "accessKey")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}</td>
+   <td>{{CompatGeckoMobile("8.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.blur()", "blur()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.click()", "click()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.dataset", "dataset")}}</td>
+   <td>{{CompatGeckoMobile("6.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.focus()", "focus()")}}</td>
+   <td>{{CompatGeckoMobile("5.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td>{{domxref("HTMLElement.onModule", "onModule()")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(47)}}</td>
+   <td>{{CompatUnknown}}</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>{{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("Element")}}</li>
+</ul>
diff --git a/files/uk/web/api/htmlelement/offsettop/index.html b/files/uk/web/api/htmlelement/offsettop/index.html
new file mode 100644
index 0000000000..9bafdc485c
--- /dev/null
+++ b/files/uk/web/api/htmlelement/offsettop/index.html
@@ -0,0 +1,60 @@
+---
+title: HTMLElement.offsetTop
+slug: Web/API/HTMLElement/offsetTop
+translation_of: Web/API/HTMLElement/offsetTop
+---
+<div>
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>Властивість лише для зчитування <strong><code>HTMLElement.offsetTop</code></strong> повертає відстань від поточного елемента відносно верху {{domxref("HTMLelement.offsetParent","offsetParent")}} .</div>
+</div>
+
+<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> це кількість пікселів від верху <em>найближчого відносно зпозиціонованого</em> батьківського елементу.</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) {
+  // object is offset more
+  // than 10 pixels from its parent
+}</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>
+
+<p>In compliance with the specification, this property will return <code>null</code> on Webkit if the element is hidden (the <code>style.display</code> of this element or any ancestor is <code>"none"</code>) or if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>.</p>
+
+<p>This property will return <code>null</code> on Internet Explorer (9) if the <code>style.position</code> of the element itself is set to <code>"fixed"</code>. (Having <code>display:none</code> does not affect this browser.)</p>
diff --git a/files/uk/web/api/htmlformelement/index.html b/files/uk/web/api/htmlformelement/index.html
new file mode 100644
index 0000000000..7871a2d052
--- /dev/null
+++ b/files/uk/web/api/htmlformelement/index.html
@@ -0,0 +1,245 @@
+---
+title: HTMLFormElement
+slug: Web/API/HTMLFormElement
+tags:
+  - API
+  - Form Element
+  - Forms
+  - HTML DOM
+  - HTML forms
+  - HTMLFormElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/HTMLFormElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">The <code><strong>HTMLFormElement</strong></code> interface represents a {{HTMLElement("form")}} element in the DOM; it allows access to and in some cases modification of aspects of the form, as well as access to its component elements.</span></p>
+
+<p>{{InheritanceDiagram(600,120)}}</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.elements")}} {{ReadOnlyInline}}</dt>
+ <dd>A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.</dd>
+ <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
+ <dd>A <code>long</code> reflecting  the number of controls in the form.</dd>
+ <dt>{{domxref("HTMLFormElement.name")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.</dd>
+ <dt>{{domxref("HTMLFormElement.method")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.</dd>
+ <dt>{{domxref("HTMLFormElement.target")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.</dd>
+ <dt>{{domxref("HTMLFormElement.action")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.</dd>
+ <dt>{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ 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. The two properties are synonyms.</dd>
+ <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.</dd>
+ <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
+ <dd>A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.</dd>
+ <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
+ <dd>A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.</dd>
+</dl>
+
+<p>Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named <code>action</code> will have its <code>action</code> property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).</p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.checkValidity", "checkValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls are subject to <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a> and satisfy those contraints; returns <code>false</code> 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>false</code>.</dd>
+ <dt>{{domxref("HTMLFormElement.reportValidity", "reportValidity()")}}</dt>
+ <dd>Returns <code>true</code> if the element's child controls satisfy their <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation constraints</a>. When <code>false</code> is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.</dd>
+ <dt>{{domxref("HTMLFormElement.requestSubmit", "requestSubmit()")}}</dt>
+ <dd>Requests that the form be submitted using the specified submit button and its corresponding configuration.</dd>
+ <dt>{{domxref("HTMLFormElement.reset", "reset()")}}</dt>
+ <dd>Resets the form to its initial state.</dd>
+ <dt>{{domxref("HTMLFormElement.submit", "submit()")}}</dt>
+ <dd>Submits the form to the server.</dd>
+</dl>
+
+<h3 id="Deprecated_methods">Deprecated methods</h3>
+
+<dl>
+ <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{deprecated_inline}}</dt>
+ <dd>Triggers a native browser interface to assist the user in completing the fields which have an <a href="https://html.spec.whatwg.org/#autofill-field-name">autofill field name</a> value that is not <code>off</code> or <code>on</code>. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem.</dd>
+</dl>
+
+<h2 id="Events">Events</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event">formdata</a></code></dt>
+ <dd><span style="display: none;"> </span>The <code>formdata</code> event fires after the entry list representing the form's data is constructed.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onformdata">onformdata</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/reset_event">reset</a></code></dt>
+ <dd><span style="display: none;"> </span>The <code>reset</code> event fires when a form is reset.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset">onreset</a></code> property.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/HTMLFormElement/submit_event">submit</a></code></dt>
+ <dd>The <code>submit</code> event fires when a form is submitted.<br>
+ Also available via the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> property.</dd>
+</dl>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<h3 id="Obtaining_a_form_element_object">Obtaining a form element object</h3>
+
+<p>To obtain an <code>HTMLFormElement</code> object, you can use a <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> with {{domxref("ParentNode.querySelector", "querySelector()")}}, or you can get a list of all of the forms in the document using its {{domxref("Document.forms", "forms")}} property.</p>
+
+<p>{{domxref("Document.forms")}} returns an array of <code>HTMLFormElement</code> objects listing each of the forms on the page. You can then use any of the following syntaxes to get an individual form:</p>
+
+<dl>
+ <dt><code>document.forms[<em>index</em>]</code></dt>
+ <dd>Returns the form at the specified <code>index</code> into the array of forms.</dd>
+ <dt><code>document.forms[<em>id</em>]</code></dt>
+ <dd>Returns the form whose ID is <code>id</code>.</dd>
+ <dt><code>document.forms[<em>name</em>]</code></dt>
+ <dd>Returns the form whose {{domxref("Element.name", "name")}} attribute's value is <code>name</code>.</dd>
+</dl>
+
+<h3 id="Accessing_the_forms_elements">Accessing the form's elements</h3>
+
+<p>You can access the list of the form's data-containing elements by examining the form's {{domxref("HTMLFormElement.elements", "elements")}} property. This returns an {{domxref("HTMLFormControlsCollection")}} listing all of the form's user data entry elements, both those which are descendants of the <code>&lt;form&gt;</code> and those which are made members of the form using their <code>form</code> attributes.</p>
+
+<p>You can also get the form's element by using its <code>name</code> attribute as a key of the <code>form</code>, but using <code>elements</code> is a better approach — it contains only the form's elements, and it cannot be mixed with other attributes of the <code>form</code>.</p>
+
+<h3 id="Elements_that_are_considered_form_controls">Elements that are considered form controls</h3>
+
+<p>The elements which are included by <code>HTMLFormElement.elements</code> and <code>HTMLFormElement.length</code> are:</p>
+
+<ul>
+ <li>{{HTMLElement("button")}}</li>
+ <li>{{HTMLElement("fieldset")}}</li>
+ <li>{{HTMLElement("input")}} (with the exception that any whose {{htmlattrxref("type", "input")}} is <code>"image"</code> are omitted for historical reasons)</li>
+ <li>{{HTMLElement("object")}}</li>
+ <li>{{HTMLElement("output")}}</li>
+ <li>{{HTMLElement("select")}}</li>
+ <li>{{HTMLElement("textarea")}}</li>
+</ul>
+
+<p>No other elements are included in the list returned by <code>elements</code>, which makes it an excellent way to get at the elements most important when processing forms.</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>Creating a new form element, modifying its attributes, then submitting it:</p>
+
+<pre class="brush: js">var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST";
+f.submit();                            // Call the form's submit method
+</pre>
+
+<p>Extract information from a form element and set some of its attributes:</p>
+
+<pre class="brush: html">&lt;form name="formA" action="/cgi-bin/test" method="post"&gt;
+ &lt;p&gt;Press "Info" for form details, or "Set" to change those details.&lt;/p&gt;
+ &lt;p&gt;
+  &lt;button type="button" onclick="getFormInfo();"&gt;Info&lt;/button&gt;
+  &lt;button type="button" onclick="setFormInfo(this.form);"&gt;Set&lt;/button&gt;
+  &lt;button type="reset"&gt;Reset&lt;/button&gt;
+ &lt;/p&gt;
+
+ &lt;textarea id="form-info" rows="15" cols="20"&gt;&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  function getFormInfo(){
+    // Get a reference to the form via its name
+    var f = document.forms["formA"];
+    // The form properties we're interested in
+    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
+    // Iterate over the properties, turning them into a string that we can display to the user
+    var info = properties.map(function(property) { return property + ": " + f[property] }).join("\n");
+
+    // Set the form's &lt;textarea&gt; to display the form's properties
+    document.forms["formA"].elements['form-info'].value = info; // document.forms["formA"]['form-info'].value would also work
+  }
+
+  function setFormInfo(f){ // Argument should be a form element reference.
+    f.action = "a-different-url.cgi";
+    f.name   = "a-different-name";
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Submit a form into a new window:</p>
+
+<pre class="brush: html">&lt;!doctype html&gt;
+&lt;html&gt;
+&lt;head&gt;
+&lt;meta charset="utf-8"&gt;
+&lt;title&gt;Example new-window form submission&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+
+&lt;form action="test.php" target="_blank"&gt;
+  &lt;p&gt;&lt;label&gt;First name: &lt;input type="text" name="firstname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;Last name: &lt;input type="text" name="lastname"&gt;&lt;/label&gt;&lt;/p&gt;
+  &lt;p&gt;&lt;label&gt;&lt;input type="password" name="pwd"&gt;&lt;/label&gt;&lt;/p&gt;
+
+  &lt;fieldset&gt;
+   &lt;legend&gt;Pet preference&lt;/legend&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="cat"&gt; Cat&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="radio" name="pet" value="dog"&gt; Dog&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;fieldset&gt;
+    &lt;legend&gt;Owned vehicles&lt;/legend&gt;
+
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Bike"&gt;I have a bike&lt;/label&gt;&lt;/p&gt;
+    &lt;p&gt;&lt;label&gt;&lt;input type="checkbox" name="vehicle" value="Car"&gt;I have a car&lt;/label&gt;&lt;/p&gt;
+  &lt;/fieldset&gt;
+
+  &lt;p&gt;&lt;button&gt;Submit&lt;/button&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 {{domxref("XMLHttpRequest")}} API, please read <a href="/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', "#htmlformelement", "HTMLFormElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following method has been added: <code>requestAutocomplete()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "sec-forms.html#htmlformelement", "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. The following method has been added: <code>checkValidity()</code>. The following properties have been added: <code>autocomplete</code>, <code>noValidate</code>, and <code>encoding</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{ HTMLElement("form") }}.</li>
+</ul>
diff --git a/files/uk/web/api/htmlformelement/reset/index.html b/files/uk/web/api/htmlformelement/reset/index.html
new file mode 100644
index 0000000000..9917055250
--- /dev/null
+++ b/files/uk/web/api/htmlformelement/reset/index.html
@@ -0,0 +1,70 @@
+---
+title: HTMLFormElement.reset()
+slug: Web/API/HTMLFormElement/reset
+tags:
+  - скидання форми
+translation_of: Web/API/HTMLFormElement/reset
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>Метод <code><strong>HTMLFormElement.reset()</strong></code> відновлює значення елемента форми за замовчуванням.  Цей метод робить те ж саме, що і натискання кнопки скидання форми. </p>
+
+<p>Якщо елемент управління форми (наприклад, кнопка скидання) має ім'я або ідентифікатор скидання, він маскує метод скидання форми. Він не скидає інші атрибути <code>input</code> елемента, наприклад, <code>disabled</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><em>HTMLFormElement</em>.reset()
+</pre>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre>&lt;form&gt;
+    &lt;input type="text" size="350" value="Приймеш синю пігулку - і казці кінець. Ти прокинешся у своєму ліжку і повіриш, що це був сон. Приймеш червону пігулку - увійдеш до країни чудес. Я покажу тобі, чи глибока кроляча нора."/&gt;
+    &lt;input type="reset" value="Reset"&gt;
+    &lt;button type="reset"&gt;Red&lt;/button&gt;
+    &lt;div id="test"&gt;Blue&lt;/div&gt;
+&lt;/form&gt;
+
+&lt;script&gt;
+  // тут ми будем зберігати елемент, при нажатті на який ініціювало reset подію
+  let resetElement = undefined;
+
+  // додамо прослуховувач click події до елементів, які дозволяють скинути значення форми
+  document.querySelectorAll("*[type=reset], #test").forEach(element =&gt; element.addEventListener("click", e =&gt; {
+    resetElement = e.target;
+  }));
+
+  // при активації клік події виклечемо .reset() на FORM елементі
+  document.querySelector("#test").addEventListener("click", e =&gt; e.target.parentNode.reset());
+
+ // переконаємося в тому, що .reset() ініціює подію
+ window.addEventListener("reset", e =&gt; {
+    console.log(e.type, " has been initiated by: ", resetElement.tagName);
+    resetElement = undefined;
+  })
+&lt;/script&gt;</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('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.HTMLFormElement.reset")}}</p>
diff --git a/files/uk/web/api/htmlimageelement/image/index.html b/files/uk/web/api/htmlimageelement/image/index.html
new file mode 100644
index 0000000000..1477430aae
--- /dev/null
+++ b/files/uk/web/api/htmlimageelement/image/index.html
@@ -0,0 +1,117 @@
+---
+title: Image()
+slug: Web/API/HTMLImageElement/Image
+tags:
+  - Constructor
+  - DOM
+  - HTML DOM
+  - HTMLImageElement
+  - Довідка
+translation_of: Web/API/HTMLImageElement/Image
+---
+<div>{{ APIRef("HTML DOM") }}</div>
+
+<div>Конструктор <strong><code>Image()</code></strong> створює новий примірник {{domxref("HTMLImageElement")}}. Наслідком є те саме, що й для {{domxref("Document.createElement()", "document.createElement('img')")}}.</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: js"><span style="font-family: courier new,andale mono,monospace; line-height: normal;">new Image(width, height</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">)</span></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt>width {{optional_inline}}</dt>
+ <dd>Ширина зображення (визначає значення атрибута {{htmlattrxref("width", "img")}}).</dd>
+ <dt>height {{optional_inline}}</dt>
+ <dd>Висота зображення (визначає значення атрибута {{htmlattrxref("height", "img")}}).</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>У наведеному прикладі створюється елемент <code>&lt;img&gt;</code> завбільшки 100x200, до нього завантажується якесь зображення та додається до тіла документа:</p>
+
+<pre class="brush: js">var image = new Image(100, 200);
+image.onload = function() {
+  // Додати у DOM
+  document.body.appendChild(image);
+};
+image.src = '/assets/зразок.png';</pre>
+
+<p>Того ж можна досягти оголошенням такого HTML-елемента просто всередині {{htmlelement("body")}}:</p>
+
+<pre class="brush: html">&lt;img width="100" height="200" src="/assets/зразок.png"&gt;</pre>
+
+<p>Але перевагою створення <code>&lt;img&gt;</code> за допомогою конструктора <code>Image()</code> є можливість додати зображення у DOM лише після його завантаження (завдяки обробникові події <code>load</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("HTML WHATWG", "embedded-content.html#dom-image", "Image()")}}</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>{{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>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>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+   <td>{{compatversionunknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p> </p>
diff --git a/files/uk/web/api/htmlimageelement/index.html b/files/uk/web/api/htmlimageelement/index.html
new file mode 100644
index 0000000000..0f227e69f3
--- /dev/null
+++ b/files/uk/web/api/htmlimageelement/index.html
@@ -0,0 +1,401 @@
+---
+title: HTMLImageElement
+slug: Web/API/HTMLImageElement
+tags:
+  - API
+  - HTML DOM
+  - HTMLImageElement
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - img
+translation_of: Web/API/HTMLImageElement
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>HTMLImageElement</code></strong> interface provides special properties and methods  for manipulating the layout and presentation of {{HTMLElement("img")}} elements.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} indicating the alignment of the image with respect to the surrounding context.</dd>
+ <dt>{{domxref("HTMLImageElement.alt")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("alt", "img")}} HTML attribute,  thus indicating fallback context for the image.</dd>
+ <dt>{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that is responsible for the width of the border surrounding the image. This is now deprecated and the CSS {{cssxref("border")}} property should be used instead.</dd>
+ <dt>{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Boolean")}} that is <code>true</code> if the browser has finished fetching the image, whether successful or not. It also shows true, if the image has no {{domxref("HTMLImageElement.src", "src")}} value.</dd>
+ <dt>{{domxref("HTMLImageElement.crossOrigin")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the CORS setting for this image element. See <a href="/en-US/docs/HTML/CORS_settings_attributes">CORS settings attributes</a> for further details.</dd>
+ <dt>{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the URL to the currently displayed image (which may change, for example in response to media queries).</dd>
+ <dt>{{domxref("HTMLImageElement.height")}}</dt>
+ <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("height", "img")}} HTML attribute, indicating the rendered height of the image in CSS pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space on either side of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.isMap")}}</dt>
+ <dd>Is a {{domxref("Boolean")}} that reflects the {{htmlattrxref("ismap", "img")}} HTML attribute, indicating that the image is part of a server-side image map.</dd>
+ <dt>{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the URI of a long description of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that refers to a low-quality (but faster to load) copy of the image.</dd>
+ <dt>{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the name of the element.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}</dt>
+ <dd>Returns a <code>unsigned long</code> representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows <code>0</code>.</dd>
+ <dt>{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}</dt>
+ <dd>Returns a <code>unsigned long</code> representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show <code>0</code>.</dd>
+ <dt>{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("referrerpolicy", "img")}} HTML attribute indicating which referrer to use in order to fetch the image.</dd>
+ <dt>{{domxref("HTMLImageElement.src")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "img")}} HTML attribute, containing the full URL of the image including base URI.</dd>
+ <dt>{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("sizes", "img")}} HTML attribute.</dd>
+ <dt>{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} reflecting the {{htmlattrxref("srcset", "img")}} HTML attribute, containing a list of candidate images, separated by a comma (<code>',', U+002C COMMA</code>). A candidate image is a URL followed by a <code>'w'</code> with the width of the images, or an <code>'x'</code> followed by the pixel density.</dd>
+ <dt>{{domxref("HTMLImageElement.useMap")}}</dt>
+ <dd>Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("usemap", "img")}} HTML attribute, containing a partial URL of a map element.</dd>
+ <dt>{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}</dt>
+ <dd>Is a <code>long</code> representing the space above and below the image.</dd>
+ <dt>{{domxref("HTMLImageElement.width")}}</dt>
+ <dd>Is a <code>unsigned long</code> that reflects the {{htmlattrxref("width", "img")}} HTML attribute, indicating the rendered width of the image in CSS pixels.</dd>
+ <dt>{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the horizontal offset from the nearest layer. This property mimics an old Netscape 4 behavior.</dd>
+ <dt>{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}</dt>
+ <dd>Returns a <code>long</code> representing the vertical offset from the nearest layer. This property is also similar to behavior of an old Netscape 4.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits properties from its parent, {{domxref("HTMLElement")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("HTMLImageElement.Image()", "Image()")}}</dt>
+ <dd>The <code>Image()</code> constructor, taking two optional <code>unsigned</code> <code>long</code>, which are 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="Errors">Errors</h2>
+
+<p>If an error occurs while trying to load or render the image, and an {{htmlattrxref("onerror")}} event handler has been configured to handle the {{event("error")}} event, that event handler will get called. This can happen in a number of situations, including:</p>
+
+<ul>
+ <li>The {{htmlattrxref("src", "img")}} attribute is empty or <code>null</code>.</li>
+ <li>The specified <code>src</code> URL is the same as the URL of the page the user is currently on.</li>
+ <li>The specified image is corrupted in some way that prevents it from being loaded.</li>
+ <li>The specified image's metadata is corrupted in such a way that it's impossible to retrieve its dimensions, and no dimensions were specified in the <code>&lt;img&gt;</code> element's attributes.</li>
+ <li>The specified image is in a format not supported by the {{Glossary("user agent")}}.</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // use DOM <a href="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);
+
+// using first image in the document
+alert(document.images[0].src);
+</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('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td>
+   <td>{{Spec2('Referrer Policy')}}</td>
+   <td>Added the <code>referrerPolicy</code> property.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}</td>
+   <td>{{Spec2('CSSOM View')}}</td>
+   <td>Added the <code>x</code> and <code>y</code> properties.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>The following properties have been added: <code>srcset</code>, <code>currentSrc</code> and <code>sizes</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}</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="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>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>naturalWidth</code>, <code>naturalHeight</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5<sup>[4]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatChrome(34)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>21</td>
+   <td>{{CompatSafari(7.1)}}</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop(33)}}<sup>[3]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>x</code> and <code>y</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop(51)}}</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>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>{{CompatGeckoMobile(1.0)}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>lowSrc</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</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>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>9</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>crossorigin</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>complete</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>srcset</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>iOS 8</td>
+  </tr>
+  <tr>
+   <td><code>currentSrc </code>{{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(32)}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>sizes</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile(33)}}<sup>[3]</sup></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}}</td>
+   <td>14<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>referrerPolicy</code> {{experimental_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoMobile(50)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code> event handler</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(51)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Though, these <code>x</code> and <code>y</code> properties were removed in Gecko 7.0 {{geckoRelease("7.0")}} but later, they were restored in Gecko 14.0 {{geckoRelease("14.0")}} for compatibility reasons.</p>
+
+<p>[2] This feature is behind the <code>dom.image.srcset.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[3] This feature is behind the <code>dom.image.picture.enabled</code> preference, defaulting to <code>false</code>.</p>
+
+<p>[4] IE reports <code>false</code> for broken images.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The HTML element implementing this interface: {{HTMLElement("img")}}</li>
+</ul>
diff --git a/files/uk/web/api/index.html b/files/uk/web/api/index.html
new file mode 100644
index 0000000000..60714ca304
--- /dev/null
+++ b/files/uk/web/api/index.html
@@ -0,0 +1,26 @@
+---
+title: Список Web API
+slug: Web/API
+translation_of: Web/API
+---
+<p><span class="seoSummary">Під час написання коду розробнику доступна велика кількість Web API (Application Programming Interface, інтерфейс програмування застосунків). Нижче наведено перелік усіх API та інтерфейсів, які ви можете використовувати під час розробки веб-застосунку чи сайту.</span></p>
+
+<p>Web API зазвичай використовуються JavaScript, хоча і не обмежені саме цією мовою програмування.</p>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<p>Нижче наведено список усіх доступних API.</p>
+
+<div>{{ListGroups}}</div>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<p>Нижче наведено список усіх доступних інтерфейсів.</p>
+
+<div>{{APIListAlpha}}</div>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/Events">Довідкова інформація по подіям Web API</a></li>
+</ul>
diff --git a/files/uk/web/api/intersection_observer_api/index.html b/files/uk/web/api/intersection_observer_api/index.html
new file mode 100644
index 0000000000..49a9ce1d06
--- /dev/null
+++ b/files/uk/web/api/intersection_observer_api/index.html
@@ -0,0 +1,610 @@
+---
+title: Intersection Observer API
+slug: Web/API/Intersection_Observer_API
+tags:
+  - API
+  - Clipping
+  - Intersection
+  - Intersection Observer API
+  - IntersectionObserver
+  - Overview
+  - Performance
+  - Reference
+  - Web
+  - Швидкодія
+translation_of: Web/API/Intersection_Observer_API
+---
+<div>{{DefaultAPISidebar("Intersection Observer API")}}</div>
+
+<p class="summary"><strong>Intersection Observer API</strong> дозволяє веб-застосункам асинхронно стежити за зміною перетину елемента з його батьком чи областю видимості документа <span class="seoSummary">{{Glossary("viewport")}}</span>.</p>
+
+<p>Історично склалося так, що виявлення видимості окремого елемента чи видимості двох елементів по відношенню один до одного було непростою задачею. Варіанти вирішення цієї задачі були ненадійними і сповільнювали роботу браузера. На жаль, з "дорослішанням" вебу, необхідність у вирішенні цієї проблеми тільки зростала, з різних причин, таких як:</p>
+
+<ul>
+ <li>Відкладене завантаження зображень чи іншого контенту по мірі прокрутки сторінки.</li>
+ <li>Реалізація веб-сайтів з "безкінечним скролом", де контент підвантажується по мірі того як сторінка прокручується вниз, і користувачу не потрібно переключатися між сторінками.</li>
+ <li>Звіт про видимість реклами з метою порахувати доходи від неї.</li>
+ <li>Прийняття рішення, запускати чи ні якийсь процес чи анімацію в залежності від того, побачить користувач результат чи ні.</li>
+</ul>
+
+<p>Раніше реалізація виявлення пересічення елементів означала використання обробників подій і циклів, викликаючих методи типу {{domxref("Element.getBoundingClientRect()")}}, щоб зібрати необхідну інформацію про кожен зачеплений елемент. Оскільки весь цей код працює в основному потоці, виникають проблеми з продуктивністю.</p>
+
+<p>Розглянемо веб-сторінку з безкінечним скролом. На сторінці використовується бібліотека для керування періодично розміщуваною по всій сторінці рекламою, всюди анімована графіка, а також бібліотека для відображення спливаючих вікон. І всі ці речі використовують свої власні правила для визначення перетинів, і всі вони запущені в основному потоці. Автор сайту може навіть не підозрювати про цю проблему, а також може не знати, як працюють сторонні бібліотеки зсередини. В той же час користувач по ходу прокрутки сторінки стикається з тим, що робота сайта сповільнюється постійним спрацьовуванням виявлення перетинів, що в підсумку призводить до того, що користувач не задоволений браузером, сайтом і своїм комп'ютером.</p>
+
+<p><strong>Intersection Observer API</strong> дає можливість зареєструвати callback-функцію, яка виконається при перетині спостережуваним елементом кордонів іншого елемента (чи області видимості документа {{Glossary("viewport")}}), або при зміні величини перетину на визначене значення. Таким чином, більше немає необхідності вираховувати перетин елементів в основному потоці, і браузер може оптимізовувати ці процеси на свій погляд.</p>
+
+<p>Observer API не дозволить дізнатися точне число пікселів чи визначати конкретні пікселі в перетині; проте, його використання покриває найбільш поширені випадки, наприклад <em>"Якщо елементи перетинаються на N%, зроби це і це"</em>.</p>
+
+<h2 id="Основні_поняття_і_використання_Intersection_Observer_API">Основні поняття і використання <strong>Intersection Observer API </strong></h2>
+
+<p>Intersection Observer API дозволяє вказати функцію, яка буде викликана щоразу для елемента (target) при перетині його з областю видимості документа (по-замовчуванню) чи заданим елементом (root).</p>
+
+<p>Зазвичай, використовується відстеження перетину елементу з областю видимості (необхідно вказати  <code>null</code> в якості кореневого елементу).</p>
+
+<p>Чи використовуємо ми область видимості чи інший елемент в якості кореневого, API працює однаково, викликаючи задану вами функцію зворотнього виклику, щоразу, коли видимість цільового елементу змінюється так, що вона перетинає в потрібному ступені кореневий елемент.</p>
+
+<p>Ступінь перетину цільового і кореневого елементу задається в діапазоні від 0.0 до 1.0, де 1.0 це повний перетин цільовим елементом кордонів кореневого.</p>
+
+<h3 id="Створення_intersection_observer">Створення intersection observer</h3>
+
+<p>Для початку з допомогою конструктору потрібно створити об'єкт-спостерігач, вказати для нього функцію для виклику і налаштування відстеження:</p>
+
+<pre class="brush: js notranslate">let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+</pre>
+
+<p>Параметр <strong>threshold</strong> зі значенням <strong>1.0</strong> означає що функція буде викликана при 100% перетину об'єкта (за яким ми стежимо) з об'єктом root.</p>
+
+<h4 id="Налаштування_Intersection_observer">Налаштування Intersection observer</h4>
+
+<p>The <code>options</code> object passed into the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor let you control the circumstances under which the observer's callback is invoked. It has the following fields:</p>
+
+<dl>
+ <dt><code>root</code></dt>
+ <dd>Елемент який використовується в якості області перегляду для перевірки видимості цільового елементу. Повинен бути батьком цільового елементу. По замовчуванню використовується область видимості браузера якщо не визначений або має значення  <code>null</code>.</dd>
+ <dt><code>rootMargin</code></dt>
+ <dd>
+ <p>Відступи навколо root. Можуть мати значення як властивість css margin: <code>10px 20px 30px 40px"</code> (top, right, bottom, left). Значення можна задавати у відсотках. По замовчуванню всі параметри встановлені в нулі.</p>
+ </dd>
+ <dt><code>threshold</code></dt>
+ <dd>Число чи масив чисел, який вказує, при якому відсотку видимості цільового елементу повинен спрацювати callback. Наприклад, в цьому випадку callback функція буде викликатися при появі в зоні видимості кожні 25% цільового елементу: [0, 0.25, 0.5, 0.75, 1]. Дефолтне значення 0 (як тільки хоча б один піксель стане видимим, то буде викликаний колбек). Значення 1.0 означає, що увесь елемент повністю має стати видимим перед тим, як буде викликано колбек.</dd>
+</dl>
+
+<h4 id="Цільовий_елемент_який_буде_спостерігатися">Цільовий елемент, який буде спостерігатися</h4>
+
+<p>Після того, як ви створили спостерігача, вам потрібно дати йому цільовий елемент для перегляду:</p>
+
+<pre class="brush: js notranslate">let target = document.querySelector('#listItem');
+observer.observe(target);
+
+// the callback we setup for the observer will be executed now for the first time
+// it waits until we assign a target to our observer (even if the target is currently not visible)
+</pre>
+
+<p>Щоразу, коли ціль досягає порогового значення, вказаного для IntersectionObserver, викликається функція зворотнього виклику callback. Де callback отримує список об'єктів IntersectionObserverEntry і спостерігача:</p>
+
+<pre class="brush: js notranslate">let callback = (entries, observer) =&gt; {
+  entries.forEach(entry =&gt; {
+    // Each entry describes an intersection change for one observed
+    // target element:
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+</pre>
+
+<p>Зверніть увагу, що функція зворотнього виклику запускається в головному потоці і повинна виконуватися якнайшвидше, тому якщо щось забирає багато часу, то використовуйте {{domxref("Window.requestIdleCallback()")}}.</p>
+
+<p>Також зверніть увагу, що якщо ви вказали опцію <code>root</code>, цільовий елемент повинен бути потомком кореневого елементу. </p>
+
+<h3 id="How_intersection_is_calculated">How intersection is calculated</h3>
+
+<p>All areas considered by the Intersection Observer API are rectangles; elements which are irregularly shaped are considered as occupying the smallest rectangle which encloses all of the element's parts. Similarly, if the visible portion of an element is not rectangular, the element's intersection rectangle is construed to be the smallest rectangle that contains all the visible portions of the element.</p>
+
+<p>It's useful to understand a bit about how the various properties provided by {{domxref("IntersectionObserverEntry")}} describe an intersection.</p>
+
+<h4 id="The_intersection_root_and_root_margin">The intersection root and root margin</h4>
+
+<p>Before we can track the intersection of an element with a container, we need to know what that container is. That container is the <strong>intersection root</strong>, or <strong>root element</strong>. This can be either a specific element in the document which is an ancestor of the element to be observed, or <code>null</code> to use the document's viewport as the container.</p>
+
+<p>The <strong><dfn>root intersection rectangle</dfn></strong> is the rectangle used to check against the target or targets. This rectangle is determined like this:</p>
+
+<ul>
+ <li>If the intersection root is the implicit root (that is, the top-level {{domxref("Document")}}), the root intersection rectangle is the viewport's rectangle.</li>
+ <li>If the intersection root has an overflow clip, the root intersection rectangle is the root element's content area.</li>
+ <li>Otherwise, the root intersection rectangle is the intersection root's bounding client rectangle (as returned by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on it).</li>
+</ul>
+
+<p>The root intersection rectangle can be adjusted further by setting the <strong>root margin</strong>, <code>rootMargin</code>, when creating the {{domxref("IntersectionObserver")}}. The values in <code>rootMargin</code> define offsets added to each side of the intersection root's bounding box to create the final intersection root bounds (which are disclosed in {{domxref("IntersectionObserverEntry.rootBounds")}} when the callback is executed).</p>
+
+<h4 id="Thresholds">Thresholds</h4>
+
+<p>Rather than reporting every infinitesimal change in how much a target element is visible, the Intersection Observer API uses <strong>thresholds</strong>. When you create an observer, you can provide one or more numeric values representing percentages of the target element which are visible. Then, the API only reports changes to visibility which cross these thresholds.</p>
+
+<p>For example, if you want to be informed every time a target's visibility passes backward or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. You can tell which direction the visibility changed in (that is, whether the element became more visible or less visible) by checking the value of the {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} property on the {{domxref("IntersectionObserverEntry")}} passed into the callback function at the time of the visibility change. If <code>isIntersecting</code> is <code>true</code>, the target element has become at least as visible as the threshold that was passed. If it's <code>false</code>, the target is no longer as visible as the given threshold.</p>
+
+<p>To get a feeling for how thresholds work, try scrolling the box below around. Each colored box within it displays the percentage of itself that's visible in all four of its corners, so you can see these ratios change over time as you scroll the container. Each box has a different set of thresholds:</p>
+
+<ul>
+ <li>The first box has a threshold for each percentage point of visibility; that is, the {{domxref("IntersectionObserver.thresholds")}} array is <code>[0.00, 0.01, 0.02, ..., 0.99, 1.00]</code>.</li>
+ <li>The second box has a single threshold, at the 50% mark.</li>
+ <li>The third box has thresholds every 10% of visibility (0%, 10%, 20%, etc.).</li>
+ <li>The last box has thresholds each 25%.</li>
+</ul>
+
+<div class="hidden">
+<h5 id="Threshold_example">Threshold example</h5>
+
+<pre class="brush: html notranslate">&lt;template id="boxTemplate"&gt;
+  &lt;div class="sampleBox"&gt;
+    &lt;div class="label topLeft"&gt;&lt;/div&gt;
+    &lt;div class="label topRight"&gt;&lt;/div&gt;
+    &lt;div class="label bottomLeft"&gt;&lt;/div&gt;
+    &lt;div class="label bottomRight"&gt;&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/template&gt;
+
+&lt;main&gt;
+  &lt;div class="contents"&gt;
+    &lt;div class="wrapper"&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/main&gt;</pre>
+
+<pre class="brush: css notranslate">.contents {
+  position: absolute;
+  width: 700px;
+  height: 1725px;
+}
+
+.wrapper {
+  position: relative;
+  top: 600px;
+}
+
+.sampleBox {
+  position: relative;
+  left: 175px;
+  width: 150px;
+  background-color: rgb(245, 170, 140);
+  border: 2px solid rgb(201, 126, 17);
+  padding: 4px;
+  margin-bottom: 6px;
+}
+
+#box1 {
+  height: 200px;
+}
+
+#box2 {
+  height: 75px;
+}
+
+#box3 {
+  height: 150px;
+}
+
+#box4 {
+  height: 100px;
+}
+
+.label {
+  font: 14px "Open Sans", "Arial", sans-serif;
+  position: absolute;
+  margin: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.7);
+  width: 3em;
+  height: 18px;
+  padding: 2px;
+  text-align: center;
+}
+
+.topLeft {
+  left: 2px;
+  top: 2px;
+}
+
+.topRight {
+  right: 2px;
+  top: 2px;
+}
+
+.bottomLeft {
+  bottom: 2px;
+  left: 2px;
+}
+
+.bottomRight {
+  bottom: 2px;
+  right: 2px;
+}
+</pre>
+
+<pre class="brush: js notranslate">let observers = [];
+
+startup = () =&gt; {
+  let wrapper = document.querySelector(".wrapper");
+
+  // Options for the observers
+
+  let observerOptions = {
+    root: null,
+    rootMargin: "0px",
+    threshold: []
+  };
+
+  // An array of threshold sets for each of the boxes. The
+  // first box's thresholds are set programmatically
+  // since there will be so many of them (for each percentage
+  // point).
+
+  let thresholdSets = [
+    [],
+    [0.5],
+    [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
+    [0, 0.25, 0.5, 0.75, 1.0]
+  ];
+
+  for (let i=0; i&lt;=1.0; i+= 0.01) {
+    thresholdSets[0].push(i);
+  }
+
+  // Add each box, creating a new observer for each
+
+  for (let i=0; i&lt;4; i++) {
+    let template = document.querySelector("#boxTemplate").content.cloneNode(true);
+    let boxID = "box" + (i+1);
+    template.querySelector(".sampleBox").id = boxID;
+    wrapper.appendChild(document.importNode(template, true));
+
+    // Set up the observer for this box
+
+    observerOptions.threshold = thresholdSets[i];
+    observers[i] = new IntersectionObserver(intersectionCallback, observerOptions);
+    observers[i].observe(document.querySelector("#" + boxID));
+  }
+
+  // Scroll to the starting position
+
+  document.scrollingElement.scrollTop = wrapper.firstElementChild.getBoundingClientRect().top + window.scrollY;
+  document.scrollingElement.scrollLeft = 750;
+}
+
+intersectionCallback = (entries) =&gt; {
+  entries.forEach((entry) =&gt; {
+    let box = entry.target;
+    let visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
+
+    box.querySelector(".topLeft").innerHTML = visiblePct;
+    box.querySelector(".topRight").innerHTML = visiblePct;
+    box.querySelector(".bottomLeft").innerHTML = visiblePct;
+    box.querySelector(".bottomRight").innerHTML = visiblePct;
+  });
+}
+
+startup();
+</pre>
+</div>
+
+<p>{{EmbedLiveSample("Threshold_example", 500, 500)}}</p>
+
+<h4 id="Clipping_and_the_intersection_rectangle">Clipping and the intersection rectangle</h4>
+
+<p>The browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.</p>
+
+<ol>
+ <li>The target element's bounding rectangle (that is, the smallest rectangle that fully encloses the bounding boxes of every component that makes up the element) is obtained by calling {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} on the target. This is the largest the intersection rectangle may be. The remaining steps will remove any portions that don't intersect.</li>
+ <li>Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting <code>overflow</code> to anything but <code>visible</code> causes clipping to occur.</li>
+ <li>If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <code>&lt;iframe&gt;</code> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.</li>
+ <li>When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.</li>
+ <li>The resulting rectangle is then updated by intersecting it with the <a href="/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle">root intersection rectangle</a>.</li>
+ <li>This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.</li>
+</ol>
+
+<h3 id="Intersection_change_callbacks">Intersection change callbacks</h3>
+
+<p>When the amount of a target element which is visible within the root element crosses one of the visibility thresholds, the {{domxref("IntersectionObserver")}} object's callback is executed. The callback receives as input an array of all of <code>IntersectionObserverEntry</code> objects, one for each threshold which was crossed, and a reference to the <code>IntersectionObserver</code> object itself.</p>
+
+<p>Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred.</p>
+
+<p>The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%.</p>
+
+<pre class="brush: js notranslate">intersectionCallback(entries) =&gt; {
+  entries.forEach(entry =&gt; {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio &gt;= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+</pre>
+
+<h2 id="Інтерфейси">Інтерфейси</h2>
+
+<dl>
+ <dt>{{domxref("IntersectionObserver")}}</dt>
+ <dd>Основний інтерфейс для API Intersection Observer. Надає методи для створення і керування observer, який може спостерігати будь-яку кількість цільових елементів для однієї і тієї ж конфігурації перетину. Кожен observer може асинхронно спостерігати зміни в перетині між одним чи кількома цільовими елементами і спільним елементом-батьком чи з їх верхнім рівнем Document's viewport. Батько чи область перегляду згадується як <strong>root</strong>.</dd>
+ <dt>{{domxref("IntersectionObserverEntry")}}</dt>
+ <dd>
+ <p>Описує перетин між цільовим елементом і його кореневим контейнером в певний момент переходу. Об'єкти цього типу можуть бути отримані тільки двома способами: в якості вхідних даних для вашого зворотнього виклику <code>IntersectionObserver</code> чи шляхом виклику {{domxref("IntersectionObserver.takeRecords()")}}.</p>
+ </dd>
+</dl>
+
+<h2 id="A_simple_example">A simple example</h2>
+
+<p>This simple example causes a target element to change its color and transparency as it becomes more or less visible. At <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>, you can find a more extensive example showing how to time how long a set of elements (such as ads) are visible to the user and to react to that information by recording statistics or by updating elements..</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>The HTML for this example is very short, with a primary element which is the box that we'll be targeting (with the creative ID <code>"box"</code>) and some contents within the box.</p>
+
+<pre class="brush: html notranslate">&lt;div id="box"&gt;
+  &lt;div class="vertical"&gt;
+    Welcome to &lt;strong&gt;The Box!&lt;/strong&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<p>The CSS isn't terribly important for the purposes of this example; it lays out the element and establishes that the {{cssxref("background-color")}} and {{cssxref("border")}} attributes can participate in <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transitions</a>, which we'll use to affect the changes to the element as it becomes more or less obscured.</p>
+
+<pre class="brush: css notranslate">#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<p>Finally, let's take a look at the JavaScript code that uses the Intersection Observer API to make things happen.</p>
+
+<h4 id="Setting_up">Setting up</h4>
+
+<p>First, we need to prepare some variables and install the observer.</p>
+
+<pre class="brush: js notranslate">const numSteps = 20.0;
+
+let boxElement;
+let prevRatio = 0.0;
+let increasingColor = "rgba(40, 40, 190, ratio)";
+let decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up
+window.addEventListener("load", (event) =&gt; {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);</pre>
+
+<p>The constants and variables we set up here are:</p>
+
+<dl>
+ <dt><code>numSteps</code></dt>
+ <dd>A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.</dd>
+ <dt><code>prevRatio</code></dt>
+ <dd>This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.</dd>
+ <dt><code>increasingColor</code></dt>
+ <dd>A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.</dd>
+ <dt><code>decreasingColor</code></dt>
+ <dd>Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.</dd>
+</dl>
+
+<p>We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID <code>"box"</code> using {{domxref("Document.querySelector", "querySelector()")}}, then call the <code>createObserver()</code> method we'll create in a moment to handle building and installing the intersection observer.</p>
+
+<h4 id="Creating_the_intersection_observer">Creating the intersection observer</h4>
+
+<p>The <code>createObserver()</code> method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.</p>
+
+<pre class="brush: js notranslate">function createObserver() {
+  let observer;
+
+  let options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}</pre>
+
+<p>This begins by setting up an <code>options</code> object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so <code>root</code> is <code>null</code>. We need no margin, so the margin offset, <code>rootMargin</code>, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.</p>
+
+<p>The list of visibility ratio thresholds, <code>threshold</code>, is constructed by the function <code>buildThresholdList()</code>. The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.</p>
+
+<p>Once <code>options</code> is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, <code>handleIntersect()</code>, and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.</p>
+
+<p>We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling <code>observer.observe()</code> for each of those elements, if we wanted to do so.</p>
+
+<h4 id="Building_the_array_of_threshold_ratios">Building the array of threshold ratios</h4>
+
+<p>The <code>buildThresholdList()</code> function, which builds the list of thresholds, looks like this:</p>
+
+<pre class="brush: js notranslate">function buildThresholdList() {
+  let thresholds = [];
+  let numSteps = 20;
+
+  for (let i=1.0; i&lt;=numSteps; i++) {
+    let ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}</pre>
+
+<p>This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value <code>i/numSteps</code> onto the <code>thresholds</code> array for each integer <code>i</code> between 1 and <code>numSteps</code>. It also pushes 0 to include that value. The result, given the default value of <code>numSteps</code> (20), is the following list of thresholds:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>#</th>
+   <th>Ratio</th>
+   <th>#</th>
+   <th>Ratio</th>
+  </tr>
+  <tr>
+   <th>1</th>
+   <td>0.05</td>
+   <th>11</th>
+   <td>0.55</td>
+  </tr>
+  <tr>
+   <th>2</th>
+   <td>0.1</td>
+   <th>12</th>
+   <td>0.6</td>
+  </tr>
+  <tr>
+   <th>3</th>
+   <td>0.15</td>
+   <th>13</th>
+   <td>0.65</td>
+  </tr>
+  <tr>
+   <th>4</th>
+   <td>0.2</td>
+   <th>14</th>
+   <td>0.7</td>
+  </tr>
+  <tr>
+   <th>5</th>
+   <td>0.25</td>
+   <th>15</th>
+   <td>0.75</td>
+  </tr>
+  <tr>
+   <th>6</th>
+   <td>0.3</td>
+   <th>16</th>
+   <td>0.8</td>
+  </tr>
+  <tr>
+   <th>7</th>
+   <td>0.35</td>
+   <th>17</th>
+   <td>0.85</td>
+  </tr>
+  <tr>
+   <th>8</th>
+   <td>0.4</td>
+   <th>18</th>
+   <td>0.9</td>
+  </tr>
+  <tr>
+   <th>9</th>
+   <td>0.45</td>
+   <th>19</th>
+   <td>0.95</td>
+  </tr>
+  <tr>
+   <th>10</th>
+   <td>0.5</td>
+   <th>20</th>
+   <td>1.0</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.</p>
+
+<h4 id="Handling_intersection_changes">Handling intersection changes</h4>
+
+<p>When the browser detects that the target element (in our case, the one with the ID <code>"box"</code>) has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, <code>handleIntersect()</code>:</p>
+
+<pre class="brush: js notranslate">function handleIntersect(entries, observer) {
+  entries.forEach((entry) =&gt; {
+    if (entry.intersectionRatio &gt; prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}</pre>
+
+<p>For each {{domxref("IntersectionObserverEntry")}} in the list <code>entries</code>, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in <code>increasingColor</code> (remember, it's <code>"rgba(40, 40, 190, ratio)"</code>), replaces the word "ratio" with the entry's <code>intersectionRatio</code>. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.</p>
+
+<p>Similarly, if the <code>intersectionRatio</code> is going down, we use the string <code>decreasingColor</code> and replace the word "ratio" in that with the <code>intersectionRatio</code> before setting the target element's <code>background-color</code>.</p>
+
+<p>Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable <code>prevRatio</code>.</p>
+
+<h3 id="Result">Result</h3>
+
+<p>Below is the resulting content. Scroll this page up and down and notice how the appearance of the box changes as you do so.</p>
+
+<p>{{EmbedLiveSample('A_simple_example', 400, 400)}}</p>
+
+<p>There's an even more extensive example at <a href="/en-US/docs/Web/API/Intersection_Observer_API/Timing_element_visibility">Timing element visibility with the Intersection Observer API</a>.</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('IntersectionObserver')}}</td>
+   <td>{{Spec2('IntersectionObserver')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.IntersectionObserver")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="https://github.com/w3c/IntersectionObserver">Intersection Observer polyfill</a></li>
+ <li><a href="/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>
+
+<div id="gtx-trans" style="position: absolute; left: 22px; top: 11013px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/uk/web/api/mediaquerylist/addlistener/index.html b/files/uk/web/api/mediaquerylist/addlistener/index.html
new file mode 100644
index 0000000000..f908e9cf49
--- /dev/null
+++ b/files/uk/web/api/mediaquerylist/addlistener/index.html
@@ -0,0 +1,82 @@
+---
+title: MediaQueryList.addListener()
+slug: Web/API/MediaQueryList/addListener
+tags:
+  - API
+  - MediaQueryList
+  - Довідка
+  - Медіа-запити
+  - метод
+translation_of: Web/API/MediaQueryList/addListener
+---
+<div>{{APIRef("CSSOM View")}}</div>
+
+<p>Метод <code><strong>addListener()</strong></code> інтерфейсу {{domxref("MediaQueryList")}} додає слухача до <code>MediaQueryListener</code>, який викличе вказану функцію щойно стан медіа-запиту зміниться.</p>
+
+<p>Цей метод є простим скороченням для {{domxref("EventTarget.addEventListener()")}} задля зворотньої сумісності. В старших веб-переглядачах доводиться використовувати <code>addListener</code> замість <code>addEventListener</code>, тоді як в нових <code>MediaQueryList</code> просто успадковує <code>EventTarget</code>.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>MediaQueryList.addListener(func)</em></pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>Функція-слухач, яку буде викликано щораз, як зміниться стан медіа-запиту. В первинній реалізації слухачем був об'єкт {{domxref("MediaQueryListListener")}}, а в новій вже використано звичайний механізм подій, тож слухач — це звичайна функція, а об'єкт події {{domxref("MediaQueryListEvent")}} успадковано від {{domxref("Event")}}.</dd>
+</dl>
+
+<h3 id="Вертає">Вертає</h3>
+
+<p>Нічого.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    // Вікно є вужчим за 600 пікселів (або ж точно 600)
+    para.textContent = 'Маємо вузький екран, щонайбільше 600px';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    // Вікно є ширшим за 600 пікселів
+    para.textContent = 'Маємо широкий екран — понад 600px завширшки';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<h2 id="Специфікації">Специфікації</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Специфікація</th>
+   <th>Статус</th>
+   <th>Примітка</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Початкова виознака</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.MediaQueryList.addListener")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/CSS/Media_queries">Медіа-запити</a></li>
+ <li><a href="/uk/docs/CSS/Using_media_queries_from_code">Використання медіа-запитів у коді</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryList")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/mediaquerylist/index.html b/files/uk/web/api/mediaquerylist/index.html
new file mode 100644
index 0000000000..7e22ce652e
--- /dev/null
+++ b/files/uk/web/api/mediaquerylist/index.html
@@ -0,0 +1,109 @@
+---
+title: MediaQueryList
+slug: Web/API/MediaQueryList
+tags:
+  - API
+  - CSSOM View
+  - Interface
+  - MediaQueryList
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+translation_of: Web/API/MediaQueryList
+---
+<div>{{APIRef("CSSOM View")}} {{SeeCompatTable}}</div>
+
+<p>A <strong><code>MediaQueryList</code></strong> object stores information on a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> applied to a document, and handles sending notifications to listeners when the media query state change (i.e. when the media query test starts or stops evaluating to <code>true</code>).</p>
+
+<p>This makes it possible to observe a document to detect when its media queries change, instead of polling the values periodically, and allows you to programmatically make changes to a document based on media query status.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>The new version of the <code>MediaQueryList</code> interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.matches")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that returns <code>true</code> if the {{domxref("document")}} currently matches the media query list, or <code>false</code> if not.</dd>
+ <dt>{{domxref("MediaQueryList.media")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("DOMString")}} representing a serialized media query.</dd>
+</dl>
+
+<h3 id="Event_handlers">Event handlers</h3>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.onchange")}}</dt>
+ <dd>An event handler property representing a function that is invoked when the {{event("change")}} event fires, i.e when the status of media query support changes. The event object is a {{domxref("MediaQueryListEvent")}} instance, which is recognised as a <code>MediaListQuery</code> instance in older browsers, for backwards compatibility purposes.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The new version of the <code>MediaQueryList</code> interface inherits methods from its parent interface, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("MediaQueryList.addListener()")}}</dt>
+ <dd>Adds a listener to the <code>MediaQueryListener</code> that will run a custom callback function in response to the media query status changing. This is basically an alias for {{domxref("EventTarget.addEventListener()")}}, for backwards compatibility purposes.</dd>
+ <dt>{{domxref("MediaQueryList.removeListener()")}}</dt>
+ <dd>Removes a listener from the <code>MediaQueryListener</code>. This is basically an alias for {{domxref("EventTarget.removeEventListener()")}}, for backwards compatibility purposes.</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This simple example creates a <code>MediaQueryList</code> and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page.</p>
+
+<pre class="brush: js">var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);</pre>
+
+<div class="note">
+<p><strong>Note</strong>: You can find this example on GitHub (see the <a href="https://github.com/mdn/dom-examples/blob/master/mediaquerylist/index.html">source code</a>, and also see it <a href="https://mdn.github.io/dom-examples/mediaquerylist/index.html">running live</a>).</p>
+</div>
+
+<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 View", "#the-mediaquerylist-interface", "MediaQueryList")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.MediaQueryList")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li>
+ <li><a href="/en-US/docs/CSS/Using_media_queries_from_code">Using media queries from code</a></li>
+ <li>{{domxref("window.matchMedia()")}}</li>
+ <li>{{domxref("MediaQueryListListener")}}</li>
+ <li>{{domxref("MediaQueryListEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/network_information_api/index.html b/files/uk/web/api/network_information_api/index.html
new file mode 100644
index 0000000000..0afabb53ad
--- /dev/null
+++ b/files/uk/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
+---
+<p>{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}</p>
+
+<p>Network Information API надає інформацію про мережеве підключення в загальних термінах ('wifi', 'cellular' тощо). Ця інформація може бути використана для вибору якості і розміру вмісту на основі підключення користувача. Весь API складається з інтерфейсу {{domxref ("NetworkInformation")}} та однієї властивості до інтерфейсу {{domxref ("Navigator")}}: {{domxref ("Navigator.connection")}} .</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<h3 id="Виявлення_зміни_підключення"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Виявлення зміни підключення</span></span></span></h3>
+
+<p><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>В цьому прикладі ми стежимо за змінами підключення користувача.</span></span></span></p>
+
+<pre class="brush: js notranslate">var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var type = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Тип підключення було змінено з " + type + " на " + connection.effectiveType);
+  type = connection.effectiveType;
+}
+
+connection.addEventListener('change', updateConnectionStatus);
+</pre>
+
+<h3 id="Попереднє_завантаження_великих_ресурсів"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Попереднє завантаження великих ресурсів</span></span></span></h3>
+
+<p>Об'єкт підключення {{domxref ("Navigator.connection")}} корисний для визначення необхідності попереднього завантажування ресурсів, що мають великий розмір. Перевірка типу підключення буде викликана незабаром після завантаження сторінки. Якщо з'єднання визначено як стільниковий зв’язок, то прапорець <code>preloadVideo</code> буде встановлено у значення <code>false</code>. Для простоти та наочності цей приклад перевіряє лише один тип підключення. На практиці використовується оператор switch або інший метод для перевірки всіх можливих значень {{domxref ("NetworkInformation.type")}}. Незалежно від значення <code>type</code> ви можете оцінити швидкість з'єднання через властивість {{domxref ("NetworkInformation.effectiveType")}}.</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>Надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує сповіщення, якщо тип з’єднання змінюється. Інтерфейс <code>NetworkInformation</code>  не може бути створено як екземпляр. Натомість доступ до нього здійснюється через інтерфейс {{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>Initial specification</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+<h3 id="NetworkInformation">NetworkInformation</h3>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h3 id="Navigator.connection">Navigator.connection</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="Дивіться_також">Дивіться також</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/uk/web/api/networkinformation/index.html b/files/uk/web/api/networkinformation/index.html
new file mode 100644
index 0000000000..f1bff837d6
--- /dev/null
+++ b/files/uk/web/api/networkinformation/index.html
@@ -0,0 +1,88 @@
+---
+title: NetworkInformation
+slug: Web/API/NetworkInformation
+translation_of: Web/API/NetworkInformation
+---
+<div>{{APIRef("Network Information API")}}{{SeeCompatTable}}</div>
+
+<p>Інтерфейс <code><strong>NetworkInformation</strong></code> надає інформацію про з’єднання, яке пристрій використовує для зв’язку з мережею, та забезпечує засоби для сповіщень, якщо тип підключення змінюється. Інтерфейс <code>NetworkInformation</code> не може бути створено як екземпляр. Натомість доступ до нього здійснюється через властивість з'єднання інтерфейсу {{domxref("Navigator")}}.</p>
+
+<p>{{AvailableInWorkers}}</p>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dd>
+ <ul>
+ </ul>
+ </dd>
+ <dt>{{domxref("NetworkInformation.downlink")}} {{readonlyinline}}</dt>
+ <dd>Повертає приблизне значення ефективної пропускної здатності в мегабітах в секунду. Значення округлено до найближчого кратного до 25 кілобіт на секунду.</dd>
+ <dt>{{domxref("NetworkInformation.downlinkMax")}} {{readonlyinline}}</dt>
+ <dd>Повертає максимальну швидкість, в мегабітах в секунду (Mbps), для поточного з'єднання.</dd>
+ <dt>{{domxref("NetworkInformation.effectiveType")}} {{readonlyinline}}</dt>
+ <dd>Повертає діючий тип з'єднання в значенні 'slow-2g', '2g', '3g', або '4g'.</dd>
+ <dt>{{domxref("NetworkInformation.rtt")}} {{readonlyinline}}</dt>
+ <dd>Повертає оцінку часу зворотного зв'язку (RTT) поточного з'єднання, округлену до найближчого кратного до 25 мілісекунд.</dd>
+ <dt>{{domxref("NetworkInformation.saveData")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>true</code>, якщо користувач встановив параметр зменшеного використання даних.</dd>
+ <dt>{{domxref("NetworkInformation.type")}} {{readonlyinline}}</dt>
+ <dd>Повертає тип підключення, яке використовує пристрій для зв’язку з мережею. Існуючі значення:
+ <ul>
+  <li><code>bluetooth</code></li>
+  <li><code>cellular</code></li>
+  <li><code>ethernet</code></li>
+  <li><code>none</code></li>
+  <li><code>wifi</code></li>
+  <li><code>wimax</code></li>
+  <li><code>other</code></li>
+  <li><code>unknown</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h3 id="Обробники_подій"><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Обробники подій</span></span></span></h3>
+
+<dl>
+ <dt>{{domxref("NetworkInformation.onchange")}}</dt>
+ <dd>Подія, яка запускається, коли змінюється інформація про з’єднання, і {{event("change")}} запускається на цьому об’єкті.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em><span class="VIiyi" lang="uk"><span class="ChMk0b JLqJ4b"><span>Цей інтерфейс також успадковує властивості свого батьківського елементу</span></span></span>, {{domxref("EventTarget")}}.</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('Network Information', '#networkinformation-interface', 'NetworkInformation')}}</td>
+   <td>{{Spec2('Network Information')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність">Сумісність</h2>
+
+
+
+<p>{{Compat("api.NetworkInformation")}}</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Network_Information_API">Network Information API</a></li>
+ <li><a href="/en-US/docs/Online_and_offline_events">Online and offline events</a></li>
+ <li>Реалізація інтерфейсу в {{domxref("Navigator")}}.</li>
+</ul>
diff --git a/files/uk/web/api/node/contains/index.html b/files/uk/web/api/node/contains/index.html
new file mode 100644
index 0000000000..db187f1462
--- /dev/null
+++ b/files/uk/web/api/node/contains/index.html
@@ -0,0 +1,112 @@
+---
+title: Node.contains()
+slug: Web/API/Node/contains
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Вузол
+  - метод
+translation_of: Web/API/Node/contains
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>Метод <strong><code>Node.contains()</code></strong> повертає значення {{jsxref("Boolean")}}, яке вказує, чи переданий вузол є нащадком заданого вузла чи ні.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Ця функція перевіряє, чи елемент знаходиться в тілі сторінки. А також визначає чи тіло сторінки включає само себе. Якщо включає само себе, то відповідно метод <code>isInPage</code> буде повертати <code>false</code>. В іншому випадку буде повертатися <code>true</code> або<code> false </code>в залежності від того, чи елемент існує всередині тіла сторінки.</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>Початкове визначення</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("9.0")}}</td>
+   <td>5.0<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>3.0<sup>[2]</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 Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </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>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">лише підтримує метод <code>contains()</code> для елементів</a>.</p>
+
+<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&amp;lpg=PA299&amp;ots=4XRWUISZVr&amp;dq=safari+node+contains+professional+javascript&amp;pg=PA299&amp;hl=de#v=onepage&amp;q=safari%20node%20contains%20professional%20javascript&amp;f=false">реалізувала метод <code>contains()</code> неправильно</a>.</p>
+
+<h2 id="Дивитися_також">Дивитися також</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/uk/web/api/node/index.html b/files/uk/web/api/node/index.html
new file mode 100644
index 0000000000..9fc5be13f4
--- /dev/null
+++ b/files/uk/web/api/node/index.html
@@ -0,0 +1,508 @@
+---
+title: Node
+slug: Web/API/Node
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - Interface
+  - NeedsTranslation
+  - Node
+  - Reference
+  - TopicStub
+translation_of: Web/API/Node
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>A <strong><code>Node</code></strong> is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.</p>
+
+<p>The following interfaces all inherit from <code>Node</code> its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p>
+
+<p>These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>Inherits properties from its parents {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last <code>'/'</code>.</dd>
+ <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}</dt>
+ <dd>(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.</dd>
+ <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt>
+ <dd>Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the <code>Node</code> change, the {{domxref("NodeList")}} object is automatically updated.</dd>
+ <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the first direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the last direct child node of the node, or <code>null</code> if the node has no child.</dd>
+ <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>The namespace URI of this node, or <code>null</code> if it is no namespace.
+ <div class="note">
+ <p><strong>Note:</strong> In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> namespace in both HTML and XML trees. {{gecko_minversion_inline("1.9.2")}}</p>
+ </div>
+ </dd>
+ <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the next node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("DOMString")}} containing the name of the <code>Node</code>. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like <code>'audio'</code> for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the <code>'#text'</code> string, or a {{domxref("Document")}} node will have the <code>'#document'</code> string.</dd>
+ <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}</dt>
+ <dd>A {{ Interface("nsIPrincipal") }} representing the node principal.</dd>
+ <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt>
+ <dd>Returns an <code>unsigned short</code> representing the type of the node. Possible values are:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <th scope="col">Name</th>
+    <th scope="col">Value</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>Returns / Sets the value of the current node</dd>
+ <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt>
+ <dd>Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt>
+ <dd>Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns <code>null</code>.</dd>
+ <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt>
+ <dd>Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or <code>null</code> if no prefix is specified.</dd>
+ <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} representing the previous node in the tree, or <code>null</code> if there isn't such node.</dd>
+ <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}}</dt>
+ <dd>Returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree. This is found by walking backward along {{domxref("Node.parentNode")}} until the top is reached.</dd>
+ <dt>{{domxref("Node.textContent")}}</dt>
+ <dd>Returns / Sets the textual content of an element and all its descendants.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>Inherits methods from its parent, {{domxref("EventTarget")}}</em>.<sup>[1]</sup></p>
+
+<dl>
+ <dt>{{domxref("Node.appendChild()")}}</dt>
+ <dd>Adds the specified childNode argument as the last child to the current node.<br>
+ If the argument referenced an existing node on the DOM tree, the node will be detached from its current position and attached at the new position.</dd>
+ <dt>{{domxref("Node.cloneNode()")}}</dt>
+ <dd>Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.</dd>
+ <dt>{{domxref("Node.compareDocumentPosition()")}}</dt>
+ <dt>{{domxref("Node.contains()")}}</dt>
+ <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt>
+ <dt>{{domxref("Node.getRootNode()")}}</dt>
+ <dd>Returns the context objects root which optionally includes the shadow root if it is available. </dd>
+ <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to get some {{domxref("DOMUserData")}} from the node.</dd>
+ <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any attributes, or not.</dd>
+ <dt>{{domxref("Node.hasChildNodes()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if the element has any child nodes, or not.</dd>
+ <dt>{{domxref("Node.insertBefore()")}}</dt>
+ <dd>Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.</dd>
+ <dt>{{domxref("Node.isDefaultNamespace()")}}</dt>
+ <dt>{{domxref("Node.isEqualNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} which indicates whether or not two nodes are of the same type and all their defining data points match.</dd>
+ <dt>{{domxref("Node.isSameNode()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} value indicating whether or not the two nodes are the same (that is, they reference the same object).</dd>
+ <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.</dd>
+ <dt>{{domxref("Node.lookupPrefix()")}}</dt>
+ <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt>
+ <dt>{{domxref("Node.normalize()")}}</dt>
+ <dd>Clean up all the text nodes under this element (merge adjacent, remove empty).</dd>
+ <dt>{{domxref("Node.removeChild()")}}</dt>
+ <dd>Removes a child node from the current element, which must be a child of the current node.</dd>
+ <dt>{{domxref("Node.replaceChild()")}}</dt>
+ <dd>Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.</dd>
+ <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt>
+ <dd>Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Browse_all_child_nodes">Browse all child nodes</h3>
+
+<p>The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).</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="Syntax">Syntax</h4>
+
+<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre>
+
+<h4 id="Description">Description</h4>
+
+<p>Recursively cycle all child nodes of <code>parentNode</code> and <code>parentNode</code> itself and execute the <code>callbackFunction</code> upon them as <a href="/en-US/docs/JavaScript/Reference/Operators/this" title="en-US/docs/JavaScript/Reference/Operators/this"><code>this</code></a> objects.</p>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>parentNode</code></dt>
+ <dd>The parent node (<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>The callback function (<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="Sample_usage">Sample usage</h4>
+
+<p>The following example send to the <code>console.log</code> the text content of the body:</p>
+
+<pre class="brush: js">function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};</pre>
+
+<h3 id="Remove_all_children_nested_within_a_node">Remove all children nested within a node</h3>
+
+<pre class="brush: js">Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};</pre>
+
+<h4 id="Sample_usage_2">Sample usage</h4>
+
+<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();</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', '#interface-node', 'Node')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Removed the following properties: <code>attributes</code>, <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Removed the following methods: <code>isSupported()</code>, <code>hasAttributes()</code>, <code>getFeature()</code>, <code>setUserData()</code>, and <code>getUserData()</code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>The methods <code>insertBefore()</code>, <code>replaceChild()</code>, <code>removeChild()</code>, and <code>appendChild()</code> returns one more kind of error (<code>NOT_SUPPORTED_ERR</code>) if called on a {{domxref("Document")}}.<br>
+    The <code>normalize()</code> method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.<br>
+    Added the following methods: <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>
+    Added the following properties: <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>The <code>ownerDocument</code> property was slightly modified so that {{domxref("DocumentFragment")}} also returns <code>null</code>.<br>
+    Added the following properties: <code>namespaceURI</code>, <code>prefix</code>, and <code>localName</code>.<br>
+    Added the following methods: <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>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<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}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{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>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    Removed in {{CompatGeckoDesktop("10")}}<br>
+    Returned in {{CompatGeckoDesktop("48")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+   </td><td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>CompatGeckoDesktop(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}46.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0<sup>[3]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode</code></td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(41)}}</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 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}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td><code>getFeature()</code>{{obsolete_inline}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("1.0")}}<br>
+    {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</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>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>isSameNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>
+    <p>{{CompatGeckoDesktop("1.0")}}<br>
+     Removed in {{CompatGeckoDesktop("10")}}<br>
+     Returned in {{CompatGeckoDesktop("48")}}</p>
+   </td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><code>isSupported()</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>attributes</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>rootNode()</code></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile(48)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>namespaceURI</code>, <code>localName</code>, <code>prefix</code> {{obsolete_inline}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}<br>
+    {{CompatNo}}48.0[3]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>getRootNode()</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOperaMobile(41)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(54.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] WebKit and old versions of Blink incorrectly do not make <code>Node</code> inherit from {{domxref("EventTarget")}}.</p>
+
+<p>[2] In Gecko 22.0 {{geckoRelease("22.0")}} the <code>attributes</code> property was moved to {{domxref("Element")}}.</p>
+
+<p>[3] The properties were moved to the {{domxref("Element")}} and {{domxref("Attr")}} APIs according to the DOM4 standard.</p>
diff --git a/files/uk/web/api/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/index.html
new file mode 100644
index 0000000000..897a97a97a
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/index.html
@@ -0,0 +1,95 @@
+---
+title: PromiseRejectionEvent
+slug: Web/API/PromiseRejectionEvent
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - JavaScript
+  - PromiseRejectionEvent
+  - Promises
+  - Reference
+  - events
+  - події
+  - проміси
+translation_of: Web/API/PromiseRejectionEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Інтерфейс <strong><code>PromiseRejectionEvent</code></strong> відображає події, які надсилаються у глобальний контекст скрипта, коли об'єкти JavaScript {{jsxref("Promise")}} відхиляються.</span> Ці події особливо корисні для цілей телеметрії та налагоджування.</p>
+
+<p>Щоб дізнатись більше про події відхилення промісів, дивіться {{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("PromiseRejectionEvent.PromiseRejectionEvent", "PromiseRejectionEvent()")}}</dt>
+ <dd>Створює подію <code>PromiseRejectionEvent</code>, отримуючи тип події (<code><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></code> або <code><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></code>) та інші деталі.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em>Також успадковує властивості від батьківського інтерфейсу {{domxref("Event")}}</em>.</p>
+
+<dl>
+ <dt>{{domxref("PromiseRejectionEvent.promise")}} {{readonlyInline}}</dt>
+ <dd>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений.</dd>
+ <dt>{{domxref("PromiseRejectionEvent.reason")}} {{readOnlyInline}}</dt>
+ <dd>Значення чи {{jsxref("Object","об'єкт")}}, що вказує причину відхилення проміса, як вона передається у {{jsxref("Promise.відхилено","Promise.reject()")}}.</dd>
+</dl>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em>Цей інтерфейс не має унікальних методів; він успадковує методи від батьківського інтерфейсу {{domxref("Event")}}</em>.</p>
+
+<h2 id="Події">Події</h2>
+
+<dl>
+ <dt><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></dt>
+ <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, і після того, як відхилення було оброблене кодом для обробки відхилення проміса.</dd>
+ <dt><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></dt>
+ <dd>Запускається, коли об'єкт JavaScript {{jsxref("Promise")}} відхиляється, але немає обробника, який зреагував би на відхилення.</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей простий приклад перехоплює необроблені відхилення промісів та логує їх з метою відлагодження.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</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#promiserejectionevent', 'PromiseRejectionEvent')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/uk/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("WindowEventHandlers.onrejectionhandled")}}</li>
+ <li>{{domxref("WindowEventHandlers.onunhandledrejection")}}</li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/promise/index.html b/files/uk/web/api/promiserejectionevent/promise/index.html
new file mode 100644
index 0000000000..a9874092ad
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/promise/index.html
@@ -0,0 +1,76 @@
+---
+title: PromiseRejectionEvent.promise
+slug: Web/API/PromiseRejectionEvent/promise
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - Властивість
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/promise
+---
+<div>{{APIRef("HTML DOM") }}</div>
+
+<p>Властивість <code><strong>promise</strong></code> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, вказує об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений. Ви можете дослідити властивість події {{domxref("PromiseRejectionEvent.reason")}}, щоб дізнатись, чому проміс був відхилений.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>promise</em> = <em>PromiseRejectionEvent</em>.promise</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Об'єкт JavaScript {{jsxref("Promise")}}, який був відхилений, і чиє відхилення пройшло необробленим.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад прослуховує необроблені проміси, і, якщо властивість {{domxref("PromiseRejectionEvent.reason", "reason")}} є об'єктом з полем <code>code</code>, що містить текст "Модуль не готовий", він встановлює функцію зворотного виклику, що виконується під час неактивності переглядача, яка буде повторно запускати невиконану задачу, щоб виконати її правильно.</p>
+
+<p>Метод {{domxref("event.preventDefault()")}} викликається, щоб зазначити, що проміс тепер був оброблений.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(event) {
+  if (event.reason.code &amp;&amp; event.reason.code == "Модуль не готовий") {
+    window.requestIdleCallback(function(deadline) {
+      loadModule(event.reason.moduleName)
+        .then(performStartup);
+    });
+    event.preventDefault();
+  }
+}</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-promiserejectionevent-promise', 'PromiseRejectionEvent.promise')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.promise")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html
new file mode 100644
index 0000000000..a7ae3616a8
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/promiserejectionevent/index.html
@@ -0,0 +1,89 @@
+---
+title: PromiseRejectionEvent()
+slug: Web/API/PromiseRejectionEvent/PromiseRejectionEvent
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - Конструктор
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/PromiseRejectionEvent
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Конструктор <code><strong>PromiseRejectionEvent()</strong></code> створює та вертає {{domxref("PromiseRejectionEvent")}}, що відображає події, запущені, коли об'єкт JavaScript {{jsxref("Promise")}} був відхилений.</span> З подіями відхилення промісів стає можливим виявляти та повідомляти про проміси, чиє неуспішне завершення пройшло непоміченим. Також стає легше писати глобальні обробники для помилок.</p>
+
+<p>Існують два типи подій <code>PromiseRejectionEvent</code>: <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> надсилається середовищем виконання JavaScript, коли проміс був відхилений, але відхилення не було оброблене. Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a> видається, якщо проміс був відхилений, але відхилення було перехоплене обробником відхилень.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>promiseRejectionEvent</em> = PromiseRejectionEvent(<em>type</em>, <em>options</em>);
+</pre>
+
+<h3 id="Параметри">Параметри</h3>
+
+<p><em>Конструктор <code>PromiseRejectionEvent()</code></em><em> також успадковує параметри від {{domxref("Event.Event", "Event()")}}.</em></p>
+
+<dl>
+ <dt><code>type</code></dt>
+ <dd>Рядок, що відображає ім'я типу події <code>PromiseRejectionEvent</code>. Він чутливий до регістру, і повинен мати значення <a href="/uk/docs/Web/API/Window/rejectionhandled_event">"rejectionhandled"</a> або <a href="/uk/docs/Web/API/Window/unhandledrejection_event">"unhandledrejection"</a>, щоб відповідати іменам можливих (не штучно створених) подій {{domxref("PromiseRejectionEvent")}}, які можуть запустити програмні агенти).</dd>
+ <dt><code>options</code></dt>
+ <dd>{{jsxref("Object","Об'єкт")}}, що визначає деталі відхилення:
+ <dl>
+  <dt><code>promise</code></dt>
+  <dd>{{jsxref("Promise","Проміс")}}, що був відхилений.</dd>
+  <dt><code>reason</code></dt>
+  <dd>Будь-яке значення чи {{jsxref("Object","об'єкт")}}, що відображає причину відхилення проміса. Це може бути що завгодно, від числового коду помилки, до помилки {{domxref("DOMString")}} та об'єкта, який містить детальну інформацію, що описує ситуацію, яка призвела до відхилення проміса.</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p>Нова подія <code>PromiseRejectionEvent</code>, що має конфігурацію, визначену параметрами.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад створює нову подію <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a> для проміса <code>myPromise</code> з причиною-рядком "Мій будинок горить". Параметр <code>reason</code> (причина) міг так само легко бути числом, чи навіть об'єктом з детальною інформацією, що містить адрес будинку, чи опис того, наскільки сильний вогонь, і номер телефону людини, яку потрібно повідомити.</p>
+
+<pre class="brush: js">let myRejectionEvent = new PromiseRejectionEvent("unhandledrejection", {
+  promise : myPromise,
+  reason : "Мій будинок горить"
+});</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', '#the-promiserejectionevent-interface', 'the PromiseRejectionEvent interface')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.PromiseRejectionEvent")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Archive/Add-ons/Techniques/Promises">Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Використання промісів</a></li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+</ul>
diff --git a/files/uk/web/api/promiserejectionevent/reason/index.html b/files/uk/web/api/promiserejectionevent/reason/index.html
new file mode 100644
index 0000000000..b12a2480c1
--- /dev/null
+++ b/files/uk/web/api/promiserejectionevent/reason/index.html
@@ -0,0 +1,66 @@
+---
+title: PromiseRejectionEvent.reason
+slug: Web/API/PromiseRejectionEvent/reason
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - PromiseRejectionEvent
+  - reason
+  - Властивість
+  - Проміс
+  - події
+translation_of: Web/API/PromiseRejectionEvent/reason
+---
+<p>{{APIRef("HTML DOM")}}</p>
+
+<p>Властивість <strong><code>reason</code></strong> інтерфейсу {{domxref("PromiseRejectionEvent")}}, доступна лише для читання, є будь-яким значенням JavaScript чи {{jsxref("Object","об'єктом")}}, що надає причину, яка передається у {{jsxref("Promise.відхилено","Promise.reject()")}}. Це, в теорії, надає інформацію щодо причини відхилення проміса.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><em>reason</em> = <em>PromiseRejectionEvent</em>.reason</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Значення або об'єкт, що надає інформацію, якою ви можете скористатись, щоб зрозуміти, чому був відхилений проміс. Це може бути що завгодно, від коду помилки до об'єкта з текстом, посиланнями та всім, що ви захочете в нього додати.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</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-promiserejectionevent-reason', 'PromiseRejectionEvent.reason')}}</td>
+   <td>{{ Spec2('HTML WHATWG') }}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.PromiseRejectionEvent.reason")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li><a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li><a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a></li>
+</ul>
diff --git a/files/uk/web/api/svganimatedstring/animval/index.html b/files/uk/web/api/svganimatedstring/animval/index.html
new file mode 100644
index 0000000000..46f2c2a3d2
--- /dev/null
+++ b/files/uk/web/api/svganimatedstring/animval/index.html
@@ -0,0 +1,44 @@
+---
+title: SVGAnimatedString.animVal
+slug: Web/API/SVGAnimatedString/animVal
+translation_of: Web/API/SVGAnimatedString/animVal
+---
+<p>{{APIRef("SVG")}}</p>
+
+<p>Атрибут AnimVal або властивість animVal містить те саме значення, що і властивість baseVal. Якщо атрибут або властивість анімований, він буде містити поточне анімоване значення атрибута або властивості. Якщо даний атрибут або властивість в даний час не анімовані, то він містить те саме значення, що і baseVal</p>
+
+<div class="note">
+<p>Властивість <strong>animVal</strong> доступна лише для зчитування значення. Internet Explorer 9 підтримує анімацію SVG, але не підтримує анімацію SVG на основі декларативних баз даних. В результаті, властивість <strong>animVal </strong>містить те саме значення, що і властивість baseVal.</p>
+</div>
+
+<h2 class="alert" id="Синтакс">Синтакс</h2>
+
+<pre><em>var</em> = <em>object.</em><strong>animVal</strong></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('SVG1.1', 'types.html#__svg__SVGAnimatedString__animVal')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'types.html#__svg__SVGAnimatedString__animVal')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Сумісність браузерів</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці генерується з структурованих даних. Якщо ви хочете внести свій внесок у свої дані, будь ласка, перегляньте https://github.com/mdn/browser-compat-data і надішліть нам запит на pull-request.</div>
+
+<p>{{Compat("api.SVGAnimatedString.animVal")}}</p>
diff --git a/files/uk/web/api/svganimatedstring/index.html b/files/uk/web/api/svganimatedstring/index.html
new file mode 100644
index 0000000000..bca995b90e
--- /dev/null
+++ b/files/uk/web/api/svganimatedstring/index.html
@@ -0,0 +1,60 @@
+---
+title: SVGAnimatedString
+slug: Web/API/SVGAnimatedString
+tags:
+  - API
+  - NeedsExample
+  - NeedsTranslation
+  - Reference
+  - Référence(2)
+  - SVG
+  - SVG DOM
+  - TopicStub
+translation_of: Web/API/SVGAnimatedString
+---
+<div>{{APIRef("SVG")}}</div>
+
+<div> </div>
+
+<p>The <code><strong>SVGAnimatedString</strong></code> interface represents string attributes which can be animated from each SVG declaration. You need to create SVG attribute before doing anything else, everything should be declared inside this.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("SVGAnimatedString.animVal")}} {{readonlyInline}}</dt>
+ <dd>This is a {{domxref("DOMString")}} representing the animation value. <span class="field"><span class="_animVal doc">If the given attribute or property is being animated it contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, it contains the same value as </span></span>baseVal<span class="field"><span class="_animVal doc">.</span></span></dd>
+ <dt>{{domxref("SVGAnimatedString.baseVal")}}</dt>
+ <dd>This is a {{domxref("DOMString")}} representing the base value. <span class="field"><span class="_baseVal doc">The base value of the given attribute before applying any animations. Setter throws DOMException.</span></span></dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>The <code>SVGAnimatedString</code> interface do not provide any specific methods.</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('SVG1.1', '#InterfaceSVGAnimatedString')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG2', 'types.html#InterfaceSVGAnimatedString')}}</td>
+   <td>{{Spec2('SVG2')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.SVGAnimatedString")}}</p>
diff --git a/files/uk/web/api/urlsearchparams/index.html b/files/uk/web/api/urlsearchparams/index.html
new file mode 100644
index 0000000000..78ab36b8e8
--- /dev/null
+++ b/files/uk/web/api/urlsearchparams/index.html
@@ -0,0 +1,171 @@
+---
+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")}} структурі, замість {{domxref('URLSearchParams.entries()', 'entries()')}}: <code>for (var p of mySearchParams)</code> що еквівалентно до <code>for (var p of mySearchParams.entries())</code>.</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}</dt>
+ <dd>Конструктор вертає <code>URLSearchParams</code> об'єкт.</dd>
+</dl>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface doesn't inherit any property.</em></p>
+
+<h2 id="Методи">Методи</h2>
+
+<p><em>Інтерфейс на наслідує ніяких методів</em></p>
+
+<dl>
+ <dt>{{domxref("URLSearchParams.append()")}}</dt>
+ <dd>Appends a specified key/value pair as a new search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.delete()")}}</dt>
+ <dd>Deletes the given search parameter, and its associated value, from the list of all search parameters.</dd>
+ <dt>{{domxref("URLSearchParams.entries()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
+ <dt>{{domxref("URLSearchParams.get()")}}</dt>
+ <dd>Returns the first value associated to the given search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.getAll()")}}</dt>
+ <dd>Returns all the values association with a given search parameter.</dd>
+ <dt>{{domxref("URLSearchParams.has()")}}</dt>
+ <dd>Returns a {{jsxref("Boolean")}} indicating if such a search parameter exists.</dd>
+ <dt>{{domxref("URLSearchParams.keys()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>keys </strong>of the key/value pairs contained in this object.</dd>
+ <dt>{{domxref("URLSearchParams.set()")}}</dt>
+ <dd>Sets the value associated to a given search parameter to the given value. If there were several values, delete the others.</dd>
+ <dt>{{domxref("URLSearchParams.toString()")}}</dt>
+ <dd>Returns a string containg a query string suitable for use in a URL.</dd>
+ <dt>{{domxref("URLSearchParams.values()")}}</dt>
+ <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all <strong>values </strong>of the key/value pairs contained in this object.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js notranslate">var paramsString = "q=URLUtils.searchParams&amp;topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iterate the search parameters.
+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="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('URL', '#urlsearchparams', "URLSearchParams")}}</td>
+   <td>{{Spec2('URL')}}</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(49)}}</td>
+   <td>{{CompatGeckoDesktop("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoDesktop("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>36</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(49)}}</td>
+   <td>{{CompatGeckoMobile("29.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+  <tr>
+   <td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+   <td>{{CompatGeckoMobile("44.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(49)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="See_also">See also</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/uk/web/api/web_workers_api/index.html b/files/uk/web/api/web_workers_api/index.html
new file mode 100644
index 0000000000..a22a63cd93
--- /dev/null
+++ b/files/uk/web/api/web_workers_api/index.html
@@ -0,0 +1,215 @@
+---
+title: Web Workers API
+slug: Web/API/Web_Workers_API
+translation_of: Web/API/Web_Workers_API
+---
+<p>{{DefaultAPISidebar("Web Workers API")}}</p>
+
+<p class="summary"><strong>Web Workers</strong> це механізм, який дозволяє запускати скрипові операції  у фоновому потоці, окремо від основного діючого потоку web-додатку. Перевага цього методу в тому, що трудоміські процеси можуть виконуватися в окромому потоці, дозволяючи основному (зазвичай UI) потоку працювати без блокування/сповільнення.</p>
+
+<h2 id="Концепція_та_використання_Web_Workers">Концепція та використання Web Workers</h2>
+
+<p>Worker це об'єкт, який створюється з використанням конструктору (e.g. {{domxref("Worker.Worker", "Worker()")}}), який запускає вказаний JavaScript-файл — файл, який містить код, що буде запущений у робочому потоці; workers запускаються у іншому глобальному контексті, який не є поточним {{domxref("window")}}. Цей контекст представляюється об'єктом  {{domxref("DedicatedWorkerGlobalScope")}} у разі виділеного workers (стандартний workers, <span class="short_text" id="result_box" lang="uk"><span>які</span> <span>використовуються</span> <span>одним </span><span>сценарієм</span><span>;</span></span> загальні workers використовують {{domxref("SharedWorkerGlobalScope")}}).</p>
+
+<p>У потоці workers можна запускати будь-який код з невеликкими винятками. Наприклад, не можна напряму маніпулювати DOM з worker або використовувати деякі стандартні методи та властивості об'єкту {{domxref("window")}}, але можна використовувати велику кількість речей, доступних <code>з window</code>, включаючи <a href="/en-US/docs/WebSockets">WebSockets</a>, та механізми зберігання даних, як <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> та Firefox OS-only <a href="/en-US/docs/Web/API/Data_Store_API">Data Store API</a>.  Дивіться <a href="/en-US/docs/Web/API/Worker/Functions_and_classes_available_to_workers">Функції та класи, доступні для workers</a> для більшої детальності.</p>
+
+<p>Дані передаються між workers та основним потоком за допомогою системи сповіщення — обидві сторони пересилають свої сповіщення, використовуючи методи<code> postMessage()</code>, та відповідаюсь через обробник подій <code>onmessage</code> (повідомлення містится всепредині атрибутів даних {{event("Message")}} ). Дані копіюються, а не поширюються.</p>
+
+<p>Workers можуть в свою чергу породжувати нові workers, за умови, що ці workers будуть розміщуватися в межах однієї й тієї ж самої сорінки, що й батьківський worker.  На додаток, workers можуть використовувати <a class="internal" href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> для мережевого В/В, за винятком того, що <code>responseXML</code> <code>та channel</code> атрибути <code>XMLHttpRequest</code> завжди <code>повертають null</code>.</p>
+
+<p>Окрім виділених workers, є й інши типи:</p>
+
+<ul>
+ <li>Загальні workers - можуть бути використані декількома сценаріями, запускаючись в різних вікнах, IFrames, тощо, якщо вони у одному домені з worker. Вони трохи складніші, ніж виділені workers — скрипти мають спілкуватися через активний порт. Дивіться {{domxref("SharedWorker")}} для більшї детальності.</li>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorkers</a> по суті виступають в якості проксі-серверу, знаходячись між web-додатком, браузером й мережею (коли доступна). Вони призначені для того (зокрема іншого), щоб давати змогу створювати ефективний offline-функціонал, перехоплення мережевих запитів та прийняття відповідних заходів, основуючись на тому, чи доступна мережа, та поновювати данні більш переважними з серверу. Вони також дозволяють доступ для додавання сповіщень та фонових синхроних APIs.</li>
+ <li>Chrome Workers є Firefox-only типом worker, що можна використовуати, якщо розроблюється доповнення та бажано використовувати workers й мати доступ до <a href="https://developer.mozilla.org/en/js-ctypes">js-ctypes</a> у worker. Дивіться {{domxref("ChromeWorker")}} для більшої детальності. </li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API#Audio_Workers">Audio Workers</a> забезпечуюсть можливість направляти сценарії обробки звуку відбуватися у контексті web worker.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примітка</strong>: Згіздно з <a href="https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2">Web workers Spec</a>, події помилок worker не повинні вспливати (дивіться {{bug(1188141)}}. Це було реалізовано у Firefox 42.</p>
+</div>
+
+<h2 id="Інтерфейси_Web_Worker">Інтерфейси Web Worker</h2>
+
+<dl>
+ <dt>{{domxref("AbstractWorker")}}</dt>
+ <dd>Абстрактні властивості та методи, загальні для всіх видів workers ({{domxref("Worker")}} або {{domxref("SharedWorker")}}).</dd>
+ <dt>{{domxref("Worker")}}</dt>
+ <dd>Представляє собою діючий поток worker, дозволяючи передавати сповіщення запущеному коду worker.</dd>
+ <dt>{{domxref("SharedWorker")}}</dt>
+ <dd>Представляє собою специфічний вид worker, який може бути <em>доступний</em> з декількох контекстів браузерів, будучи декількома вікнами, iframes або іншими workers.</dd>
+ <dt>{{domxref("WorkerGlobalScope")}}</dt>
+ <dd>Представляє собою загальний scope будь-якого worker (виконуючи ту ж роботу, що й {{domxref("Window")}} для звичайного контенту web). Різні види worker мають об'єкт scope, який наслідується з цього інерфейсу та додає більше специфічних особливостей.</dd>
+ <dt>{{domxref("DedicatedWorkerGlobalScope")}}</dt>
+ <dd>Представляє собою scope виділеного worker, наслудуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі  особливості.</dd>
+ <dt>{{domxref("SharedWorkerGlobalScope")}}</dt>
+ <dd>Представляє собою scope загального worker, наслідуючись з {{domxref("WorkerGlobalScope")}} та додаючи деякі особливості.</dd>
+ <dt>{{domxref("WorkerNavigator")}}</dt>
+ <dd>Представляє собою ідентифікатор та стан користувача (клієнта):</dd>
+</dl>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Ми створили декілька простих прикладів, щоб показати основне вікористання:</p>
+
+<ul>
+ <li><a href="https://github.com/mdn/simple-web-worker">Основні приклади виділеного worker </a>(<a href="http://mdn.github.io/simple-web-worker/">запуск виділеного worker</a>).</li>
+ <li><a href="https://github.com/mdn/simple-shared-worker">Основні приклади загалного worker </a>(<a href="http://mdn.github.io/simple-shared-worker/">запуск загального worker</a>).</li>
+</ul>
+
+<p>Ви можете знайти більше інформації як працюють ці демо у <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">Використання web workers</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', '#toc-workers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change from {{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>Basic support</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(1.9.1)}}</td>
+   <td>10.0</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Shared workers</td>
+   <td>4</td>
+   <td>{{CompatGeckoDesktop(29)}}</td>
+   <td>{{CompatNo}}</td>
+   <td>10.6</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td>Passing data using structured cloning</td>
+   <td>13</td>
+   <td>{{CompatGeckoDesktop(8)}}</td>
+   <td>10.0</td>
+   <td>11.5</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td>Passing data using  transferable objects</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>Global {{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>Basic support</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>Shared workers</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>Passing data using structured cloning</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>Passing data using  transferable objects</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] As <code>webkitURL</code>.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Using Web Workers</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 interface</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">Functions and classes available to workers</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Workers_API/Advanced_concepts_and_examples">Advanced concepts and examples</a></li>
+ <li><a href="/en-US/docs/Web/API/ChromeWorker">ChromeWorker</a>: for using workers in privileged/chrome code</li>
+</ul>
diff --git a/files/uk/web/api/webgl_api/index.html b/files/uk/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..078414deeb
--- /dev/null
+++ b/files/uk/web/api/webgl_api/index.html
@@ -0,0 +1,238 @@
+---
+title: WebGL
+slug: Web/API/WebGL_API
+tags:
+  - WebGL
+  - Графіка
+  - Детально
+  - Медіа
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Web Graphics Library) - це JavaScript API для відображення інтерактивної 3D та 2D графіки в будь-якому сумісному веб-переглядачі без використання плагінів. WebGL робиць це вводячи API, яке точно відповідає OpenGL ES 2.0 та може бути використане в HTML5 {{HTMLElement("canvas")}} елементах.</p>
+</div>
+
+<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+ and <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+; проте, користувацький пристрій має також мати апаратне забезпечення, яке підтримує ці функції.</p>
+
+<p>Елемент {{HTMLElement("canvas")}} також використовується Canvas 2D для побудови 2D графіки на веб-сторінках.</p>
+
+<h2 id="Посилання">Посилання</h2>
+
+<h3 id="Стандартні_інтерфейси">Стандартні інтерфейси</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Розширення">Розширення</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_es3")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Події">Події</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Константи_і_типи">Константи і типи</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Constants">Константи WebGL</a></li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Types">Типи WebGL</a></li>
+</ul>
+
+<h2 id="Керівництва_і_навчальні_сторінки">Керівництва і навчальні сторінки</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Tutorial">Керівництво по WebGL</a>: Основні поняття WebGL для початківця. Гарний початок, якщо ви не маєте досвіду роботи з WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_best_practices">Кращі практики WebGL</a>: Підказки та поради для покращення контенту WebGL.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Using_Extensions">Використання розширень</a>: Як використовувати доступні для WebGL розширення.</li>
+</ul>
+
+<h3 id="Детальні_керівництва">Детальні керівництва</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection">WebGL model view projection</a>: Детальне пояснення трьох основних матриць, які переважно використовуються для представлення 3D виду об'єкту: матриця моделі, виду та проекції.</li>
+ <li><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a>: Корисне керівництво про те, як працюють матриці 3D перетворення, та як вони можуть бути використані в web - як для розрахунків WebGL, так і для CSS3 перетворень .</li>
+</ul>
+
+<h2 id="Ресурси">Ресурси</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Розмова Ніка Дізолнірс який знайомить з основами WebGL. Це відмінне місце, щоб почати, якщо ви ніколи не займались низькорівневим програмуванням графіки.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Основний веб-сайт WebGL на Khronos Group.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Сайт з керівництвами про використання WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Базове керівництво про основи WebGL.</li>
+ <li><a href="http://webglplayground.net" title="http://webglplayground.net">WebGL playground</a> An online tool for creating and sharing WebGL projects. Good for quick prototyping and experimenting.</li>
+ <li><a href="http://www.webglacademy.com" title="http://www.webglacademy.com">WebGL Academy</a> Редактор HTML/JavaScript з керівництвами для вивчення основ програмування під WebGL.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Сайт зі статистикою про можливості WebGL в веб-переглядачах на різних платформах.</li>
+</ul>
+
+<h3 id="Бібліотеки">Бібліотеки</h3>
+
+<ul>
+ <li><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> JavaScript-бібліотека матриці і вектору для WebGL додатків з високою ефективністю.</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Бібліотека з відкритим початковим кодом для маніпулювання векторами і матрицями. Не оптимізована для WebGL але надзвичайно міцна.</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('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Початкове визначення. Базується на OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Будується поверх WebGL1. На основі OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</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>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>9</td>
+   <td>11</td>
+   <td>12<sup>[1]</sup></td>
+   <td>5.1<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Функція</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Chrome for Android</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Базова підтримка</td>
+   <td>4</td>
+   <td>25<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>12<sup>[1]</sup></td>
+   <td>8.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Реалізація цієї функції є експериментальною.</p>
+
+<h3 id="Зауваження_по_сумісності">Зауваження по сумісності</h3>
+
+<p>На додаток до веб-переглядача, сам графічний процесор також має підтримувати цю функцію. Так, наприклад, стиснення текстур S3 (S3TC) доступне тільки для планшетів на основі Tegra . Більшість браузерів роблять контекст WebGL доступним через контекстне ім'я <code>webgl</code>, але старішим також потрібно <code>experimental-webgl</code>. Крім того, майбутній WebGL 2 повністю сумісний і матиме ім'я контексту <code>webgl2</code>.</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>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Інформація про сумісніть розширень WebGL</a></li>
+</ul>
diff --git a/files/uk/web/api/websocket/index.html b/files/uk/web/api/websocket/index.html
new file mode 100644
index 0000000000..e2dac93e8c
--- /dev/null
+++ b/files/uk/web/api/websocket/index.html
@@ -0,0 +1,330 @@
+---
+title: WebSocket
+slug: Web/API/WebSocket
+translation_of: Web/API/WebSocket
+---
+<div>{{APIRef("Web Sockets API")}}{{SeeCompatTable}}</div>
+
+<p>Об'єкт <code>WebSocket надає </code>API (інтерфейс) для створення і керування  <a href="/en-US/docs/Web/API/WebSockets_API">WebSocket</a>-з'єднаннями з сервером connection to a server, а також для надсилання і отримання повідомлень з даними.</p>
+
+<p>Конструктор WebSocket приймає один обов'язковий і один опціональний параметр:</p>
+
+<pre class="syntaxbox">new 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 (на приклад, вам потрібен сервер, який здатний працювати з різними типами взаємодій залежно від протоколу). Якщо ви не вкажете протокол, то WebSocket буде вважати, що отримав пустий рядок.</dd>
+</dl>
+
+<p>Конструктор може повертати помилки. На прикладі нижче помилка про "порт, до якого була спроба підключитися, був заблокований":</p>
+
+<dl>
+ <dt><code>SECURITY_ERR</code></dt>
+ <dd>The port to which the connection is being attempted is being blocked.</dd>
+</dl>
+
+<h2 id="Method_overview">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="Attributes">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>binaryType</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>A string indicating the type of binary data being transmitted by the connection. This should be either "blob" if DOM {{domxref("Blob")}} objects are being used or "arraybuffer" if {{jsxref("ArrayBuffer")}} objects are being used.</td>
+  </tr>
+  <tr>
+   <td><code>bufferedAmount</code></td>
+   <td><code>unsigned long</code></td>
+   <td>The number of bytes of data that have been queued using calls to {{manch("send")}} but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling {{manch("send")}}, this will continue to climb. <strong>Read only</strong></td>
+  </tr>
+  <tr>
+   <td><code>extensions</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>The extensions selected by the server. This is currently only the empty string or a list of extensions as negotiated by the connection.</td>
+  </tr>
+  <tr>
+   <td><code>onclose</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>CLOSED</code>. The listener receives a <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> named "close".</td>
+  </tr>
+  <tr>
+   <td><code>onerror</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when an error occurs. This is a simple event named "error".</td>
+  </tr>
+  <tr>
+   <td><code>onmessage</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when a message is received from the server. The listener receives a <a href="/en-US/docs/Web/API/MessageEvent"><code>MessageEvent</code></a> named "message".</td>
+  </tr>
+  <tr>
+   <td><code>onopen</code></td>
+   <td>{{domxref("EventListener")}}</td>
+   <td>An event listener to be called when the WebSocket connection's <code>readyState</code> changes to <code>OPEN</code>; this indicates that the connection is ready to send and receive data. The event is a simple one with the name "open".</td>
+  </tr>
+  <tr>
+   <td><code>protocol</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>A string indicating the name of the sub-protocol the server selected; this will be one of the strings specified in the <code>protocols</code> parameter when creating the WebSocket object.</td>
+  </tr>
+  <tr>
+   <td><code>readyState</code></td>
+   <td><code>unsigned short</code></td>
+   <td>The current state of the connection; this is one of the {{anch("Ready state constants")}}. <strong>Read only.</strong></td>
+  </tr>
+  <tr>
+   <td><code>url</code></td>
+   <td>{{DOMXref("DOMString")}}</td>
+   <td>The URL as resolved by the constructor. This is always an absolute URL. <strong>Read only.</strong></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Constants">Constants</h2>
+
+<h3 id="Ready_state_constants">Ready state constants</h3>
+
+<p>These constants are used by the <code>readyState</code> attribute to describe the state of the WebSocket connection.</p>
+
+<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>The connection is not yet open.</td>
+  </tr>
+  <tr>
+   <td><code>OPEN</code></td>
+   <td><code>1</code></td>
+   <td>The connection is open and ready to communicate.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSING</code></td>
+   <td><code>2</code></td>
+   <td>The connection is in the process of closing.</td>
+  </tr>
+  <tr>
+   <td><code>CLOSED</code></td>
+   <td><code>3</code></td>
+   <td>The connection is closed or couldn't be opened.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Methods">Methods</h2>
+
+<h3 id="close()">close()</h3>
+
+<p>Closes the WebSocket connection or connection attempt, if any. If the connection is already <code>CLOSED</code>, this method does nothing.</p>
+
+<pre class="syntaxbox">void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+</pre>
+
+<h4 id="Parameters">Parameters</h4>
+
+<dl>
+ <dt><code>code</code> {{optional_inline}}</dt>
+ <dd>A numeric value indicating the status code explaining why the connection is being closed. If this parameter is not specified, a default value of 1000 (indicating a normal "transaction complete" closure) is assumed. See the <a href="/en-US/docs/Web/API/CloseEvent#Status_codes">list of status codes</a> on the <a href="/en-US/docs/Web/API/CloseEvent"><code>CloseEvent</code></a> page for permitted values.</dd>
+ <dt><code>reason</code> {{optional_inline}}</dt>
+ <dd>A human-readable string explaining why the connection is closing. This string must be no longer than 123 bytes of UTF-8 text (<strong>not</strong> characters).</dd>
+</dl>
+
+<h4 id="Exceptions_thrown">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_ACCESS_ERR</code></dt>
+ <dd>An invalid <code>code</code> was specified.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>The <code>reason</code> string is too long or contains unpaired surrogates.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> In Gecko, this method didn't support any parameters prior to Gecko 8.0 {{geckoRelease("8.0")}}.</p>
+</div>
+
+<h3 id="send()">send()</h3>
+
+<p>Transmits data to the server over the WebSocket connection.</p>
+
+<pre class="syntaxbox">void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+</pre>
+
+<h4 id="Parameters_2">Parameters</h4>
+
+<dl>
+ <dt><code>data</code></dt>
+ <dd>A text string to send to the server.</dd>
+</dl>
+
+<h4 id="Exceptions_thrown_2">Exceptions thrown</h4>
+
+<dl>
+ <dt><code>INVALID_STATE_ERR</code></dt>
+ <dd>The connection is not currently <code>OPEN</code>.</dd>
+ <dt><code>SYNTAX_ERR</code></dt>
+ <dd>The data is a string that has unpaired surrogates.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Note:</strong> Gecko's implementation of the <code>send()</code> method differs somewhat from the specification in {{Gecko("6.0")}}; Gecko returns a <code>boolean</code> indicating whether or not the connection is still open (and, by extension, that the data was successfully queued or transmitted); this is corrected in {{Gecko("8.0")}}.</p>
+
+<p>As of {{Gecko("11.0")}}, support for {{jsxref("ArrayBuffer")}} is implemented but not {{domxref("Blob")}} data types.</p>
+</div>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// Create WebSocket connection.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Connection opened
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Listen for messages
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}</td>
+   <td>{{Spec2("Websockets")}}</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</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("6.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>Basic support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}<sup>[1]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td>Sub-protocol support</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("7.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use <code>MozWebSocket()</code>: <code>var mySocket = new MozWebSocket("http://www.example.com/socketserver");</code></p>
+
+<p>The <code>extensions</code> attribute was not supported in Gecko until Gecko 8.0.</p>
+
+<p>Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the <a href="#send()">send()</a> method were limited to 16 MB. They can now be up to 2 GB in size.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li>
+</ul>
diff --git a/files/uk/web/api/window/confirm/index.html b/files/uk/web/api/window/confirm/index.html
new file mode 100644
index 0000000000..61da2b0042
--- /dev/null
+++ b/files/uk/web/api/window/confirm/index.html
@@ -0,0 +1,69 @@
+---
+title: Window.confirm()
+slug: Web/API/Window/confirm
+tags:
+  - API
+  - DOM
+  - Window
+  - confirm
+  - Посилання
+  - метод
+translation_of: Web/API/Window/confirm
+---
+<div>{{ApiRef("Window")}}</div>
+
+<p>Метод <code><strong>Window.confirm()</strong></code> показує модальний діалог з необов’язковим текстом та двома кнопками, Так та Відміна.</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> це бульове значення, яке показує, яку кнопку було натиснуто (<code>true</code> значить Так).</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><span class="comment">The following text is shared between this article, DOM:window.prompt and DOM:window.alert</span>Діалоги є модальними вікнами - вони запобігають доступу користувача до іншої частини програмного інтерфейсу аж до моменту закриття діалогу. Саме тому ви не маєте занадто часто використовувати жодну функцію, яка створює діалоги (чи модальні вікна). В будь якому разі, є хороші підстави <a href="http://alistapart.com/article/neveruseawarning">не використовувати діалоги для підтверджень</a>.</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-confirm', 'confirm()')}}</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.prompt","prompt")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/console/index.html b/files/uk/web/api/window/console/index.html
new file mode 100644
index 0000000000..bb1cc673b9
--- /dev/null
+++ b/files/uk/web/api/window/console/index.html
@@ -0,0 +1,56 @@
+---
+title: Window.console
+slug: Web/API/Window/console
+tags:
+  - API
+  - Property
+  - Read-only
+  - Window
+  - console
+  - Посилання
+translation_of: Web/API/Window/console
+---
+<p>{{ APIRef }}</p>
+
+<p><strong><code>Window.console</code></strong> — це незмінювана (read-only) властивість, що повертає посилання на об’єкт {{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("/en-US/docs/Web/API/Console", "Usage")}} для перегляду інших прикладів.</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('Console API')}}</td>
+   <td>{{Spec2('Console API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p>Наразі існує багато імплементацій, що відрізняються залежно від браузера, однак триває робота щодо уніфікації і міжбраузерної  консистентності.</p>
+</div>
diff --git a/files/uk/web/api/window/history/index.html b/files/uk/web/api/window/history/index.html
new file mode 100644
index 0000000000..208b453c09
--- /dev/null
+++ b/files/uk/web/api/window/history/index.html
@@ -0,0 +1,63 @@
+---
+title: Window.history
+slug: Web/API/Window/history
+tags:
+  - API
+  - History API
+  - Property
+  - Reference
+  - Window
+translation_of: Web/API/Window/history
+---
+<p>{{ APIRef }}</p>
+
+<p><code><strong>Window</strong>.<strong>history</strong></code> - це незмінювана (read-only) властивість, що повертає посилання на <span class="tlid-translation translation"><span title="">об'єкт</span></span> {{domxref("History")}}, <span class="tlid-translation translation"><span title="">який надає інтерфейс для керування історією сеансу браузера (сторінки, відвіданій на вкладці або фреймі, в якому завантажена поточна сторінка</span> <span title="">).</span></span></p>
+
+<p>Дивіться <a href="/en-US/docs/Web/API/History_API">Manipulating the browser history</a> <span class="tlid-translation translation"><span title="">для прикладів і деталей</span></span>. Зокрема, у цій статті пояснюються особливості безпеки методів <code>pushState()</code> та <code>replaceState()</code>, з якими вам варто ознайомитися, перш ніж їх використовувати.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre class="syntaxbox">var <var>historyObj</var> = <var>window</var>.history;
+</pre>
+
+<h2 id="Example" name="Example">Приклад</h2>
+
+<pre class="brush: js">history.back();     // еквівалентно настиканню кнопки назад
+history.go(-1);     // еквівалентно history.back();
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p><span class="tlid-translation translation"><span title="">Для сторінок верхнього рівня ви можете побачити список сторінок в історії сеансу, доступних через об'єкт</span></span> <code>History</code>, <span class="tlid-translation translation"><span title="">у випадаючих списках браузера поруч із кнопками вперед і назад.</span></span></p>
+
+<p>З міркуваннь безпеки, об'єкт <code>History</code> не дає доступу <span class="tlid-translation translation"><span title="">непривілейованого коду до URL-адрес інших сторінок в історії сеансів, але дозволяє переміщатися по історії сеансу</span></span></p>
+
+<p><span class="tlid-translation translation"><span title="">Неможливо очистити історію сеансу або вимкнути навігацію кнопок вперед/назад з непривілейованого коду.</span> <span title="">Найближчим доступним рішенням є метод </span></span><code><a href="/en/DOM/window.location#replace" title="en/DOM/window.location#replace">location.replace()</a></code><span class="tlid-translation translation"><span title="">, який замінює поточний елемент історії сеансу наданим URL.</span></span></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>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.history")}}</p>
diff --git a/files/uk/web/api/window/index.html b/files/uk/web/api/window/index.html
new file mode 100644
index 0000000000..a27230e343
--- /dev/null
+++ b/files/uk/web/api/window/index.html
@@ -0,0 +1,460 @@
+---
+title: Window
+slug: Web/API/Window
+tags:
+  - API
+  - DOM
+  - Interface
+  - JavaScript
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Window
+translation_of: Web/API/Window
+---
+<p>{{APIRef}}</p>
+
+<p><span class="seoSummary">The <code>window</code> object represents a window containing a DOM document; the <code>document</code> property points to the <a href="/en-US/docs/DOM/document">DOM document</a> loaded in that window.</span> A window for a given document can be obtained using the {{Domxref("document.defaultView")}} property.</p>
+
+<p>This section provides a brief reference for all of the methods, properties, and events available through the DOM <code>window</code> object. The <code>window</code> object implements the <code>Window</code> interface, which in turn inherits from the <code><a href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-AbstractView">AbstractView</a></code> interface. Some additional global functions, namespaces, objects, interfaces, and constructors, not typically associated with the window, but available on it, are listed in the <a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a> and <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a>.</p>
+
+<p>In a tabbed browser, such as Firefox, each tab contains its own <code>window</code> object (and if you're writing an extension, the browser window itself is a separate window too - see <a href="/en-US/docs/Working_with_windows_in_chrome_code#Content_windows">Working with windows in chrome code</a> for more information). That is, the <code>window</code> object is not shared between tabs in the same window. Some methods, namely {{Domxref("window.resizeTo")}} and {{Domxref("window.resizeBy")}} apply to the whole window and not to the specific tab the <code>window</code> object belongs to. Generally, anything that can't reasonably pertain to a tab pertains to the window instead.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from the {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("WindowEventHandlers")}} mixins.</em></p>
+
+<p>Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.</p>
+
+<dl>
+ <dt>{{domxref("Window.applicationCache")}}  {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.</dd>
+ <dt>{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}</dt>
+ <dd>This property indicates whether the current window is closed or not.</dd>
+ <dt>{{domxref("Window.Components")}} {{Non-standard_inline}}</dt>
+ <dd>The entry point to many <a href="/en-US/docs/XPCOM">XPCOM</a> features. Some properties, e.g. <a href="/en-US/docs/Components.classes">classes</a>, are only available to sufficiently privileged code. <strong>Web code should not use this property.</strong></dd>
+ <dt>{{domxref("Window.console")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the console object which provides access to the browser's debugging console.</dd>
+ <dt>{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.</dd>
+ <dt>{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the XUL controller objects for the current chrome window.</dd>
+ <dt>{{domxref("Window.crypto")}} {{readOnlyInline}}</dt>
+ <dd>Returns the browser crypto object.</dd>
+ <dt>{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}</dt>
+ <dd>Gets/sets the status bar text for the given window.</dd>
+ <dt>{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the ratio between physical pixels and device independent pixels in the current display.</dd>
+ <dt>{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}</dt>
+ <dd>Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.</dd>
+ <dt>{{domxref("Window.directories")}} {{obsolete_inline}}</dt>
+ <dd>Synonym of {{domxref("window.personalbar")}}</dd>
+ <dt>{{domxref("Window.document")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the document that the window contains.</dd>
+ <dt>{{domxref("Window.frameElement")}} {{readOnlyInline}}</dt>
+ <dd>Returns the element in which the window is embedded, or null if the window is not embedded.</dd>
+ <dt>{{domxref("Window.frames")}} {{readOnlyInline}}</dt>
+ <dd>Returns an array of the subframes in the current window.</dd>
+ <dt>{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}</dt>
+ <dd>This property indicates whether the window is displayed in full screen or not.</dd>
+ <dt>{{domxref("Window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}</dt>
+ <dd>Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.<br>
+ Was: Multiple storage objects that are used for storing data across multiple pages.</dd>
+ <dt>{{domxref("Window.history")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the history object.</dd>
+ <dt>{{domxref("Window.innerHeight")}}</dt>
+ <dd>Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.</dd>
+ <dt>{{domxref("Window.innerWidth")}}</dt>
+ <dd>Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.</dd>
+ <dt>{{domxref("Window.isSecureContext")}} {{readOnlyInline}}</dt>
+ <dd>Indicates whether a context is capable of using features that require secure contexts.</dd>
+ <dt>{{domxref("Window.length")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of frames in the window. See also {{domxref("window.frames")}}.</dd>
+ <dt>{{domxref("Window.location")}} {{ReadOnlyInline}}</dt>
+ <dd>Gets/sets the location, or current URL, of the window object.</dd>
+ <dt>{{domxref("Window.locationbar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the locationbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}</dt>
+ <dd>Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.menubar")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns the menubar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the <a href="/en-US/docs/The_message_manager">message manager</a> object for this window.</dd>
+ <dt>{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}</dt>
+ <dd>The time in milliseconds since epoch at which the current animation cycle began.</dd>
+ <dt>{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See <code>mozScreenPixelsPerCSSPixel</code> for a conversion factor to adapt to screen pixels if needed.</dd>
+ <dt>{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.</dd>
+ <dt>{{domxref("Window.name")}}</dt>
+ <dd>Gets/sets the name of the window.</dd>
+ <dt>{{domxref("Window.navigator")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the navigator object.</dd>
+ <dt>{{domxref("Window.opener")}}</dt>
+ <dd>Returns a reference to the window that opened this current window.</dd>
+ <dt>{{domxref("Window.orientation")}}{{non-standard_inline}}{{deprecated_inline}}{{readOnlyInline}}</dt>
+ <dd>Returns the orientation in degrees (in 90 degree increments) of the viewport relative to the device's natural orientation.</dd>
+ <dt>{{domxref("Window.outerHeight")}} {{readOnlyInline}}</dt>
+ <dd>Gets the height of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.outerWidth")}} {{readOnlyInline}}</dt>
+ <dd>Gets the width of the outside of the browser window.</dd>
+ <dt>{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollX")}}.</dd>
+ <dt>{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}</dt>
+ <dd>An alias for {{domxref("window.scrollY")}}</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.</dd>
+ <dt>{{domxref("Window.parent")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the parent of the current window or subframe.</dd>
+ <dt>{{domxref("Window.performance")}} {{readOnlyInline}}</dt>
+ <dd>Provides a hosting area for <a href="/en-US/docs/Navigation_timing">performance related</a> attributes.</dd>
+ <dt>{{domxref("Window.personalbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the personalbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}</dt>
+ <dd>Formerly provided access to install and remove PKCS11 modules.</dd>
+ <dt>{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.</dd>
+ <dt>{{domxref("Window.screen")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the screen object associated with the window.</dd>
+
+ <dt>{{domxref("Window.screenX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the horizontal distance of the left border of the user's browser from the left side of the screen.</dd>
+ <dt>{{domxref("Window.screenY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the vertical distance of the top border of the user's browser from the top side of the screen.</dd>
+ <dt>{{domxref("Window.scrollbars")}} {{readOnlyInline}}</dt>
+ <dd>Returns the scrollbars object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.</dd>
+ <dt>{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).</dd>
+ <dt>{{domxref("Window.scrollX")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled horizontally.</dd>
+ <dt>{{domxref("Window.scrollY")}} {{readOnlyInline}}</dt>
+ <dd>Returns the number of pixels that the document has already been scrolled vertically.</dd>
+ <dt>{{domxref("Window.self")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns an object reference to the window object itself.</dd>
+ <dt>{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}</dt>
+ <dd>Returns a storage object for storing data within a single page session.</dd>
+ <dt>{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the window object of the sidebar.</dd>
+ <dt>{{domxref("Window.speechSynthesis")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a {{domxref("SpeechSynthesis")}} object, which is the entry point into using <a href="/en-US/docs/Web/API/Web_Speech_API">Web Speech API</a> speech synthesis functionality.</dd>
+ <dt>{{domxref("Window.status")}}</dt>
+ <dd>Gets/sets the text in the statusbar at the bottom of the browser.</dd>
+ <dt>{{domxref("Window.statusbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the statusbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.toolbar")}} {{readOnlyInline}}</dt>
+ <dd>Returns the toolbar object, whose visibility can be toggled in the window.</dd>
+ <dt>{{domxref("Window.top")}} {{readOnlyInline}}</dt>
+ <dd>Returns a reference to the topmost window in the window hierarchy. This property is read only.</dd>
+ <dt>{{domxref("Window.window")}} {{ReadOnlyInline}}</dt>
+ <dd>Returns a reference to the current window.</dd>
+ <dt><code>window[0]</code>,<code> window[1]</code>, etc.</dt>
+ <dd>Returns a reference to the <code>window</code> object in the frames. See {{domxref("Window.frames")}} for more details.</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="Methods">Methods</h2>
+
+<p><em>This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowOrWorkerGlobalScope")}} and {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt>{{domxref("Window.alert()")}}</dt>
+ <dd>Displays an alert dialog.</dd>
+
+ <dt>{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves back one in the window history.</dd>
+ <dt>{{domxref("Window.blur()")}}</dt>
+ <dd>Sets focus away from the window.</dd>
+ <dt>{{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}}</dt>
+ <dd>Enables you to cancel a callback previously scheduled with {{domxref("Window.requestIdleCallback")}}.</dd>
+ <dt>{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Registers the window to capture all events of the specified type.</dd>
+ <dt>{{domxref("Window.clearImmediate()")}}</dt>
+ <dd>Cancels the repeated execution set using <code>setImmediate</code>.</dd>
+ <dt>{{domxref("Window.close()")}}</dt>
+ <dd>Closes the current window.</dd>
+ <dt>{{domxref("Window.confirm()")}}</dt>
+ <dd>Displays a dialog with a message that the user needs to respond to.</dd>
+ <dt>{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.dispatchEvent()")}}</dt>
+ <dd>Used to trigger an event.</dd>
+ <dt>{{domxref("Window.dump()")}}</dt>
+ <dd>Writes a message to the console.</dd>
+ <dt>{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.find()")}}</dt>
+ <dd>Searches for a given string in a window.</dd>
+ <dt>{{domxref("Window.focus()")}}</dt>
+ <dd>Sets focus on the current window.</dd>
+ <dt>{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Moves the window one document forward in the history.</dd>
+ <dt>{{domxref("Window.getAttention()")}}</dt>
+ <dd>Flashes the application icon.</dd>
+ <dt>{{domxref("Window.getAttentionWithCycleCount()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.getComputedStyle()")}}</dt>
+ <dd>Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.</dd>
+ <dt>{{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}}</dt>
+ <dd>Gets default computed style for the specified element, ignoring author stylesheets.</dd>
+ <dt>{{domxref("Window.getSelection()")}}</dt>
+ <dd>Returns the selection object representing the selected item(s).</dd>
+ <dt>{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}</dt>
+ <dd>Returns the browser to the home page.</dd>
+ <dt>{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.</dd>
+ <dt>{{domxref("Window.maximize()")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.minimize()")}} (top-level XUL windows only)</dt>
+ <dd>Minimizes the window.</dd>
+ <dt>{{domxref("Window.moveBy()")}}</dt>
+ <dd>Moves the current window by a specified amount.</dd>
+ <dt>{{domxref("Window.moveTo()")}}</dt>
+ <dd>Moves the window to the specified coordinates.</dd>
+ <dt>{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a <code>MozBeforePaint</code> event to fire before that repaint occurs.</dd>
+ <dt>{{domxref("Window.open()")}}</dt>
+ <dd>Opens a new window.</dd>
+ <dt>{{domxref("Window.openDialog()")}}</dt>
+ <dd>Opens a new dialog window.</dd>
+ <dt>{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.</dd>
+ <dt>{{domxref("Window.print()")}}</dt>
+ <dd>Opens the Print Dialog to print the current document.</dd>
+ <dt>{{domxref("Window.prompt()")}}</dt>
+ <dd>Returns the text entered by the user in a prompt dialog.</dd>
+ <dt>{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}</dt>
+ <dd>Releases the window from trapping events of a specific type.</dd>
+ <dt>{{domxref("Window.requestIdleCallback()")}}  {{experimental_inline}}</dt>
+ <dd>Enables the scheduling of tasks during a browser's idle periods.</dd>
+ <dt>{{domxref("Window.resizeBy()")}}</dt>
+ <dd>Resizes the current window by a certain amount.</dd>
+ <dt>{{domxref("Window.resizeTo()")}}</dt>
+ <dd>Dynamically resizes window.</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>Scrolls the document in the window by the given amount.</dd>
+ <dt>{{domxref("Window.scrollByLines()")}}</dt>
+ <dd>Scrolls the document by the given number of lines.</dd>
+ <dt>{{domxref("Window.scrollByPages()")}}</dt>
+ <dd>Scrolls the current document by the specified number of pages.</dd>
+ <dt>{{domxref("Window.scrollTo()")}}</dt>
+ <dd>Scrolls to a particular set of coordinates in the document.</dd>
+ <dt>{{domxref("Window.setCursor()")}}</dt>
+ <dd>Changes the cursor for the current window</dd>
+ <dt>{{domxref("Window.setImmediate()")}}</dt>
+ <dd>Executes a function after the browser has finished other heavy tasks</dd>
+ <dt>{{domxref("Window.setResizable()")}}</dt>
+ <dd>Toggles a user's ability to resize a window.</dd>
+ <dt>{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}</dt>
+ <dd>Displays a modal dialog.</dd>
+ <dt>{{domxref("Window.sizeToContent()")}}</dt>
+ <dd>Sizes the window according to its content.</dd>
+ <dt>{{domxref("Window.stop()")}}</dt>
+ <dd>This method stops window loading.</dd>
+ <dt>{{domxref("Window.updateCommands()")}}</dt>
+ <dd>Updates the state of commands of the current chrome window (UI).</dd>
+</dl>
+
+<h3 id="Methods_implemented_from_elsewhere">Methods implemented from elsewhere</h3>
+
+<dl>
+ <dt>{{domxref("EventTarget.addEventListener()")}}</dt>
+ <dd>Register an event handler to a specific event type on the window.</dd>
+ <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("EventTarget.removeEventListener")}}</dt>
+ <dd>Removes an event listener from the window.</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>
+
+<h2 id="Event_handlers">Event handlers</h2>
+
+<p>These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.</p>
+
+<p><em>This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowEventHandlers")}}.</em></p>
+
+<div class="note">
+<p><strong>Note:</strong> Starting in {{Gecko("9.0")}}, you can now use the syntax <code>if ("onabort" in window)</code> to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See <a href="/en-US/docs/DOM/DOM_event_handlers">DOM event handlers</a> for details.</p>
+</div>
+
+<dl>
+ <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt>
+ <dd>Called when the loading of a resource has been aborted, such as by a user canceling the load while it is still in progress</dd>
+ <dt>{{domxref("WindowEventHandlers.onafterprint")}}</dt>
+ <dd>Called when the print dialog box is closed. See {{event("afterprint")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeprint")}}</dt>
+ <dd>Called when the print dialog box is opened. See {{event("beforeprint")}} event.</dd>
+ <dt>{{domxref("Window.onbeforeinstallprompt")}}</dt>
+ <dd>An event handler property dispatched before a user is prompted to save a web site to a home screen on mobile.</dd>
+ <dt>{{domxref("WindowEventHandlers.onbeforeunload")}}</dt>
+ <dd>An event handler property for before-unload events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt>
+ <dd>Called after the window loses focus, such as due to a popup.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt>
+ <dd>An event handler property for change events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt>
+ <dd>Called after the ANY mouse button is pressed &amp; released</dd>
+ <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt>
+ <dd>Called when a double click is made with ANY mouse button.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt>
+ <dd>Called after the window is closed</dd>
+ <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt>
+ <dd>Called when the RIGHT mouse button is pressed</dd>
+ <dt>{{domxref("Window.ondevicelight")}}</dt>
+ <dd>An event handler property for any ambient light levels changes</dd>
+ <dt>{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called if accelerometer detects a change (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}</dt>
+ <dd>Called when the orientation is changed (For mobile devices)</dd>
+ <dt>{{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only</dt>
+ <dd>An event handler property for any device orientation changes.</dd>
+ <dt>{{domxref("Window.ondeviceproximity")}}</dt>
+ <dd>An event handler property for device proximity event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt>
+ <dd>Called when a resource fails to load OR when an error occurs at runtime. See {{event("error")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt>
+ <dd>Called after the window receives or regains focus. See {{event("focus")}} events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}</dt>
+ <dd>An event handler property for {{event('hashchange')}} events on the window; called when the part of the URL after the hash mark ("#") changes.</dd>
+ <dt>{{domxref("Window.onappinstalled")}}</dt>
+ <dd>Called when the page is installed as a webapp. See {{event('appinstalled')}} event.</dd>
+ <dt>{{domxref("Window.oninput")}}</dt>
+ <dd>Called when the value of an &lt;input&gt; element changes</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt>
+ <dd>Called when you begin pressing ANY key. See {{event("keydown")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt>
+ <dd>Called when a key (except Shift, Fn, and CapsLock) is in pressed position. See {{event("keypress")}} event.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt>
+ <dd>Called when you finish releasing ANY key. See {{event("keyup")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onlanguagechange")}}</dt>
+ <dd>An event handler property for {{event("languagechange")}} events on the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onload")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. WILL NOT get called when the page is loaded from cache, such as with back button.</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("GlobalEventHandlers.onmousedown")}}</dt>
+ <dd>Called when ANY mouse button is pressed.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt>
+ <dd>Called continously when the mouse is moved inside the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt>
+ <dd>Called when the pointer leaves the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt>
+ <dd>Called when the pointer enters the window</dd>
+ <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt>
+ <dd>Called when ANY mouse button is released</dd>
+ <dt>{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>An event handler property for the <code>MozBeforePaint</code> event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.</dd>
+ <dt>{{domxref("WindowEventHandlers.onoffline")}}</dt>
+ <dd>Called when network connection is lost. See {{event("offline")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.ononline")}}</dt>
+ <dd>Called when network connection is established. See {{event("online")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpagehide")}}</dt>
+ <dd>Called when the user navigates away from the page, before the onunload event. See {{event("pagehide")}} event.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpageshow")}}</dt>
+ <dd>Called after all resources and the DOM are fully loaded. See {{event("pageshow")}} event.</dd>
+ <dt>{{domxref("Window.onpaint")}}</dt>
+ <dd>An event handler property for paint events on the window.</dd>
+ <dt>{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}</dt>
+ <dd>Called when a back putton is pressed.</dd>
+ <dt>{{domxref("Window.onrejectionhandled")}} {{experimental_inline}}</dt>
+ <dd>An event handler for handled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt>
+ <dd>Called when a form is reset</dd>
+ <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt>
+ <dd>Called continuously as you are resizing the window.</dd>
+ <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt>
+ <dd>Called when the scroll bar is moved via ANY means. If the resource fully fits in the window, then this event cannot be invoked</dd>
+ <dt>{{domxref("GlobalEventHandlers.onwheel")}}</dt>
+ <dd>Called when the mouse wheel is rotated around any axis</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt>
+ <dd>Called after text in an input field is selected</dd>
+ <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd>
+ <dt>{{domxref("WindowEventHandlers.onstorage")}}</dt>
+ <dd>Called when there is a change in session storage or local storage. See {{event("storage")}} event</dd>
+ <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt>
+ <dd>Called when a form is submitted</dd>
+ <dt>{{domxref("WindowEventHandlers.onunhandledrejection")}} {{experimental_inline}}</dt>
+ <dd>An event handler for unhandled {{jsxref("Promise")}} rejection events.</dd>
+ <dt>{{domxref("WindowEventHandlers.onunload")}}</dt>
+ <dd>Called when the user navigates away from the page.</dd>
+ <dt>{{domxref("Window.onuserproximity")}}</dt>
+ <dd>An event handler property for user proximity events.</dd>
+ <dt>{{domxref("Window.onvrdisplayconnected")}} {{experimental_inline}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been connected to the computer (when the {{event("vrdisplayconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaydisconnected")}} {{experimental_inline}}</dt>
+ <dd>Represents an event handler that will run when a compatible VR device has been disconnected from the computer (when the {{event("vrdisplaydisconnected")}} event fires).</dd>
+ <dt>{{domxref("Window.onvrdisplaypresentchange")}} {{experimental_inline}}</dt>
+ <dd>represents an event handler that will run when the presenting state of a VR device changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("onvrdisplaypresentchange")}} event fires).</dd>
+</dl>
+
+<h2 id="Constructors">Constructors</h2>
+
+<p>See also the <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>Creates an instance of {{domxref("ConstantSourceNode")}}</dd>
+ <dt>{{domxref("Window.DOMParser")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Window.GeckoActiveXObject")}}</dt>
+ <dd>{{todo("NeedsContents")}}</dd>
+ <dt>{{domxref("Image")}}</dt>
+ <dd>Used for creating an {{domxref("HTMLImageElement")}}.</dd>
+ <dt>{{domxref("Option")}}</dt>
+ <dd>Used for creating an {{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>Used for creating a <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="Interfaces">Interfaces</h2>
+
+<p>See <a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">DOM Reference</a></p>
+
+<h2 id="See_also">See also</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/uk/web/api/window/localstorage/index.html b/files/uk/web/api/window/localstorage/index.html
new file mode 100644
index 0000000000..84401af92f
--- /dev/null
+++ b/files/uk/web/api/window/localstorage/index.html
@@ -0,0 +1,147 @@
+---
+title: Window.localStorage
+slug: Web/API/Window/localStorage
+tags:
+  - API
+  - Property
+  - Web Storage
+  - Window
+  - Довідка
+translation_of: Web/API/Window/localStorage
+---
+<p>{{APIRef()}}</p>
+
+<p>Властивість <code>localStorage</code> надає доступ до об’єкта {{domxref("Storage")}}, пов'язаного з джерелом поточного {{domxref("Document", "документа")}}. Сховище <code>localStorage</code> є схожим на <code><a href="/uk/docs/Web/API/Window.sessionStorage">sessionStorage</a></code>, але не має обмежень тривалості зберігання даних, тоді як дані <code>sessionStorage</code> видаляються по закритті сторінки (насправді, лише після закриття всіх сторінок з цього джерела, якщо їх кілька відкрито в переглядачі).</p>
+
+<p>Варто також зазначити, що сторінки, завантажені з різних джерел (важить все: <strong>ім'я хоста, порт, та навіть протокол — http/https</strong>), з міркувань безпеки мають незалежні окремі сховища, тож до даних одне одного доступу не мають.</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<pre><em>myStorage</em> = window.localStorage;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p>Об’єкт типу {{domxref("Storage")}}, який можна використовувати для доступу до чинного для поточної сторінки сховища.</p>
+
+<h3 id="Винятки">Винятки</h3>
+
+<dl>
+ <dt><code><strong>SecurityError</strong></code></dt>
+ <dd>Виникає в разі порушення встановлених правил або коли джерелом сторінки є неприйнятний протокол/хост/порт (наприклад, коли протоколом джерела є <code>file:</code> чи <code>data:</code>). Зокрема, користувач може заборонити збереження даних з окремих джерел в налаштуваннях переглядача.</dd>
+</dl>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Розгляньмо основні дії зі сховищем: запис, читання, видалення окремого ключа та повне очищення всього сховища.</p>
+
+<p>Цей приклад створює (чи змінює, якщо такий ключ вже існує) запис в чинному для поточної сторінки сховищі (через об'єкт типу {{domxref("Storage")}}) за допомогою метода {{domxref("Storage.setItem()", "setItem()")}}:</p>
+
+<pre class="brush: js">localStorage.setItem('Кіт', 'Барсик');</pre>
+
+<p>Дістати значення за ключем дозволяє метод {{domxref("Storage.getItem()", "getItem()")}}:</p>
+
+<pre class="brush: js">var cat = localStorage.getItem('Кіт');</pre>
+
+<p>Для видалення раніше створеного запису за його ключем існує метод {{domxref("Storage.removeItem()", "removeItem()")}}:</p>
+
+<pre class="brush: js">localStorage.removeItem('Кіт');</pre>
+
+<p>А для очищення сховища (видалення всіх створених записів) призначено метод {{domxref("Storage.clear()", "clear()")}}:</p>
+
+<pre class="brush: js">localStorage.clear();</pre>
+
+<div class="note">
+<p><strong>Заувага</strong>: повний приклад див. у статті <a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a>.</p>
+</div>
+
+<p>А тепер розгляньмо дещо змістовніший приклад:</p>
+
+<pre class="brush: js">function clearCart() {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  for (var i = 1; i &lt;= count; i++) {
+    localStorage.removeItem('cart-item-' + i)
+  }
+  localStorage.removeItem('cart-size');
+}
+
+
+function addCartItem(itemId) {
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+  localStorage.setItem('cart-item-' + (count + 1), itemId);
+  localStorage.setItem('cart-size', count + 1);
+}
+
+function getCartItems() {
+  var items = [];
+  var count = parseInt(localStorage.getItem('cart-size')) || 0;
+
+  for (var i = 1; i &lt;= count; i++) {
+    var itemId = localStorage.getItem('cart-item-' + i);
+    items.push(parseInt(itemId));
+  }
+
+  return items;
+}
+
+
+addCartItem(111);
+addCartItem(222);
+
+console.log(getCartItems());  // виводить [111, 222]
+clearCart();
+console.log(getCartItems());  // виводить []
+</pre>
+
+<p>Варто зауважити, що сховище працює лише з рядками (як ключ, так і значення мусить бути рядком, або його буде перетворено на рядок неявним викликом {{jsxref("Object.prototype.toString()", "toString()")}}). Тому для зберігання структурованих даних доведеться спершу подбати про їх перетворення в текстовий рядок — наприклад, JSON:</p>
+
+<pre class="brush: js">function setLocalStorageObjectItem(key, value) {
+  if (value === undefined) {
+    localStorage.removeItem(key);
+  } else {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+}
+
+function getLocalStorageObjectItem(key) {
+  var json = localStorage.getItem(key);
+  if (json === undefined) {
+    return undefined;
+  }
+  return JSON.parse(json);
+}
+
+setLocalStorageObjectItem('foo', {a: {x: 123}});
+console.log(getLocalStorageObjectItem('foo'));  // виводить {a: {x: 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', 'webstorage.html#dom-localstorage', 'localStorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2>
+
+<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+
+<p>{{Compat("api.Window.localStorage")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li><a href="/uk/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Використання Web Storage API</a></li>
+ <li>{{domxref("LocalStorage")}}</li>
+ <li>{{domxref("SessionStorage")}}</li>
+ <li>{{domxref("Window.sessionStorage")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/rejectionhandled_event/index.html b/files/uk/web/api/window/rejectionhandled_event/index.html
new file mode 100644
index 0000000000..f725917a75
--- /dev/null
+++ b/files/uk/web/api/window/rejectionhandled_event/index.html
@@ -0,0 +1,85 @@
+---
+title: 'Window: подія rejectionhandled'
+slug: Web/API/Window/rejectionhandled_event
+tags:
+  - API
+  - Event
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - Window
+  - Worker
+  - global
+  - onrejectionhandled
+  - rejectionhandled
+  - Проміс
+  - подія
+translation_of: Web/API/Window/rejectionhandled_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Подія <strong><code>rejectionhandled</code></strong> посилається у глобальну область видимості скрипта (зазвичай, {{domxref("window")}}, але також {{domxref("Worker")}}), коли відхиляється об'єкт JavaScript {{jsxref("Promise")}}, але після того, як відбулась обробка відхилення.</span> Це можна використовувати для відлагодження та для загальної стійкості застосунка, в тандемі з подією {{domxref("Window.unhandledrejection_event", "unhandledrejection")}}, яка посилається, коли проміс був відхилений, але не існує обробника відхилення.</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("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Обробник події</th>
+   <td>{{domxref("WindowEventHandlers.onrejectionhandled", "onrejectionhandled")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Ви можете використовувати подію <code>rejectionhandled</code>, щоб залогувати проміси, які було відхилено, у консоль, разом з причинами відхилення:</p>
+
+<pre class="brush: js">window.addEventListener("rejectionhandled", event =&gt; {
+  console.log("Проміс відхилено; причина: " + event.reason);
+}, 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#unhandled-promise-rejections', 'rejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.rejectionhandled_event")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>{{domxref("PromiseRejectionEvent")}}</li>
+ <li>{{jsxref("Promise")}}</li>
+ <li>{{domxref("Window.unhandledrejection_event", "unhandledrejection")}}</li>
+</ul>
diff --git a/files/uk/web/api/window/self/index.html b/files/uk/web/api/window/self/index.html
new file mode 100644
index 0000000000..70c58d6faf
--- /dev/null
+++ b/files/uk/web/api/window/self/index.html
@@ -0,0 +1,70 @@
+---
+title: Window.self
+slug: Web/API/Window/self
+tags:
+  - API
+  - HTML DOM
+  - Window
+  - Властивість
+translation_of: Web/API/Window/self
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <code><strong>Window.self</strong></code>, доступна лише для читання, повертає window як {{domxref("WindowProxy")}}. Її можна використовувати через крапку на об'єкті <code>window</code> (а саме, <code>window.self</code>) або автономно (<code>self</code>). Перевага автономного запису в тому, що схожий запис існує для не window контексту, наприклад у {{domxref("Worker", "Web Workers", "", 1)}}. Використовуючи <code>self</code>, ви можете звертатись до глобальної області видимості таким чином, що звернення працюватиме не лише в контексті window (<code>self</code> дорівнюватиме <code>window.self</code>), але також у контексті worker (тоді <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) {
+    // це вікно не є першим фреймом у списку
+}
+</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">Специфікація</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Коментар</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Немає змін від останнього знімку {{SpecName("HTML5.1")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Немає змін від {{SpecName("HTML5 W3C")}}</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'browsers.html#dom-self', 'Window.self')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td>Перший знімок, що містить визначення <code>Window.self</code>.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.self")}}</p>
+
+<h2 class="noinclude" id="Див._також">Див. також</h2>
+
+<ul>
+ <li>Еквівалент властивості <code>Worker</code>, {{domxref("WorkerGlobalScope.self")}}.</li>
+</ul>
diff --git a/files/uk/web/api/window/unhandledrejection_event/index.html b/files/uk/web/api/window/unhandledrejection_event/index.html
new file mode 100644
index 0000000000..8f621c5ea9
--- /dev/null
+++ b/files/uk/web/api/window/unhandledrejection_event/index.html
@@ -0,0 +1,120 @@
+---
+title: 'Window: подія unhandledrejection'
+slug: Web/API/Window/unhandledrejection_event
+tags:
+  - API
+  - Event
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - Window
+  - Worker
+  - unhandledrejection
+  - Проміс
+  - відхилення
+  - подія
+translation_of: Web/API/Window/unhandledrejection_event
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><span class="seoSummary">Подія <strong><code>unhandledrejection</code></strong> посилається у глобальну область видимості скрипта, коли об'єкт JavaScript {{jsxref("Promise")}}, що не має обробника відхилення, відхиляється; зазвичай, це {{domxref("window")}}, але також може бути {{domxref("Worker")}}.</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("PromiseRejectionEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Обробник подій</th>
+   <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Примітки_щодо_використання">Примітки щодо використання</h2>
+
+<p>Дозвіл події <code>unhandledrejection</code> спливати зрештою призведе до виводу повідомлення помилки у консолі. Ви можете запобігти цьому, викликавши {{domxref("Event.preventDefault", "preventDefault()")}} на інтерфейсі {{domxref("PromiseRejectionEvent")}}; дивіться приклад {{anch("Запобігання обробці за замовчуванням")}} нижче.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Тут ми маємо кілька прикладів, які демонструють, як ви можете скористатись подією <code>unhandledrejection</code>. Подія містить деяку корисну інформацію:</p>
+
+<dl>
+ <dt><code>promise</code></dt>
+ <dd>Власне, {{jsxref("Promise","проміс")}}, який був відхилений, не маючи обробника, який зреагував би на відхилення.</dd>
+ <dt><code>reason</code></dt>
+ <dd>Причина, яка була б передана у обробник відхилення, якби він існував. Дивіться більше інформації у {{jsxref("Promise.catch", "catch()")}}.</dd>
+</dl>
+
+<h3 id="Базове_логування_помилки">Базове логування помилки</h3>
+
+<p>Цей приклад просто логує інформацію щодо необробленого відхилення проміса у консоль.</p>
+
+<pre class="brush:js;">window.addEventListener("unhandledrejection", event =&gt; {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+});
+</pre>
+
+<p>Ви також можете скористатись обробником подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}, щоб налаштувати прослуховувач подій:</p>
+
+<pre class="brush: js">window.onunhandledrejection = event =&gt; {
+  console.warn(`НЕОБРОБЛЕНЕ ВІДХИЛЕННЯ ПРОМІСА: ${event.reason}`);
+};
+</pre>
+
+<h3 id="Запобігання_обробці_за_замовчуванням">Запобігання обробці за замовчуванням</h3>
+
+<p>Багато середовищ (таких як {{Glossary("Node.js")}}) за замовчуванням виводять необроблені відхилення промісів у консоль. Ви можете запобігти цьому, додавши обробник для подій <code>unhandledrejection</code>, що — на додачу до будь-яких інших задач, які ви бажаєте виконати — викликає {{domxref("Event.preventDefault()", "preventDefault()")}}, щоб скасувати подію, запобігаючи її спливанню та обробці кодом логування під час виконання. Це працює, тому що <code>unhandledrejection</code> скасовується.</p>
+
+<pre class="brush:js;">window.addEventListener('unhandledrejection', function (event) {
+  // ...тут ваш код, який обробляє необроблені відхилення...
+
+  // Запобігти обробці за замовчуванням (наприклад, виводу
+  // помилки у консоль)
+
+  event.preventDefault();
+});
+</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', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.Window.unhandledrejection_event")}}</p>
+
+<h2 id="Див._також">Див. також</h2>
+
+<ul>
+ <li>{{SectionOnPage("/uk/docs/Web/JavaScript/Guide/Using_promises", "Події відхилення промісів")}}</li>
+ <li>Обробник подій {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}<sup><a href="#seealso-footnote-1">1</a></sup></li>
+ <li>Подія <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a></li>
+ <li>{{jsxref("Promise")}}</li>
+</ul>
+
+<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> Відповідний обробник подій визначений як властивість у домішці {{domxref("WindowEventHandlers")}}, яка доступна як у інтерфейсі {{domxref("Window")}}, так і в усіх типах інтерфейсів {{domxref("Worker")}}.</p>
diff --git a/files/uk/web/api/windoweventhandlers/index.html b/files/uk/web/api/windoweventhandlers/index.html
new file mode 100644
index 0000000000..cb37cc2a2c
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/index.html
@@ -0,0 +1,105 @@
+---
+title: WindowEventHandlers
+slug: Web/API/WindowEventHandlers
+tags:
+  - API
+  - HTML-DOM
+  - Interface
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - WindowEventHandlers
+translation_of: Web/API/WindowEventHandlers
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p>The <strong><code>WindowEventHandlers</code></strong> mixin describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement additional specific event handlers.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: <code>WindowEventHandlers</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowEventHandlers</code>.</p>
+</div>
+
+<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.onmessageerror")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("MessageError")}} 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.onrejectionhandled")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("rejectionhandled")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected and the rejection has been handled.</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.onunhandledrejection")}}</dt>
+ <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unhandledrejection")}} event is raised, indicating that a {{jsxref("Promise")}} was rejected but the rejection was not handled.</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', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5.1', '#windoweventhandlers', 'WindowEventHandlers')}}</td>
+   <td>{{Spec2('HTML5.1')}}</td>
+   <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onlanguage</code> since the {{SpecName("HTML5 W3C")}} snapshot.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("HTML5 W3C", "#windoweventhandlers", "WindowEventHandlers")}}</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>{{Compat("api.WindowEventHandlers")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html
new file mode 100644
index 0000000000..81cabc79bd
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/onrejectionhandled/index.html
@@ -0,0 +1,52 @@
+---
+title: WindowEventHandlers.onrejectionhandled
+slug: Web/API/WindowEventHandlers/onrejectionhandled
+tags:
+  - API
+  - HTML DOM
+  - JavaScript
+  - Promise
+  - WindowEventHandlers
+  - onrejectionhandled
+  - Обробник подій
+  - Проміс
+  - події
+translation_of: Web/API/WindowEventHandlers/onrejectionhandled
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <strong><code>onrejectionhandled</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/rejectionhandled_event">rejectionhandled</a>. Ці події виникають, коли відхиляються об'єкти {{jsxref("Promise")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.addEventListener("rejectionhandled", function(event) { ... });
+window.onrejectionhandled = function(event) { ...};</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<pre class="brush: js">window.onrejectionhandled = function(e) {
+  console.log(e.reason);
+}</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', 'webappapis.html#handler-window-onrejectionhandled', 'onrejectionhandled')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onrejectionhandled")}}</p>
diff --git a/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html
new file mode 100644
index 0000000000..888297c406
--- /dev/null
+++ b/files/uk/web/api/windoweventhandlers/onunhandledrejection/index.html
@@ -0,0 +1,56 @@
+---
+title: WindowEventHandlers.onunhandledrejection
+slug: Web/API/WindowEventHandlers/onunhandledrejection
+tags:
+  - API
+  - HTML DOM
+  - Promise
+  - WindowEventHandlers
+  - onunhandledrejection
+  - Властивість
+  - події
+  - проміси
+translation_of: Web/API/WindowEventHandlers/onunhandledrejection
+---
+<div>{{APIRef}}</div>
+
+<p>Властивість <strong><code>onunhandledrejection</code></strong> домішки {{domxref("WindowEventHandlers")}} - це {{domxref("EventHandler")}} для обробки подій <a href="/uk/docs/Web/API/Window/unhandledrejection_event">unhandledrejection</a>. Ці події виникають для необроблених відхилень об'єктів {{jsxref("Promise")}}.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox">window.onunhandledrejection = <em>function</em>;</pre>
+
+<h3 id="Значення">Значення</h3>
+
+<p><code>function</code> - це {{domxref("EventHandler")}} або функція, яку треба викликати, коли вікно отримує події <code>unhandledrejection</code>. Обробник подій отримує вхідний параметр як {{domxref("PromiseRejectionEvent")}}.</p>
+
+<h2 id="Приклади">Приклади</h2>
+
+<p>Цей приклад просто виводить у консоль значення <code>reason</code> (причина) необроблених відхилень.</p>
+
+<pre class="brush: js">window.onunhandledrejection = function(e) {
+  console.log(e.reason);
+}</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', 'webappapis.html#handler-window-onunhandledrejection', 'onunhandledrejection')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Початкове визначення.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
+
+
+
+<p>{{Compat("api.WindowEventHandlers.onunhandledrejection")}}</p>
diff --git a/files/uk/web/api/windoworworkerglobalscope/index.html b/files/uk/web/api/windoworworkerglobalscope/index.html
new file mode 100644
index 0000000000..0c8177dbaa
--- /dev/null
+++ b/files/uk/web/api/windoworworkerglobalscope/index.html
@@ -0,0 +1,189 @@
+---
+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>The <strong><code>WindowOrWorkerGlobalScope</code></strong> mixin describes several features common to the {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}} interfaces. Each of these interfaces can, of course, add more features in addition to the ones listed below.</p>
+
+<div class="note">
+<p><strong>Note</strong>: <code>WindowOrWorkerGlobalScope</code> is a mixin and not an interface; you can't actually create an object of type <code>WindowOrWorkerGlobalScope</code>.</p>
+</div>
+
+<h2 id="Properties_2">Properties</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<div id="Properties">
+<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 origin of the global scope, serialized as a string.</dd>
+</dl>
+</div>
+
+<h2 id="Methods">Methods</h2>
+
+<p>These properties are defined on the {{domxref("WindowOrWorkerGlobalScope")}} mixin, and implemented by {{domxref("Window")}} and {{domxref("WorkerGlobalScope")}}.</p>
+
+<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>
+
+<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', 'webappapis.html#dom-origin', '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>
+
+<p> </p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{domxref("Window")}}</li>
+ <li>{{domxref("WorkerGlobalScope")}}</li>
+</ul>
diff --git a/files/uk/web/api/windowtimers/index.html b/files/uk/web/api/windowtimers/index.html
new file mode 100644
index 0000000000..8e3b6dfd47
--- /dev/null
+++ b/files/uk/web/api/windowtimers/index.html
@@ -0,0 +1,125 @@
+---
+title: WindowTimers
+slug: Web/API/WindowTimers
+tags:
+  - API
+  - HTML DOM
+  - Interface
+  - Intervals
+  - Mixin
+  - NeedsTranslation
+  - Reference
+  - Timers
+  - TopicStub
+  - Workers
+translation_of: Web/API/WindowOrWorkerGlobalScope
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<p><code><strong>WindowTimers</strong></code> is a mixin used to provide utility methods which set and clear timers. No objects of this type exist; instead, its methods are available on {{domxref("Window")}} for the standard browsing scope, or on {{domxref("WorkerGlobalScope")}} for workers.</p>
+
+<h2 id="Properties">Properties</h2>
+
+<p><em>This interface neither inherits nor provides any properties.</em></p>
+
+<h2 id="Methods">Methods</h2>
+
+<p><em>This interface does not inherit any methods. It offers the following methods.</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 delayed execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd>
+ <dt>{{domxref("WindowTimers.setInterval()")}}</dt>
+ <dd>Schedules a function to execute every time a given number of milliseconds elapses.</dd>
+ <dt>{{domxref("WindowTimers.setTimeout()")}}</dt>
+ <dd>Schedules a function to execute in a given amount of time.</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/uk/web/api/windowtimers/settimeout/index.html b/files/uk/web/api/windowtimers/settimeout/index.html
new file mode 100644
index 0000000000..19c90148ce
--- /dev/null
+++ b/files/uk/web/api/windowtimers/settimeout/index.html
@@ -0,0 +1,428 @@
+---
+title: WindowTimers.setTimeout()
+slug: Web/API/WindowTimers/setTimeout
+translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout
+---
+<div>{{APIRef("HTML DOM")}}</div>
+
+<div> </div>
+
+<div>Метод <code>setTimeout()</code>, що належить об'єкту {{domxref("WindowOrWorkerGlobalScope")}}, та наслідується від window.setTimeout,  встановлює таймер, що виконує функцію або вказаний фрагмент коду один раз, щойно спливе заданий час.</div>
+
+<div> </div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="syntaxbox"><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>
+
+<h3 id="Параметри">Параметри</h3>
+
+<dl>
+ <dt><code>func</code></dt>
+ <dd>{{jsxref("function")}} котру необхідно виконати після того, як вийде заданий час.</dd>
+ <dt><code>code</code></dt>
+ <dd>Опційний синтаксис, котрий дозволяє задавати рядок замість функції, котра компілюється і виконується при спрацюванні таймера. Використання цього синтаксису <strong>не рекомендовано</strong> з тих же ж причин, котрі роблять застосування {{jsxref("eval()")}} загрозою безпеці.</dd>
+ <dt><code>delay</code> {{optional_inline}}</dt>
+ <dt> </dt>
+ <dd>Час у мілісекундах (тисячних секунди), котрий таймер має зачекати перед тим, як виконати вказану функцію або код. Якщо цей параметр пропустити, буде використано значення 0. Варто зазначити, що справжній час затримки, може бути довшим. Дивіться розділ {{anch("Reasons for delays longer than specified","Причини, з яких затримка є фактично довшою ніж задано")}}</dd>
+ <dt><code>param1, ..., paramN</code> {{optional_inline}}</dt>
+ <dd>Додаткові параметри, що передаються до <em>func </em>або <em>code</em>, щойно час таймера спливе.</dd>
+</dl>
+
+<div class="note">
+<p><strong>Зверніть увагу: </strong> Internet Explorer 9 та більш ранні версії не підтримують додаткові параметри. Застосовуйте поліфіл, щобл уможливити цей функціонал (див. розділ <a href="#Callback_arguments">Callback arguments</a>).  </p>
+</div>
+
+<h3 id="Значення_що_повертається">Значення, що повертається</h3>
+
+<p><br>
+ Після виклику <code>setTimeout()</code>, повертається <code>timeoutID</code>  - це не нульове цифрове значення, що використовується для ідентифікації створеного таймера. Цей ідентифікатор можна передати як параметр до {{domxref("Window.clearTimeout()")}} щоб відмінити таймер.</p>
+
+<p>Корисно знати, що <code>setTimeout()</code> та {{domxref("WindowTimers.setInterval", "setInterval()")}} використовують спільну колекцію ID ідентифікаторів, а також що  <code>clearTimeout()</code> та {{domxref("WindowTimers.clearInterval", "clearInterval()")}} технічно можуть бути взаємозамінними. Тим не менше, задля ясності, варто завжди зіставляти їх, аби не допускати помилок під час розробки коду. </p>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>У наступному прикладі створено дві кнопки на веб сторінці, що прив'язані до <code>setTimeout()</code> та <code>clearTimeout()</code> процесів. Після натискання на першу кнопку встановлюється таймер, що викликає діалогове вікно alert через дві секунди та зберігає ID таймера для подальшого використання у <code>clearTimeout()</code>. За бажанням ви можете відмінити цей таймер, якщо натисните другу кнопку.</p>
+
+<h3 id="HTML_код">HTML код</h3>
+
+<pre class="brush: html">&lt;p&gt;Live Example&lt;/p&gt;
+&lt;button onclick="delayedAlert();"&gt;Відобразити діалогове вікно alert через дві секунди.&lt;/button&gt;
+&lt;p&gt;&lt;/p&gt;
+&lt;button onclick="clearAlert();"&gt;Відмінити відображення діалогового вікна.&lt;/button&gt;
+</pre>
+
+<h3 id="JavaScript_код">JavaScript код</h3>
+
+<pre class="brush: js">var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("Це було дійсно повільно!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+</pre>
+
+<h3 id="Результат">Результат</h3>
+
+<p>{{EmbedLiveSample('Example', 'Приклад')}}</p>
+
+<p>Дивіться також <a href="/en-US/docs/Web/API/WindowTimers/clearTimeout#Example"><code>clearTimeout()</code> example</a>.</p>
+
+<h2 id="Поліфіл">Поліфіл</h2>
+
+<p>Якщо вам необхідно передати один чи декілька аргументів до колбек функції, а також потрібно, щоб цей функціонал працював у браузерах, що не підтримують передачу додаткових аргументів для <code>setTimeout()</code> чи <code>setInterval()</code> (наприклад, версії Internet Explorer 9 чи нижче), ви можете застосувати цей поліфіл, який активує стандартну HTML5 функціональність. Просто додайте цей код на початку вашого скрипта: </p>
+
+<pre class="brush: js">/*\
+|*|
+|*|  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);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    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);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    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);
+    };
+  }, 0, 'test');
+}())
+</pre>
+
+<h2 id="Фікс_для_IE">Фікс для IE</h2>
+
+<p>Якщо вам потрібен фікс, який не впливатиме на роботу жодного іншого мобільного чи десктопного браузера, окрім IE9 та нижче, ви можете скористатись умовними коментарями JavaScript:</p>
+
+<pre class="brush: js">/*@cc_on
+  // conditional IE &lt; 9 only fix
+  @if (@_jscript_version &lt;= 9)
+  (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 instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+</pre>
+
+<p>Або використати умовні коментарі HTML для IE9 та нижче:</p>
+
+<pre class="brush: html">&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 instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+&lt;/script&gt;&lt;![endif]--&gt;
+</pre>
+
+<h2 id="Тимчасові_рішення">Тимчасові рішення</h2>
+
+<p>Ще одне можливе рішення - використання анонімної функції для виклику колбека, але це вартісне рішення. Приклад:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Приклад, наведений вище, може бути також написаний за допомогою   <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a>:</p>
+
+<pre class="brush: js">var intervalID = setTimeout(() =&gt; { myFunc("one", "two", "three"); }, 1000);
+</pre>
+
+<p>Ще одне рішення - використання   <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">function's <code>bind</code></a>. Приклад:</p>
+
+<pre class="brush: js">setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+</pre>
+
+<h2 id="Проблема_this">Проблема "<code>this</code>"</h2>
+
+<p>Коли ви передаєте до <code>setTimeout()</code> метод або будь-яку іншу функцію, ймовірно вона буде викликана не з тим значенням <code>this</code>, на яке ви очікуєте. Ця проблема детально описана у <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#As_an_object_method">JavaScript reference</a>.</p>
+
+<h3 id="Пояснення">Пояснення</h3>
+
+<p>Код, що виконується всередині <code>setTimeout()</code>, викликається із  іншого контекста виконання (<em>execution context</em>), ніж у функції, яка викликала <code>setTimeout</code>. До функції, яку викликають всередині <code>setTimeout</code> застосовуються звичайні правила призначення <code>this</code>. І, якщо ви не встановили <code>this</code> під час виклику або за допомогою <code>bind</code>, його значенням за замовчуванням буде об'єкт  <code>global</code> (або <code>window</code>) у нестрогому режимі, або <code>undefined</code> у строгому режимі. Значення <code>this</code> буде іншим, аніж у функції, яка викликала <code>setTimeout</code>. Розгляньте наступний приклад:</p>
+
+<pre class="brush: js">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"</pre>
+
+<p>Приклад вище працює тому, що <code>myMethod</code> викликано, як метод масиву <code>myArray</code>. Тому його <code>this</code> дорівнює <code>myArray</code>, а значення <code>this[sProperty]</code> всередині метода дорівнює <code>myArray[sProperty]</code>. Тим не менше, у наступному прикладі:</p>
+
+<pre class="brush: js">setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
+setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1.5 seconds</pre>
+
+<p>Метод <code>myArray.myMethod</code> передано до <code>setTimeout</code>, як звичайну функцію, якій не задано значення <code>this</code>. І коли вона викликається, її <code>this</code> за замовчуванням дорівнює об'єкту <code>window</code>. У  <code>setTimeout</code> неможливо передати <code>this</code> аргументом, як, наприклад, у методи Array (forEach, reduce, тощо), або через використання  <code>call</code>, як показано у прикладі нижче:</p>
+
+<pre class="brush: js">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>
+
+<h3 id="Можливі_рішення">Можливі рішення</h3>
+
+<p>Типовий спосіб вирішення цієї проблеми - використання функції обгортки, яка встановлює <code>this</code> із необхідним значенням: </p>
+
+<pre class="brush: js">setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>Стрілочна функція також є прийнятною альтернативою:</p>
+
+<pre class="brush: js">setTimeout(() =&gt; {myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout(() =&gt; {myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds</pre>
+
+<p>Ще одне можливе рішення проблеми <code>this</code> - замінити нативні глобальні функції <code>setTimeout()</code> та <code>setInterval()</code> кастомними функціями, які можуть приймати об'єкт <code>this</code> і застосовувати його у колбек функції, використовуючи  <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call"><code>Function.prototype.call</code></a>. Наприклад: </p>
+
+<pre class="brush: js">// Enable setting 'this' in 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>Зверніть увагу:  </strong>Подібний підхід дозволяє передавати будь-яку кількість аргументів у колбек функцію таймерів навіть для IE. Таким чином, цей спосіб може також бути використаний як поліфіл. Перегляньте параграф <a href="#Callback_arguments">Callback arguments</a> .</div>
+
+<p>Випробування нового підхода:</p>
+
+<pre class="brush: js">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>
+
+<div class="note"><strong>Зверніть увагу:  </strong>JavaScript 1.8.5 впровадив метод   <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">Function.prototype.bind()</a></code>, який встановлює значення <code>this</code> для кожного виклику вказаної функції. Це допомагає уникнути використання функції обгортки для призначення <code>this</code> колбека.</div>
+
+<p>Приклад використання <code>bind()</code>:</p>
+
+<pre class="brush: js">myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length &gt; 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+</pre>
+
+<h2 id="Примітки">Примітки</h2>
+
+<p>Таймер можна скасувати за допомогою {{domxref("Window.clearTimeout()")}}. Щоб викликати функцію повторно (наприклад, через кожні N мілісекунди), використовуйте  {{domxref("Window.setInterval()")}}.</p>
+
+<p>Важливо пам'ятати, що функція або фрагмент коду не можуть бути виконані, допоки не буде завершено поток функції, яка викликала <code>setTimeout()</code>. Наприклад. </p>
+
+<pre class="brush: js">function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');</pre>
+
+<p>Виведе в консоль:</p>
+
+<pre class="brush: js">After setTimeout
+foo has been called</pre>
+
+<p>Тому що, навіть не зважаючи на те, що <code>setTimeout</code> було викликано із нульовою затримкою, вона переміщується у чергу і її виконання відбудеться у найближчому наступному циклі, тобто не відразу. Код, що в данний момент виконується, повинен бути завершений. Тільки після цього функції, переміщені в чергу, будуть виконані. Тому порядок виконання може бути іншим, аніж очікувалось.</p>
+
+<h3 id="Passing_string_literals">Passing string literals</h3>
+
+<p>Passing a string instead of a function to <code>setTimeout()</code> suffers from the same hazards as using <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval#Don.27t_use_eval.21">eval</a>. </code></p>
+
+<pre class="brush: js">// Recommended
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Not recommended
+window.setTimeout("alert('Hello World!');", 500);
+</pre>
+
+<p>A string passed to <code>setTimeout</code> is 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="Причини_чому_затримка_є_фактично_довшою_ніж_вказано">Причини чому затримка є фактично довшою ніж вказано</h3>
+
+<p>There are a number of reasons why a timeout may take longer to fire than anticipated. This section describes the most common reasons.</p>
+
+<h4 id="Nested_timeouts_forced_to_>4ms">Nested timeouts forced to &gt;=4ms</h4>
+
+<p><a class="external" href="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 5.</p>
+
+<p>In fact, 4 ms 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>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">described here</a>.</p>
+
+<h4 id="Timeouts_in_inactive_tabs_clamped_to_>1000ms">Timeouts in inactive tabs clamped to &gt;=1000ms</h4>
+
+<p>To reduce the load (and associated battery usage) from background tabs, timeouts are often clamped to firing no more often than once per second (1000 ms) in inactive tabs.</p>
+
+<p>Firefox implements this behavior since version 5 (see {{bug(633421)}}, the 1000ms constant can be tweaked through the <span class="comment-copy"><code>dom.min_background_timeout_value</code> preference).</span> Chrome implements this behavior since version 11 (<a class="external" href="http://crbug.com/66078">crbug.com/66078</a>).</p>
+
+<p>Firefox for Android uses a timeout value of 15 minutes for background tabs since {{bug(736602)}} in Firefox 14, and background tabs can also be unloaded entirely.</p>
+
+<div class="note">
+<p>Firefox 50 no longer throttles background tabs if a Web Audio API {{domxref("AudioContext")}} is actively playing sound. Firefox 51 further amends this such that background tabs are no longer throttled if an {{domxref("AudioContext")}} is present in the tab at all, even if no sound is being played. These resolve a number of issues with apps which play note-based music not being able to time or synchronize the music properly when the tab is in the background.</p>
+</div>
+
+<h4 id="Late_timeouts">Late timeouts</h4>
+
+<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>
+
+<h3 id="Maximum_delay_value">Maximum delay value</h3>
+
+<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>
+
+<h2 id="Specifications">Specifications</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-settimeout", "WindowTimers.setTimeout()")}}</td>
+   <td>{{Spec2("HTML WHATWG")}}</td>
+   <td>Initial definition (DOM Level 0)</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>1.0</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>4.0</td>
+   <td>4.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Supports parameters for callback<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</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>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>1.0</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile("1")}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>1.0</td>
+  </tr>
+  <tr>
+   <td>Supports parameters for callback<sup>[1]</sup></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] Whether it supports the optional parameters when in its first form or not.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers">JavaScript timers</a></li>
+ <li><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></li>
+ <li>{{domxref("WindowTimers.setInterval")}}</li>
+ <li>{{domxref("window.requestAnimationFrame")}}</li>
+ <li><a href="/en-US/Add-ons/Code_snippets/Timers/Daemons"><em>Daemons</em> management</a></li>
+</ul>
diff --git a/files/uk/web/api/xmlhttprequest/index.html b/files/uk/web/api/xmlhttprequest/index.html
new file mode 100644
index 0000000000..11828836cf
--- /dev/null
+++ b/files/uk/web/api/xmlhttprequest/index.html
@@ -0,0 +1,178 @@
+---
+title: XMLHttpRequest
+slug: Web/API/XMLHttpRequest
+tags:
+  - AJAX
+  - API
+  - HTTP
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Web
+  - XHR
+translation_of: Web/API/XMLHttpRequest
+---
+<div>{{APIRef("XMLHttpRequest")}}</div>
+
+<div></div>
+
+<p>Об'єкти <span class="seoSummary"><code>XMLHttpRequest</code> використовуються для взаємодії з серверами. Ти можеш отримати дані за URL без повної перезагрузки сторінки. Це дозволяє веб-сторінці оновити частину вмісту, не перешкоджаючи роботі користувача</span> <code>XMLHttpRequest</code> часто використовуюється в програмуванні з використанням технології <a href="/en-US/docs/AJAX">Ajax</a>.</p>
+
+<p>{{InheritanceDiagram}}</p>
+
+<h5 id="Історія">Історія</h5>
+
+<p><code>XMLHttpRequest</code> був спочатку розроблений компанією Microsoft десь у 1999 році і пізніше прийнятий компаніями Mozilla, Apple та Google. З жовтня 2014 року він був <a class="external" href="https://xhr.spec.whatwg.org/">стандартизований в <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr></a>, разом з новим методом {{domxref("WindowOrWorkerGlobalScope.fetch()", "fetch()")}} на основі промісів.</p>
+
+<p>Не зважаючи на своє ім'я, <code>XMLHttpRequest</code> може використовуватись для отримання будь-якого типу даних, не лише XML, і підтримує інші протоколи окрім <a href="/en-US/docs/Web/HTTP">HTTP</a> (включаючи <code>file</code> і <code>ftp</code>).</p>
+
+<h2 id="Конструктор">Конструктор</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}}</dt>
+ <dd>Конструктор ініціалізує об'єкт XMLHttpRequest. Він має бути викликаний перед використанням будь-яких з його методів.</dd>
+</dl>
+
+<h2 id="Властивості">Властивості</h2>
+
+<p><em>Успадковує властивості {{domxref("XMLHttpRequestEventTarget")}} і {{domxref("EventTarget")}}.</em></p>
+
+<dl>
+ <dt id="xmlhttprequest-onreadystatechange">{{domxref("XMLHttpRequest.onreadystatechange")}}</dt>
+ <dd>{{domxref("EventHandler")}} викликається щоразу, коли атрибут <code>readyState</code> змінюється.</dd>
+ <dt id="xmlhttprequest-readystate">{{domxref("XMLHttpRequest.readyState")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>unsigned short</code>, the state запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.response")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("ArrayBuffer")}}, {{domxref("Blob")}}, {{domxref("Document")}}, об'єкт JavaScript, або ж {{domxref("DOMString")}}, залежить від значення {{domxref("XMLHttpRequest.responseType")}}, що містить тіло відповіді.</dd>
+ <dt id="xmlhttprequest-responsetext">{{domxref("XMLHttpRequest.responseText")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("DOMString")}}, що містить відповідь на запит в якості тексту, або <code>null</code>, якщо запит завершився помилкою або не був надісланим досі.</dd>
+ <dt id="xmlhttprequest-responsetype">{{domxref("XMLHttpRequest.responseType")}}</dt>
+ <dd>Вказує на тип відповіді.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseURL")}} {{readonlyinline}}</dt>
+ <dd>Повертає the serialized URL відповіді або ж пустий рядок, якщо URL — <code>null</code>.</dd>
+ <dt id="xmlhttprequest-responsexml">{{domxref("XMLHttpRequest.responseXML")}} {{readonlyinline}}</dt>
+ <dd>Повертає {{domxref("Document")}}, що містить відповідь на запит або <code>null</code>, якщо запит завершився помилкою, досі не був надісланий, або не може бути розпізнаний, як XML чи HTML. Not available in workers.</dd>
+ <dt id="xmlhttprequest-status">{{domxref("XMLHttpRequest.status")}} {{readonlyinline}}</dt>
+ <dd>Повертає <code>unsigned short</code> з статусом відповіді на запит.</dd>
+ <dt id="xmlhttprequest-statustext">{{domxref("XMLHttpRequest.statusText")}} {{readonlyinline}</dt>
+ <dd>Повертає {{domxref("DOMString")}}, що містить стрічку відповіді, повернену HTTP-сервером. Навідміну від {{domxref("XMLHTTPRequest.status")}}, що включає цілісний текст відповіді (наприклад, "<code>200 OK</code>").</dd>
+</dl>
+
+<div class="note">
+<p><strong>Увага:</strong> починаючи від специфікації HTTP/2 (<a href="https://http2.github.io/http2-spec/#rfc.section.8.1.2.4">8.1.2.4 Поля пседо-заголовку відповіді</a>), HTTP/2 не визначає шляху передачі версії чи reason phrase, що включається в стрічку статусу HTTP/1.1.</p>
+</div>
+
+<dl>
+ <dt id="xmlhttprequest-timeout">{{domxref("XMLHttpRequest.timeout")}}</dt>
+ <dd>Має тип <code>unsigned long</code>. Являє собою час у мілісекундах, відведений на запит перед тим, як буде автоматично перерваний.</dd>
+ <dt id="xmlhttprequesteventtarget-ontimeout">{{domxref("XMLHttpRequestEventTarget.ontimeout")}}</dt>
+ <dd>{{domxref("EventHandler")}}, що викликається щоразу після спливання часу, відведенного на запит. {{gecko_minversion_inline("12.0")}}</dd>
+ <dt id="xmlhttprequest-upload">{{domxref("XMLHttpRequest.upload")}} {{readonlyinline}}</dt>
+ <dd>{{domxref("XMLHttpRequestUpload")}}, що являє собою процес завантаження.</dd>
+ <dt id="xmlhttprequest-withcredentials">{{domxref("XMLHttpRequest.withCredentials")}}</dt>
+ <dd>{{domxref("Boolean")}}, що вказує, чи слід робити запити <code>Access-Control</code> використовуючи такі облікові дані, як файли cookie або заголовки авторизації.</dd>
+</dl>
+
+<h3 id="Нестандартні_властивості">Нестандартні властивості</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.channel")}}{{ReadOnlyInline}}</dt>
+ <dd>{{Interface("nsIChannel")}}. Канал, що використовується об'єктом коли виконується запит.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozAnon")}}{{ReadOnlyInline}}</dt>
+ <dd>Логічна змінна. Якщо її значення — істина, запит буде надісланий без кукі та заголовків аутентифікації.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozSystem")}}{{ReadOnlyInline}}</dt>
+ <dd>Логічна змінна. Якщо її значення — істина, оригінальна політика не буде застосована до запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozBackgroundRequest")}}</dt>
+ <dd>Логічна змінна. Вказує чи представляє об'єкт сервіс фонового запиту.</dd>
+ <dt>{{domxref("XMLHttpRequest.mozResponseArrayBuffer")}}{{gecko_minversion_inline("2.0")}} {{obsolete_inline("6")}} {{ReadOnlyInline}}</dt>
+ <dd>Є <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer"><code>ArrayBuffer</code></a>. Відповідь на запит у вигляді масиву JavaScript.</dd>
+ <dt>{{domxref("XMLHttpRequest.multipart")}}{{obsolete_inline("22")}}</dt>
+ <dd><strong>Це особливість Gecko, логічна змінна, що була видалена з Firefox/Gecko 22.</strong> Будь ласка, використовуйте натомість <a href="/en-US/docs/Web/API/Server-sent_events">Server-Sent Events</a>, <a href="/en-US/docs/Web/API/WebSockets_API">Web Sockets</a>, або <code>responseText</code>.</dd>
+</dl>
+
+<h3 id="Обробники_подій">Обробники подій</h3>
+
+<p><code>onreadystatechange</code> підримується у всіх браузерах, як властивість <code>XMLHttpRequest</code>.</p>
+
+<p>З тих пір у різних браузерах було впроваджено ряд додаткових обробників подій (<code>onload</code>, <code>onerror</code>, <code>onprogress</code> тощо). Вони підтримуються у Firefox. Зокрема, дивіться <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequestEventTarget" title="">nsIXMLHttpRequestEventTarget</a></code> та <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a>.</p>
+
+<p>Більш нові браузери, включаючи Firefox, також підтримують прослуховування подій <code>XMLHttpRequest</code> починаючи від стандарту API <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> в розширені на встановлення властивостей функцій обробника <code>on*</code>.</p>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.abort()")}}</dt>
+ <dd>Aborts the request if it has already been sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.getAllResponseHeaders()")}}</dt>
+ <dd>Returns all the response headers, separated by <a href="https://developer.mozilla.org/en-US/docs/Glossary/CRLF">CRLF</a>, as a string, or <code>null</code> if no response has been received.</dd>
+ <dt>{{domxref("XMLHttpRequest.getResponseHeader()")}}</dt>
+ <dd>Returns the string containing the text of the specified header, or <code>null</code> if either the response has not yet been received or the header doesn't exist in the response.</dd>
+ <dt>{{domxref("XMLHttpRequest.open()")}}</dt>
+ <dd>Initializes a request. This method is to be used from JavaScript code; to initialize a request from native code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#openRequest()"><code>openRequest()</code></a> instead.</dd>
+ <dt>{{domxref("XMLHttpRequest.overrideMimeType()")}}</dt>
+ <dd>Overrides the MIME type returned by the server.</dd>
+ <dt>{{domxref("XMLHttpRequest.send()")}}</dt>
+ <dd>Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent.</dd>
+ <dt>{{domxref("XMLHttpRequest.setRequestHeader()")}}</dt>
+ <dd>Sets the value of an HTTP request header. You must call <code>setRequestHeader()</code>after <a href="#open"><code>open()</code></a>, but before <code>send()</code>.</dd>
+</dl>
+
+<h3 id="Non-standard_methods">Non-standard methods</h3>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.init()")}}</dt>
+ <dd>Initializes the object for use from C++ code.</dd>
+</dl>
+
+<div class="warning"><strong>Warning:</strong> This method must <em>not</em> be called from JavaScript.</div>
+
+<dl>
+ <dt>{{domxref("XMLHttpRequest.openRequest()")}}</dt>
+ <dd>Initializes a request. This method is to be used from native code; to initialize a request from JavaScript code, use <a class="internal" href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest#open()"><code>open()</code></a> instead. See the documentation for <code>open()</code>.</dd>
+ <dt>{{domxref("XMLHttpRequest.sendAsBinary()")}}{{deprecated_inline()}}</dt>
+ <dd>A variant of the <code>send()</code> method that sends binary data.</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('XMLHttpRequest')}}</td>
+   <td>{{Spec2('XMLHttpRequest')}}</td>
+   <td>Live standard, latest version</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<div>{{Compat("api.XMLHttpRequest")}}</div>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>MDN tutorials covering XMLHttpRequest:
+  <ul>
+   <li><a href="/en-US/docs/AJAX/Getting_Started">Ajax — Getting Started</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/Web/API/XMLHttpRequest/HTML_in_XMLHttpRequest">HTML in XMLHttpRequest</a></li>
+   <li><a href="/en-US/docs/Web/API/FormData"><code>FormData</code></a></li>
+  </ul>
+ </li>
+ <li><a class="external" href="http://www.html5rocks.com/en/tutorials/file/xhr2/">HTML5 Rocks — New Tricks in XMLHttpRequest2</a></li>
+ <li><code>Chrome scope availability</code> — how to access XMLHttpRequest from JSM modules etc., which do not have access to DOM
+  <ul>
+   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li>
+   <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest">nsIXMLHttpRequest</a></li>
+  </ul>
+ </li>
+</ul>
diff --git a/files/uk/web/api/подія/index.html b/files/uk/web/api/подія/index.html
new file mode 100644
index 0000000000..e1aab3dfde
--- /dev/null
+++ b/files/uk/web/api/подія/index.html
@@ -0,0 +1,188 @@
+---
+title: Подія
+slug: Web/API/Подія
+translation_of: Web/API/Event
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace"><code><strong>Event</strong></code> інтерфейс представляє подію, що відбувається в DOM. Подія може бути ініційована дією користувача, наприклад, кліком мишки або натисканням клавіши на клавіатурі, або згенерована API, щоб показати прогрес асинхронного завдання, тощо. Це може бути також ініційовано програмно викликом <code><a href="https://developer.mozilla.org/uk/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> методу елемента, або створенням екземпляру події, потім відправленням його до вказаного цільового елементу, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code>.</font></p>
+
+<p><font color="#333333" face="consolas, Liberation Mono, courier, monospace">Існує багато різновидів подій, деякі з котрих використовують інші інтерфейси, основані на головному інтерфейсі <code>Event</code>. Сам по собі <code>Event</code> вміщає можливості та методи, спільні для всіх подій.</font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Багато елементів DOM можуть бути налаштовані прийняти (або "почути") ці події та виконати код у відповідь на процес їхньої обробки. Хендлери подій звичайно пов'язані або додаються до різноманітних <a href="https://developer.mozilla.org/uk/docs/Web/HTML/Element">HTML elements</a> (таких як <code>&lt;button&gt;</code>, <code>&lt;div&gt;</code>, <code>&lt;span&gt;</code>, і т.п.) при використанні <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/addEventListener">EventTarget.addEventListener()</a></code>, а це, як правило, замінює використання <a href="https://developer.mozilla.org/uk/docs/HTML/Global_attributes">атрибутів хендлера подій </a>старого HTML. Надалі за необхідності додавання, такі хендлери також можна відключати, якщо потрібно, використовуючи <code><a href="https://developer.mozilla.org/uk/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.  </font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Примітка: один елемент може мати декілька таких хендлерів, навіть для однієї й тієї ж події - особливо якщо окремо, незалежні модулі коду прикріплять їх, кожний для власних незалежних цілей. (Наприклад, вебсторінка з рекламним модулем та статичним модулем,</font><font face="consolas, Liberation Mono, courier, monospace"> обидва з яких забезпечують моніторинг перегляду відео.) </font></p>
+
+<p><font face="consolas, Liberation Mono, courier, monospace">Коли є багато вкладених елементів, кожний зі своїм особистим хендлером (хендлерами), обробка подій може стати дуже складною - особливо там, де батьківський елемент отримує ту ж саму подію, що й її дочірній елемент, тому що "просторово" вони перетинаються і таким чином подія технічно з'являється в них обох, а порядок обробки таких подій залежить від параметрів вспливаючих подій та захоплення кожного обробника.</font></p>
+
+<h2 id="Introduction" name="Introduction">Інтерфейси на основі Event</h2>
+
+<p>Нижче надано список інтерфейсів, які існують на основі головного <code>Event</code> інтерфейсу, із ссилками на відповідну документацію в довіднику MDN API.</p>
+
+<p>Зверніть увагу, що всі інтерфейси подій мають назви із закінченням "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>  перед поверненням з обробника події запобігає поширенню події.</dd>
+ <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt>
+ <dd>Булевий вираз вказує на те, чи скасовується подія.</dd>
+ <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt>
+ <dd>Булевий вираз вказує на те, чи може подія всплити через межу між  тінню 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")}} of 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-specific).</dd>
+ <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt>
+ <dd>Початкова ціль події перед будь-якими ретаргетингами. (Mozilla-specific).</dd>
+ <dt>{{domxref("Event.returnValue")}}</dt>
+ <dd>Історична властивість, представлена Internet Explorer і згодом прийнята в специфікацію DOM для того, щоб забезпечити продовження  роботи існуючих сайтів. В ідеалі, вам слід спробувати використати {{domxref(''Event.preventDefault()")}} та {{domxref("Event.defaultPrevented")}} замість нього, але ви можете використовувати <code>returnValue</code>, якщо ви  вирішите це зробити.</dd>
+ <dt>{{domxref("Event.returnValue")}} {{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>Час, коли було створено подію (в мілісекундах).  За специфікацією, це значення - час з епохи - але насправді визначення браузерів різняться.Крім того, ведеться робота, щоб змінити його на {{domxref("DOMHighResTimeStamp")}} .</dd>
+ <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt>
+ <dd>Вказує, чи  була подія ініційована браузером (наприклад, після натискання клавіши на клавіатурі користувачем) або за сценарієм (використовуючи метод створення подій, наприклад {{domxref("Event.initEvent")}}).</dd>
+ <dt>Застарілі властивості</dt>
+</dl>
+
+<p><strong>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</strong></p>
+
+<p>Застарілі; використовуйте замість них {{domxref("Event.composed", "composed")}}. ({{jsxref("Boolean")}} вказує, чи вспливе дана подія через тіньовий корінь у стандарт DOM.)</p>
+
+<h2 id="Methods" name="Methods">Методи</h2>
+
+<dl>
+ <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt>
+ <dd>Створює нову подію, котра повинна бути ініційована викликом її  <code>initEvent() </code>методу.</dd>
+ <dt>{{domxref("Event.composedPath()")}}</dt>
+ <dd>Повертає шлях події (об'єкти, на які слухачі будуть викликані). Це не включає вузли через тіньові дерева, якщо тіньовий корінь було створено із закритим {{domxref("ShadowRootmode")}}.</dd>
+ <dt>{{domxref("Event.preventDefault()")}}</dt>
+ <dd>Скасовує подію, (якщо її можливо скасувати).</dd>
+ <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt>
+ <dd>Для цієї конкретної події не дозволяйте викликати всіх інших слухачів. Сюди входять слухачі, приєднані до одного й того ж елемента, а також ті, що додаються до елементів, які буде прищеплено пізніше (наприклад, під час фази введення).</dd>
+ <dt>{{domxref("Event.stopPropagation()")}}</dt>
+ <dd>Зупиняє розповсюдження подій далі у DOM.</dd>
+ <dt>Застарілі методи</dt>
+ <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt>
+ <dd>Нестандартний. Використовуйте замість нього {{domxref("Event.defaultPrevented")}}.  (Повертає значення {{domxref("Event.defaultPrevented")}}.)</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>
+</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>приховано</p>
+
+<p>Таблиця сумісності на цій сторінці формується із структурованих даних. Якщо ви захочете побачити її, будь ласка, перевірте та відправте нам запит <a href="/uk/docs/">https://github/com/mdn/browser-compat-data</a></p>
+
+
+
+<h2 id="Дивіться_також">Дивіться також</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">Comparison of Event Targets</a> (<code>target</code> vs <code>currentTarget</code> vs <code>relatedTarget</code> vs <code>originalTarget</code>)</li>
+ <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Creating and triggering custom events</a></li>
+ <li>Для розробників Firefox add-on:
+  <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>
+</ul>
diff --git a/files/uk/web/api/подія/target/index.html b/files/uk/web/api/подія/target/index.html
new file mode 100644
index 0000000000..20c17f2d31
--- /dev/null
+++ b/files/uk/web/api/подія/target/index.html
@@ -0,0 +1,134 @@
+---
+title: Event.target
+slug: Web/API/Подія/target
+translation_of: Web/API/Event/target
+---
+<p>{{ApiRef("DOM")}}</p>
+
+<p>Властивість <code><strong>target</strong></code> інтерфейсу {{domxref("Event")}} є посиланням на об'єкт який відправив подію. Він відрізняється від {{domxref("Event.currentTarget")}} коли обробник події викликається в фазі спливання або фіксації події.</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="notranslate">var <em>theTarget</em> = <em>event</em>.target;</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<p>Властивість <code>event.target</code> може бути використана для реалізації <strong>делегування події</strong>.</p>
+
+<pre class="brush: js 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>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}}</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>{{CompatVersionUnknown}}</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) {
+  // Підтримка IE6-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">Порівняння Event Targets</a></li>
+</ul>
author	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
committer	Peter Bengtsson <mail@peterbe.com>	2020-12-08 14:43:23 -0500
commit	218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
tree	a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/api
parent	074785cea106179cb3305637055ab0a009ca74f2 (diff)
download	translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip