From 1c9b4d0154814e1768b9e2f67d4cd7d312be9c99 Mon Sep 17 00:00:00 2001
From: lvfangren <m18188267414@163.com>
Date: Fri, 4 Mar 2022 18:59:37 +0800
Subject: fix: delete repeat content

---
 files/zh-cn/web/css/inheritance/index.html | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/files/zh-cn/web/css/inheritance/index.html b/files/zh-cn/web/css/inheritance/index.html
index 9cfa528f96..52c94642c8 100644
--- a/files/zh-cn/web/css/inheritance/index.html
+++ b/files/zh-cn/web/css/inheritance/index.html
@@ -38,18 +38,6 @@ translation_of: Web/CSS/inheritance
 
 <p>…文本 "emphasized text" 就没有边框，因为 {{ Cssxref("border-style") }} 属性的初始值为<code>none</code>。</p>
 
-<p> {{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。</p>
-
-<p>可以使用 {{cssxref("all")}} 简写属性一次控制所有属性的继承，该属性将其值应用于所有属性，例如:</p>
-
-<pre class="brush: css">font {
-  all: revert;
-  font-size: 200%;
-  font-weight: bold;
-}</pre>
-
-<p>这会将 {{cssxref("font")}} 属性的样式恢复为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表。然后它将字体大小加倍并应用 {{cssxref("font-weight")}} 属性 为<code>"bold"</code></p>
-
 <h2 id="注意">注意</h2>
 
 <p>{{ Cssxref("inherit") }} 关键字允许显式的声明继承性，它对继承和非继承属性都生效。</p>
-- 
cgit v1.2.3-54-g00ecf


From 975097f9c50807cee58ef633605e0c62da792e73 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 4 Mar 2022 17:13:09 +0100
Subject: Update uint8clampedarray docs / translate missing page (#4387)

* Update uint8clampedarray docs / translate missing page

* fixed heading levels

* unecessary new line

* Minor typo fixes

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
---
 .../global_objects/uint8clampedarray/index.md      | 218 +++++++++------------
 .../uint8clampedarray/uint8clampedarray/index.md   |  95 +++++++++
 2 files changed, 184 insertions(+), 129 deletions(-)
 create mode 100644 files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md

diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md
index d8c0d29dcf..b9fad4500d 100644
--- a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md
+++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/index.md
@@ -1,129 +1,106 @@
 ---
 title: Uint8ClampedArray
 slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - Uint8ClampedArray
 translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
 original_slug: Web/JavaScript/Reference/Objets_globaux/Uint8ClampedArray
+browser-compat: javascript.builtins.Uint8ClampedArray
 ---
 {{JSRef}}
 
 Le tableau typé **`Uint8ClampedArray`** permet de représenter un tableau d'entiers non signés représentés sur 8 bits, dont les valeurs sont ramenées entre 0 et 255. Si une valeur non-entière est fournie, elle sera arrondie à l'entier le plus proche. Les éléments du tableau sont initialisés à `0`. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).
 
-## Syntaxe
+## Constructeur
 
-    new Uint8ClampedArray(); // apparu avec ES2017
-    new Uint8ClampedArray(longueur);
-    new Uint8ClampedArray(tableauTypé);
-    new Uint8ClampedArray(objet);
-    new Uint8ClampedArray(tampon [, décalage [, longueur]]);
+- [`Uint8ClampedArray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray)
+  - : Crée un nouvel objet `Uint8ClampedArray`.
 
-Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page _[TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe)_.
+## Propriétés statiques
 
-## Propriétés
+- [`Uint8ClampedArray.BYTES_PER_ELEMENT`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT)
+  - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurrence, pour `Uint8ClampedArray` ce sera `1`.
+- [`Uint8ClampedArray.name`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name)
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8ClampedArray` ce sera&nbsp;: "`Uint8ClampedArray`".
 
-- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8ClampedArray.BYTES_PER_ELEMENT")}}
-  - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour `Uint8ClampedArray` ce sera `1`.
-- Uint8ClampedArray.length
-  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}}.
-- {{jsxref("TypedArray.name", "Uint8ClampedArray.name")}}
-  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8ClampedArray` ce sera : "Uint8ClampedArray".
-- {{jsxref("TypedArray.prototype", "Uint8ClampedArray.prototype")}}
-  - : Le prototype des objets _TypedArray_.
+## Méthodes statiques
 
-## Méthodes
+- [`Uint8ClampedArray.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from)
+  - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi [`Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
+- [`Uint8ClampedArray.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of)
+  - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un nombre variable d'arguments. Voir aussi [`Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of).
 
-- {{jsxref("TypedArray.from", "Uint8ClampedArray.from()")}}
-  - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-- {{jsxref("TypedArray.of", "Uint8ClampedArray.of()")}}
-  - : Cette méthode permet de créer un nouvel objet `Uint8ClampedArray` à partir d'un nombre variable d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+## Propriétés des instances
 
-## Prototype `Uint8ClampedArray`
-
-Tous les objets `Uint8ClampedArray` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
-
-### Propriétés
-
-- `Uint8ClampedArray.prototype.constructor`
-  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint8ClampedArray`.
-- {{jsxref("TypedArray.prototype.buffer", "Uint8ClampedArray.prototype.buffer")}} {{readonlyInline}}
-  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint8ClampedArray` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.byteLength", "Uint8ClampedArray.prototype.byteLength")}} {{readonlyInline}}
-  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8ClampedArray` à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.byteOffset", "Uint8ClampedArray.prototype.byteOffset")}} {{readonlyInline}}
-  - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.length", "Uint8ClampedArray.prototype.length")}} {{readonlyInline}}
+- [`Uint8ClampedArray.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer)
+  - : Cette propriété renvoie l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) référencé par l'objet `Uint8ClampedArray`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8ClampedArray.prototype.byteLength`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength)
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8ClampedArray` à partir du début de l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8ClampedArray.prototype.byteOffset`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset)
+  - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8ClampedArray.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length)
   - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint8ClampedArray`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
 
-### Méthodes
-
-- {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}
-  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-- {{jsxref("TypedArray.entries", "Uint8ClampedArray.prototype.entries()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-- {{jsxref("TypedArray.every", "Uint8ClampedArray.prototype.every()")}}
-  - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-- {{jsxref("TypedArray.fill", "Uint8ClampedArray.prototype.fill()")}}
-  - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-- {{jsxref("TypedArray.filter", "Uint8ClampedArray.prototype.filter()")}}
-  - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-- {{jsxref("TypedArray.find", "Uint8ClampedArray.prototype.find()")}}
-  - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-- {{jsxref("TypedArray.findIndex", "Uint8ClampedArray.prototype.findIndex()")}}
-  - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-- {{jsxref("TypedArray.forEach", "Uint8ClampedArray.prototype.forEach()")}}
-  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-- {{jsxref("TypedArray.includes", "Uint8ClampedArray.prototype.includes()")}}
-  - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-- {{jsxref("TypedArray.indexOf", "Uint8ClampedArray.prototype.indexOf()")}}
-  - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-- {{jsxref("TypedArray.join", "Uint8ClampedArray.prototype.join()")}}
-  - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-- {{jsxref("TypedArray.keys", "Uint8ClampedArray.prototype.keys()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-- {{jsxref("TypedArray.lastIndexOf", "Uint8ClampedArray.prototype.lastIndexOf()")}}
-  - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-- {{jsxref("TypedArray.map", "Uint8ClampedArray.prototype.map()")}}
-  - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-- {{jsxref("TypedArray.move", "Uint8ClampedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8ClampedArray.prototype.copyWithin()")}}.
-- {{jsxref("TypedArray.reduce", "Uint8ClampedArray.prototype.reduce()")}}
-  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-- {{jsxref("TypedArray.reduceRight", "Uint8ClampedArray.prototype.reduceRight()")}}
-  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-- {{jsxref("TypedArray.reverse", "Uint8ClampedArray.prototype.reverse()")}}
-  - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-- {{jsxref("TypedArray.set", "Uint8ClampedArray.prototype.set()")}}
+## Méthodes des instances
+
+- [`Uint8ClampedArray.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin)
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également [`Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin).
+- [`Uint8ClampedArray.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/entries)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les paires clé/valeur pour chaque indice du tableau. Voir également [`Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/entries).
+- [`Uint8ClampedArray.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/every)
+  - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également [`Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every).
+- [`Uint8ClampedArray.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill)
+  - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également [`Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/fill).
+- [`Uint8ClampedArray.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/filter)
+  - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également [`Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
+- [`Uint8ClampedArray.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/find)
+  - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également [`Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find).
+- [`Uint8ClampedArray.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex)
+  - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition `-1` sera renvoyé. Voir également [`Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex).
+- [`Uint8ClampedArray.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/forEach)
+  - : Appelle une fonction pour chacun des éléments du tableau. Voir également [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach).
+- [`Uint8ClampedArray.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/includes)
+  - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également [`Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
+- [`Uint8ClampedArray.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf)
+  - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf).
+- [`Uint8ClampedArray.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/join)
+  - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join).
+- [`Uint8ClampedArray.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/keys)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les clés de chaque indice du tableau. Voir également [`Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/keys).
+- [`Uint8ClampedArray.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf)
+  - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf).
+- [`Uint8ClampedArray.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map)
+  - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également [`Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+- [`Uint8ClampedArray.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduce)
+  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).
+- [`Uint8ClampedArray.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight)
+  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight).
+- [`Uint8ClampedArray.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reverse)
+  - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également [`Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse).
+- [`Uint8ClampedArray.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set)
   - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-- {{jsxref("TypedArray.slice", "Uint8ClampedArray.prototype.slice()")}}
-  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-- {{jsxref("TypedArray.some", "Uint8ClampedArray.prototype.some()")}}
-  - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-- {{jsxref("TypedArray.sort", "Uint8ClampedArray.prototype.sort()")}}
-  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-- {{jsxref("TypedArray.subarray", "Uint8ClampedArray.prototype.subarray()")}}
+- [`Uint8ClampedArray.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/slice)
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).
+- [`Uint8ClampedArray.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/some)
+  - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également [`Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
+- [`Uint8ClampedArray.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort)
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également [`Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).
+- [`Uint8ClampedArray.prototype.subarray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray)
   - : Renvoie un nouvel objet `Uint8ClampedArray` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-- {{jsxref("TypedArray.values", "Uint8ClampedArray.prototype.values()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-- {{jsxref("TypedArray.toLocaleString", "Uint8ClampedArray.prototype.toLocaleString()")}}
-  - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-- {{jsxref("TypedArray.toString", "Uint8ClampedArray.prototype.toString()")}}
-  - : Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-- {{jsxref("TypedArray.@@iterator", "Uint8ClampedArray.prototype[@@iterator]()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+- [`Uint8ClampedArray.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/values)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. Voir également [`Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/values).
+- [`Uint8ClampedArray.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString)
+  - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également [`Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString).
+- [`Uint8ClampedArray.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString)
+  - : Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Voir également [`Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString).
+- [`Uint8ClampedArray.prototype[@@iterator]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau.
 
 ## Exemples
 
-Différentes façon de créer un objet `Uint8ClampedArray` :
+### Différentes façons de créer un objet `Uint8ClampedArray`
 
 ```js
 // Construction à partir d'une longueur
-var uintc8 = new Uint8ClampedArray(2);
+let uintc8 = new Uint8ClampedArray(2);
 uintc8[0] = 42;
 uintc8[1] = 1337;
 console.log(uintc8[0]); // 42
@@ -132,52 +109,35 @@ console.log(uintc8.length); // 2
 console.log(uintc8.BYTES_PER_ELEMENT); // 1
 
 // Construction à partir d'un tableau
-var arr = new Uint8ClampedArray([21,31]);
+let arr = new Uint8ClampedArray([21,31]);
 console.log(arr[1]); // 31
 
 // Construction à partir d'un autre TypedArray
-var x = new Uint8ClampedArray([21, 31]);
-var y = new Uint8ClampedArray(x);
+let x = new Uint8ClampedArray([21, 31]);
+let y = new Uint8ClampedArray(x);
 console.log(y[0]); // 21
 
 // Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8ClampedArray(buffer, 1, 4);
+let buffer = new ArrayBuffer(8);
+let z = new Uint8ClampedArray(buffer, 1, 4);
 
 // Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uintc8 = new Uint8ClampedArray(iterable);
+let iterable = function*(){ yield* [1,2,3]; }();
+let uintc8 = new Uint8ClampedArray(iterable);
 // Uint8ClampedArray[1, 2, 3]
 ```
 
 ## Spécifications
 
-| Spécification                                                                        | Statut                           | Commentaires                                                                                                                                       |
-| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015                                                                                                                       |
-| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. `new` est obligatoire.                                                                             |
-| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}}     | ECMAScript 2017 a modifié le constructeur `Uint8ClampedArray` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("javascript.builtins.Uint8ClampedArray")}}
-
-## Notes de compatibilité
-
-À partir d'ECMAScript 2015 (ES6), `Uint8ClampedArray` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler `Uint8ClampedArray` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
-
-```js example-bad
-var dv = Uint8ClampedArray([1, 2, 3]);
-// TypeError: calling a builtin Uint8ClampedArray constructor
-// without new is forbidden
-```
-
-```js example-good
-var dv = new Uint8ClampedArray([1, 2, 3]);
-```
+{{Compat}}
 
 ## Voir aussi
 
-- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("DataView")}}
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays)
+- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView)
diff --git a/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md
new file mode 100644
index 0000000000..9974741dca
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint8clampedarray/uint8clampedarray/index.md
@@ -0,0 +1,95 @@
+---
+title: Constructeur Uint8ClampedArray()
+slug: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray/Uint8ClampedArray
+browser-compat: javascript.builtins.Uint8ClampedArray.Uint8ClampedArray
+---
+{{JSRef}}
+
+Le constructeur **`Uint8ClampedArray()`** permet de créer un tableau typé contenant des entiers non-signés sur 8 bits, dont la valeur est ramenée entre 0 et 255. Une valeur indiquée, en dehors de cet intervalle, sera écrêtée. Une valeur non entière sera arrondie à l'entier le plus proche. Le contenu d'un tel tableau est initialisé avec des `0`. Une fois le tableau construit, on peut faire référence aux éléments du tableau à l'aide des méthodes de l'objet ou en utilisant la notation usuelle pour les tableaux avec les crochets.
+
+## Syntaxe
+
+```js
+new Uint8ClampedArray(); // apparu avec ES2017
+new Uint8ClampedArray(longueur);
+new Uint8ClampedArray(tableauType);
+new Uint8ClampedArray(objet);
+
+new Uint8ClampedArray(buffer);
+new Uint8ClampedArray(buffer, decalageOctets);
+new Uint8ClampedArray(buffer, decalageOctets, longueur);
+```
+
+### Paramètres
+
+- `longueur`
+  - : Lorsque le constructeur est invoqué avec un argument indiquant une longueur, un tampon de mémoire interne tabulé est créé, dont la taille en octets est `longueur` _multipliée par `BYTES_PER_ELEMENT`_, et qui contient des zéros.
+- `tableauType`
+  - : Lorsque le constructeur est invoqué avec un tableau typé comme argument (tout tableau typé en dehors des tableaux typés [`bigint`](/fr/docs/Glossary/BigInt) tel que [`Int32Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Int32Array)), ce tableau typé est copié dans un nouveau tableau typé. Chaque valeur de `tableauType` est convertie dans le type correspondant au constructeur avant d'être copiée dans le nouveau tableau. La longueur du nouveau tableau typé sera la même que celle de `tableauType`.
+- `objet`
+  - : Lorsque le constructeur est appelé avec un objet comme argument, le nouveau tableau typé est créé avec la méthode `TypedArray.from()`.
+- `buffer`, `decalageOctets`, `longueur`
+  - : Lorsque le constructeur est invoqué avec un tampon, éventuellement un décalage en octets et une longueur, une nouvelle vue en tableau typé est créée qui reflète l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Les paramètres `decalageOctets` et `longueur` indique l'intervalle de mémoire exposé à la vue. Si ces deux paramètres sont absents, c'est l'intégralité du tampon qui est vue. Si la longueur est absente, c'est la portion du tampon, après le décalage indiqué, qui est vue.
+
+## Exemples
+
+### Différentes façons de créer un objet `Uint8ClampedArray`
+
+```js
+// À partir d'une longueur
+let uintc8 = new Uint8ClampedArray(2);
+uintc8[0] = 42;
+uintc8[1] = 1337;
+console.log(uintc8[0]); // 42
+console.log(uintc8[1]); // 255 (écrétée)
+console.log(uintc8.length); // 2
+console.log(uintc8.BYTES_PER_ELEMENT); // 1
+
+// À partir d'un tableau
+let arr = new Uint8ClampedArray([21,31]);
+console.log(arr[1]); // 31
+
+// À partir d'un autre tableau typé
+let x = new Uint8ClampedArray([21, 31]);
+let y = new Uint8ClampedArray(x);
+console.log(y[0]); // 21
+
+// À partir d'un ArrayBuffer
+let buffer = new ArrayBuffer(8);
+let z = new Uint8ClampedArray(buffer, 1, 4);
+
+// À partir d'un itérable
+let iterable = function*(){ yield* [1,2,3]; }();
+let uintc8 = new Uint8ClampedArray(iterable);
+// Uint8ClampedArray[1, 2, 3]
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+### Notes de compatibilité
+
+À partir d'ECMAScript 2015, le constructeur `Uint8ClampedArray` doit être appelé avec l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). Invoquer le constructeur `Uint8ClampedArray` comme une fonction, sans `new`, déclenchera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError).
+
+```js example-bad
+let dv = Uint8ClampedArray([1, 2, 3]);
+// TypeError: calling a builtin Uint8ClampedArray
+// constructor without new is forbidden
+```
+
+```js example-good
+let dv = new Uint8ClampedArray([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays)
+- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView)
-- 
cgit v1.2.3-54-g00ecf


From 2fe3e4b4ea4352696f8012d8570109e9c0e6b3d8 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 4 Mar 2022 18:05:44 +0100
Subject: Update uint8array docs / translate missing page (#4395)

* Update uint8array docs / translate missing page

* Minor typo fixes/nitpicking

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
---
 .../reference/global_objects/uint8array/index.md   | 220 +++++++++------------
 .../global_objects/uint8array/uint8array/index.md  |  93 +++++++++
 2 files changed, 183 insertions(+), 130 deletions(-)
 create mode 100644 files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md

diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/index.md b/files/fr/web/javascript/reference/global_objects/uint8array/index.md
index e4cb8de79c..5f30ffb406 100644
--- a/files/fr/web/javascript/reference/global_objects/uint8array/index.md
+++ b/files/fr/web/javascript/reference/global_objects/uint8array/index.md
@@ -1,181 +1,141 @@
 ---
 title: Uint8Array
 slug: Web/JavaScript/Reference/Global_Objects/Uint8Array
-tags:
-  - Constructor
-  - JavaScript
-  - Reference
-  - TypedArray
-  - TypedArrays
-  - Uint8Array
 translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array
 original_slug: Web/JavaScript/Reference/Objets_globaux/Uint8Array
+browser-compat: javascript.builtins.Uint8Array
 ---
 {{JSRef}}
 
 Le tableau typé **`Uint8Array`** représente un tableau d'entiers non signés, représentés sur 8 bits. Les éléments du tableau sont initialisés à `0`. Une fois que le tableau est construit, on peut manipuler ses différents éléments grâce aux méthodes de l'objet ou grâce à la notation usuelle (avec les crochets).
 
-## Syntaxe
+## Constructeur
 
-    new Uint8Array(); // apparu avec ES2017
-    new Uint8Array(longueur);
-    new Uint8Array(tableauTypé);
-    new Uint8Array(objet);
-    new Uint8Array(tampon [, décalage [, longueur]]);
+- [`Uint8Array()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array)
+  - : Crée un nouvel objet `Uint8Array`.
 
-Pour plus d'informations sur la syntaxe du constructeur et le rôle des différents paramètres, voir la page _[TypedArray](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Syntaxe)_.
+## Propriétés statiques
 
-## Propriétés
+- [`Uint8Array.BYTES_PER_ELEMENT`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/BYTES_PER_ELEMENT)
+  - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurrence, pour `Uint8Array` ce sera `1`.
+- [`Uint8Array.name`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/name)
+  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8Array` ce sera&nbsp;: "`Uint8Array`".
 
-- {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Uint8Array.BYTES_PER_ELEMENT")}}
-  - : Cette propriété renvoie la taille d'un élément du tableau, en octets. En l'occurence, pour `Uint8Array` ce sera `1`.
-- Uint8Array.length
-  - : La propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}}.
-- {{jsxref("TypedArray.name", "Uint8Array.name")}}
-  - : Cette propriété renvoie la chaîne de caractères correspondant au nom du constructeur. Pour `Uint8Array` ce sera : "Uint8Array".
-- {{jsxref("TypedArray.prototype", "Uint8Array.prototype")}}
-  - : Le prototype des objets _TypedArray_.
+## Méthodes statiques
 
-## Méthodes
+- [`Uint8Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/from)
+  - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi [`Array.from()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
+- [`Uint8Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/of)
+  - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un nombre variable d'arguments. Voir aussi [`Array.of()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/of).
 
-- {{jsxref("TypedArray.from", "Uint8Array.from()")}}
-  - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un itérable ou d'un objet semblable à un tableau. Voir aussi {{jsxref("Array.from()")}}.
-- {{jsxref("TypedArray.of", "Uint8Array.of()")}}
-  - : Cette méthode permet de créer un nouvel objet `Uint8Array` à partir d'un nombre variables d'arguments. Voir aussi {{jsxref("Array.of()")}}.
+## Propriétés des instances
 
-## Prototype `Uint8Array`
-
-Tous les objets `Uint8Array` héritent de {{jsxref("TypedArray.prototype", "%TypedArray%.prototype")}}.
-
-### Propriétés
-
-- `Uint8Array.prototype.constructor`
-  - : Cette propriété renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera le constructeur `Uint8Array`.
-- {{jsxref("TypedArray.prototype.buffer", "Uint8Array.prototype.buffer")}} {{readonlyInline}}
-  - : Cette propriété renvoie l'objet {{jsxref("ArrayBuffer")}} référencé par l'objet `Uint8Array` Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.byteLength", "Uint8Array.prototype.byteLength")}} {{readonlyInline}}
-  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8Array` à partir du début de l'objet {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.byteOffset", "Uint8Array.prototype.byteOffset")}} {{readonlyInline}}
-  - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du {{jsxref("ArrayBuffer")}} correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
-- {{jsxref("TypedArray.prototype.length", "Uint8Array.prototype.length")}} {{readonlyInline}}
+- [`Uint8Array.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer)
+  - : Cette propriété renvoie l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) référencé par l'objet `Uint8Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8Array.prototype.byteLength`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteLength)
+  - : Cette propriété renvoie la longueur, exprimée en octets, de l'objet `Uint8Array` à partir du début de l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8Array.prototype.byteOffset`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/byteOffset)
+  - : Cette propriété renvoie le décalage, en nombre d'octets, entre le début du tableau typé courant et du début du [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
+- [`Uint8Array.prototype.length`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/length)
   - : Cette propriété renvoie le nombre d'éléments contenus dans le tableau `Uint8Array`. Elle est déterminée lors de la construction et est accessible uniquement en **lecture seule**.
 
-### Méthodes
-
-- {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}
-  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également {{jsxref("Array.prototype.copyWithin()")}}.
-- {{jsxref("TypedArray.entries", "Uint8Array.prototype.entries()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les paires clé/valeur pour chaque indice du tableau. Voir également {{jsxref("Array.prototype.entries()")}}.
-- {{jsxref("TypedArray.every", "Uint8Array.prototype.every()")}}
-  - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.every()")}}.
-- {{jsxref("TypedArray.fill", "Uint8Array.prototype.fill()")}}
-  - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également {{jsxref("Array.prototype.fill()")}}.
-- {{jsxref("TypedArray.filter", "Uint8Array.prototype.filter()")}}
-  - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également {{jsxref("Array.prototype.filter()")}}.
-- {{jsxref("TypedArray.find", "Uint8Array.prototype.find()")}}
-  - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également {{jsxref("Array.prototype.find()")}}.
-- {{jsxref("TypedArray.findIndex", "Uint8Array.prototype.findIndex()")}}
-  - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition -1 sera renvoyé. Voir également {{jsxref("Array.prototype.findIndex()")}}.
-- {{jsxref("TypedArray.forEach", "Uint8Array.prototype.forEach()")}}
-  - : Appelle une fonction pour chacun des élément du tableau. Voir également {{jsxref("Array.prototype.forEach()")}}.
-- {{jsxref("TypedArray.includes", "Uint8Array.prototype.includes()")}}
-  - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également {{jsxref("Array.prototype.includes()")}}.
-- {{jsxref("TypedArray.indexOf", "Uint8Array.prototype.indexOf()")}}
-  - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.indexOf()")}}.
-- {{jsxref("TypedArray.join", "Uint8Array.prototype.join()")}}
-  - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également {{jsxref("Array.prototype.join()")}}.
-- {{jsxref("TypedArray.keys", "Uint8Array.prototype.keys()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les clés de chaque indice du tableau. Voir également {{jsxref("Array.prototype.keys()")}}.
-- {{jsxref("TypedArray.lastIndexOf", "Uint8Array.prototype.lastIndexOf()")}}
-  - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur -1 sera renvoyée. Voir également {{jsxref("Array.prototype.lastIndexOf()")}}.
-- {{jsxref("TypedArray.map", "Uint8Array.prototype.map()")}}
-  - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également {{jsxref("Array.prototype.map()")}}.
-- {{jsxref("TypedArray.move", "Uint8Array.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-  - : Ancienne version, non-standard, de {{jsxref("TypedArray.copyWithin", "Uint8Array.prototype.copyWithin()")}}.
-- {{jsxref("TypedArray.reduce", "Uint8Array.prototype.reduce()")}}
-  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduce()")}}.
-- {{jsxref("TypedArray.reduceRight", "Uint8Array.prototype.reduceRight()")}}
-  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également {{jsxref("Array.prototype.reduceRight()")}}.
-- {{jsxref("TypedArray.reverse", "Uint8Array.prototype.reverse()")}}
-  - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également {{jsxref("Array.prototype.reverse()")}}.
-- {{jsxref("TypedArray.set", "Uint8Array.prototype.set()")}}
-  - : Enregistre plusieurs valeurs dans le tableau typé à partir de valeurs d'un autre tableau.
-- {{jsxref("TypedArray.slice", "Uint8Array.prototype.slice()")}}
-  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également {{jsxref("Array.prototype.slice()")}}.
-- {{jsxref("TypedArray.some", "Uint8Array.prototype.some()")}}
-  - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également {{jsxref("Array.prototype.some()")}}.
-- {{jsxref("TypedArray.sort", "Uint8Array.prototype.sort()")}}
-  - : Trie les éléments du tableau et renvoie ce tableau. Voir également {{jsxref("Array.prototype.sort()")}}.
-- {{jsxref("TypedArray.subarray", "Uint8Array.prototype.subarray()")}}
+## Méthodes des instances
+
+- [`Uint8Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/copyWithin)
+  - : Copie une suite d'éléments d'un tableau dans le tableau. Voir également [`Array.prototype.copyWithin()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin).
+- [`Uint8Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/entries)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les paires clé/valeur pour chaque indice du tableau. Voir également [`Array.prototype.entries()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/entries).
+- [`Uint8Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/every)
+  - : Teste si l'ensemble des éléments du tableau remplissent une certaine condition donnée par une fonction de test. Voir également [`Array.prototype.every()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every).
+- [`Uint8Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/fill)
+  - : Remplit les éléments d'un tableau avec une certaine valeur pour les éléments compris entre un indice de début et un indice de fin. Voir également [`Array.prototype.fill()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/fill).
+- [`Uint8Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/filter)
+  - : Crée un nouveau tableau dont tous les éléments proviennent de ce tableau et respectent une condition fournie par une fonction de test. Voir également [`Array.prototype.filter()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
+- [`Uint8Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/find)
+  - : Renvoie une valeur trouvée dans le tableau s'il existe un élément du tableau qui satisfait une condition fournie par une fonction de test, s'il n'y a pas de tel élément `undefined` sera renvoyé. Voir également [`Array.prototype.find()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/find).
+- [`Uint8Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/findIndex)
+  - : Renvoie l'indice d'un élément qui satisfait une condition fournie par une fonction de test, si aucun élément ne remplit la condition `-1` sera renvoyé. Voir également [`Array.prototype.findIndex()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex).
+- [`Uint8Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/forEach)
+  - : Appelle une fonction pour chacun des éléments du tableau. Voir également [`Array.prototype.forEach()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach).
+- [`Uint8Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/includes)
+  - : Détermine si le tableau typé contient un élément donné. Cette méthode renvoie `true` ou `false` selon le cas de figure. Voir également [`Array.prototype.includes()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/includes).
+- [`Uint8Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/indexOf)
+  - : Renvoie le premier indice (le plus petit) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf).
+- [`Uint8Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/join)
+  - : Fusionne l'ensemble des éléments du tableau en une chaîne de caractères. Voir également [`Array.prototype.join()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/join).
+- [`Uint8Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/keys)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les clés de chaque indice du tableau. Voir également [`Array.prototype.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/keys).
+- [`Uint8Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/lastIndexOf)
+  - : Renvoie le dernier indice (le plus élevé) d'un élément du tableau qui est égal à la valeur fournie. Si aucun élément ne correspond, la valeur `-1` sera renvoyée. Voir également [`Array.prototype.lastIndexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf).
+- [`Uint8Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/map)
+  - : Crée un nouveau tableau dont les éléments sont les images des éléments du tableau courant par une fonction donnée. Voir également [`Array.prototype.map()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
+- [`Uint8Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduce)
+  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de gauche à droite) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduce()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce).
+- [`Uint8Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reduceRight)
+  - : Applique une fonction sur un accumulateur et chaque élément du tableau (de droite à gauche) afin de réduire le tableau en une seule valeur. Voir également [`Array.prototype.reduceRight()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/ReduceRight).
+- [`Uint8Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/reverse)
+  - : Inverse l'ordre des éléments d'un tableau. Le premier élément du tableau devient le dernier et le dernier devient le premier (et ainsi de suite). Voir également [`Array.prototype.reverse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse).
+- [`Uint8Array.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set)
+  - : Enregistre plusieurs valeurs dans le tableau typé à partir des valeurs d'un autre tableau.
+- [`Uint8Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/slice)
+  - : Extrait un fragment d'un tableau et renvoie ce fragment. Voir également [`Array.prototype.slice()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).
+- [`Uint8Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/some)
+  - : Renvoie `true` si au moins un des éléments remplit une condition donnée par une fonction de test. Voir également [`Array.prototype.some()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/some).
+- [`Uint8Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/sort)
+  - : Trie les éléments du tableau et renvoie ce tableau. Voir également [`Array.prototype.sort()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort).
+- [`Uint8Array.prototype.subarray()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray)
   - : Renvoie un nouvel objet `Uint8Array` qui est le fragment du tableau courant, entre les indices de début et de fin donnés.
-- {{jsxref("TypedArray.values", "Uint8Array.prototype.values()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau. Voir également {{jsxref("Array.prototype.values()")}}.
-- {{jsxref("TypedArray.toLocaleString", "Uint8Array.prototype.toLocaleString()")}}
-  - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toLocaleString()")}}.
-- {{jsxref("TypedArray.toString", "Uint8Array.prototype.toString()")}}
-  - : Renvoie une chaîne de caractère qui représente le tableau et ses éléments. Voir également {{jsxref("Array.prototype.toString()")}}.
-- {{jsxref("TypedArray.@@iterator", "Uint8Array.prototype[@@iterator]()")}}
-  - : Renvoie un nouvel objet `Array Iterator` qui contient les valeurs correspondantes à chaque indice du tableau.
+- [`Uint8Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/values)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau. Voir également [`Array.prototype.values()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/values).
+- [`Uint8Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toLocaleString)
+  - : Renvoie une chaîne de caractères localisée qui représente le tableau et ses éléments. Voir également [`Array.prototype.toLocaleString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString).
+- [`Uint8Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/toString)
+  - : Renvoie une chaîne de caractères qui représente le tableau et ses éléments. Voir également [`Array.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/toString).
+- [`Uint8Array.prototype[@@iterator]()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)
+  - : Renvoie un nouvel *itérateur de tableau* qui contient les valeurs correspondantes à chaque indice du tableau.
 
 ## Exemples
 
-Différentes façons de construire un objet `Uint8Array` :
+### Différentes façons de construire un objet `Uint8Array`
 
 ```js
 // Construction à partir d'une longueur
-var uint8 = new Uint8Array(2);
+let uint8 = new Uint8Array(2);
 uint8[0] = 42;
 console.log(uint8[0]); // 42
 console.log(uint8.length); // 2
 console.log(uint8.BYTES_PER_ELEMENT); // 1
 
 // Construction à partir d'un tableau
-var arr = new Uint8Array([21,31]);
+let arr = new Uint8Array([21,31]);
 console.log(arr[1]); // 31
 
 // Construction à partir d'un tableau typé
-var x = new Uint8Array([21, 31]);
-var y = new Uint8Array(x);
+let x = new Uint8Array([21, 31]);
+let y = new Uint8Array(x);
 console.log(y[0]); // 21
 
 // Construction à partir d'un ArrayBuffer
-var buffer = new ArrayBuffer(8);
-var z = new Uint8Array(buffer, 1, 4);
+let buffer = new ArrayBuffer(8);
+let z = new Uint8Array(buffer, 1, 4);
 
 // Construction à partir d'un itérable
-var iterable = function*(){ yield* [1,2,3]; }();
-var uint8 = new Uint8Array(iterable);
+let iterable = function*(){ yield* [1,2,3]; }();
+let uint8 = new Uint8Array(iterable);
 // Uint8Array[1, 2, 3]
 ```
 
 ## Spécifications
 
-| Spécification                                                                        | État                             | Commentaires                                                                                                                                |
-| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('Typed Array')}}                                                 | {{Spec2('Typed Array')}} | Englobée par ECMAScript 2015.                                                                                                               |
-| {{SpecName('ES6', '#table-49', 'TypedArray constructors')}}     | {{Spec2('ES6')}}             | Définition initiale au sein d'un standard ECMA. `new` est obligatoire.                                                                      |
-| {{SpecName('ESDraft', '#table-49', 'TypedArray constructors')}} | {{Spec2('ESDraft')}}     | ECMAScript 2017 a modifié le constructeur `Uint8Array` afin qu'il utilise l'opération `ToIndex` et qu'il puisse être utilisé sans argument. |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("javascript.builtins.Uint8Array")}}
-
-## Notes de compatibilité
-
-À partir d'ECMAScript 2015 (ES6), `Uint8Array` doit être utilisé avec {{jsxref("Opérateurs/L_opérateur_new", "new")}}. Appeler un constructeur `Uint8Array` comme une fonction, sans `new`, provoquera une exception {{jsxref("TypeError")}}.
-
-```js example-bad
-var dv = Uint8Array([1, 2, 3]);
-// TypeError: calling a builtin Uint8Array constructor
-// without new is forbidden
-```
-
-```js example-good
-var dv = new Uint8Array([1, 2, 3]);
-```
+{{Compat}}
 
 ## Voir aussi
 
-- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Tableaux_typés)
-- {{jsxref("ArrayBuffer")}}
-- {{jsxref("DataView")}}
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays)
+- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView)
diff --git a/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md b/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md
new file mode 100644
index 0000000000..5248fb1261
--- /dev/null
+++ b/files/fr/web/javascript/reference/global_objects/uint8array/uint8array/index.md
@@ -0,0 +1,93 @@
+---
+title: Constructeur Uint8Array()
+slug: Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array
+translation_of: Web/JavaScript/Reference/Global_Objects/Uint8Array/Uint8Array
+browser-compat: javascript.builtins.Uint8Array.Uint8Array
+---
+{{JSRef}}
+
+Le constructeur **`Uint8Array()`** crée un tableau typé contenant des entiers non-signés sur 8 bits. Le contenu de ces éléments est initialisé à `0`. Une fois le tableau construit, on peut faire référence aux éléments du tableau à l'aide des méthodes de l'objet ou en utilisant la notation usuelle pour les tableaux avec les crochets.
+
+## Syntaxe
+
+```js
+new Uint8Array(); // apparu avec ES2017
+new Uint8Array(longueur);
+new Uint8Array(tableauType);
+new Uint8Array(objet);
+
+new Uint8Array(buffer);
+new Uint8Array(buffer, decalageOctets);
+new Uint8Array(buffer, decalageOctets, longueur);
+```
+
+### Paramètres
+
+- `longueur`
+  - : Lorsque le constructeur est invoqué avec un argument indiquant une longueur, un tampon de mémoire interne tabulé est créé, dont la taille en octets est `longueur` _multipliée par `BYTES_PER_ELEMENT`_, et qui contient des zéros.
+- `tableauType`
+  - : Lorsque le constructeur est invoqué avec un tableau typé comme argument (tout tableau typé en dehors des tableaux typés [`bigint`](/fr/docs/Glossary/BigInt) tel que `Int32Array`), ce tableau typé est copié dans un nouveau tableau typé. Chaque valeur de `tableauType` est convertie dans le type correspondant au constructeur avant d'être copiée dans le nouveau tableau. La longueur du nouveau tableau typé sera la même que celle de `tableauType`.
+- `objet`
+  - : Lorsque le constructeur est appelé avec un objet comme argument, le nouveau tableau typé est créé avec la méthode `TypedArray.from()`.
+- `buffer`, `decalageOctets`, `longueur`
+  - : Lorsque le constructeur est invoqué avec un tampon, éventuellement un décalage en octets et une longueur, une nouvelle vue en tableau typé est créée qui reflète l'objet [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) correspondant. Les paramètres `decalageOctets` et `longueur` indique l'intervalle de mémoire exposé à la vue. Si ces deux paramètres sont absents, c'est l'intégralité du tampon qui est vue. Si la longueur est absente, c'est la portion du tampon, après le décalage indiqué, qui est vue.
+
+## Exemples
+
+### Différentes façons de construire un objet `Uint8Array`
+
+```js
+// Construction à partir d'une longueur
+let uint8 = new Uint8Array(2);
+uint8[0] = 42;
+console.log(uint8[0]); // 42
+console.log(uint8.length); // 2
+console.log(uint8.BYTES_PER_ELEMENT); // 1
+
+// Construction à partir d'un tableau
+let arr = new Uint8Array([21,31]);
+console.log(arr[1]); // 31
+
+// Construction à partir d'un tableau typé
+let x = new Uint8Array([21, 31]);
+let y = new Uint8Array(x);
+console.log(y[0]); // 21
+
+// Construction à partir d'un ArrayBuffer
+let buffer = new ArrayBuffer(8);
+let z = new Uint8Array(buffer, 1, 4);
+
+// Construction à partir d'un itérable
+let iterable = function*(){ yield* [1,2,3]; }();
+let uint8 = new Uint8Array(iterable);
+// Uint8Array[1, 2, 3]
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Notes de compatibilité
+
+À partir d'ECMAScript 2015 (ES6), `Uint8Array` doit être utilisé avec l'opérateur [`new`](/fr/docs/Web/JavaScript/Reference/Operators/new). Appeler un constructeur `Uint8Array` comme une fonction, sans `new`, provoquera une exception [`TypeError`](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypeError).
+
+```js example-bad
+let dv = Uint8Array([1, 2, 3]);
+// TypeError: calling a builtin Uint8Array constructor
+// without new is forbidden
+```
+
+```js example-good
+let dv = new Uint8Array([1, 2, 3]);
+```
+
+## Voir aussi
+
+- [Une prothèse d'émulation (<i lang="en">polyfill</i>) pour `Uint8ClampedArray` avec `core-js`](https://github.com/zloirock/core-js#ecmascript-typed-arrays)
+- [Les tableaux typés en JavaScript](/fr/docs/Web/JavaScript/Typed_arrays)
+- [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
+- [`DataView`](/fr/docs/Web/JavaScript/Reference/Global_Objects/DataView)
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf


From 5fab7a350aae684ba816f4caa8ed1453687e461f Mon Sep 17 00:00:00 2001
From: DegrangeM <53106394+DegrangeM@users.noreply.github.com>
Date: Fri, 4 Mar 2022 20:49:55 +0100
Subject: [French] Fix explanation about the defer attribute (#4404)

Fix #4113
---
 files/fr/web/javascript/guide/modules/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/javascript/guide/modules/index.md b/files/fr/web/javascript/guide/modules/index.md
index 96cdf51b3d..4c2db796ba 100644
--- a/files/fr/web/javascript/guide/modules/index.md
+++ b/files/fr/web/javascript/guide/modules/index.md
@@ -182,7 +182,7 @@ Les instructions `import` et `export` ne peuvent être utilisées qu'à l'intér
 
 - Attention aux tests sur un environnement local&nbsp;: si vous chargez le fichier HTML directement depuis le système de fichier dans le navigateur (en double-cliquant dessus par exemple, ce qui donnera une URL `file://`), vous rencontrerez des erreurs CORS pour des raisons de sécurité. Il faut donc un serveur local afin de pouvoir tester.
 - On pourra avoir un comportement différent entre un même script utilisé comme un module et un script utilisé de façon « classique ». En effet, les modules utilisent automatiquement [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode).
-- Il n'est pas nécessaire d'utiliser l'attribut `defer` (voir [les attributs de `<script>`](/fr/docs/Web/HTML/Element/script#attributs)) lors du chargement d'un module, ceux-ci sont automatiquement chargés à la demande.
+- Il n'est pas nécessaire d'utiliser l'attribut `defer` (voir [les attributs de `<script>`](/fr/docs/Web/HTML/Element/script#attributs)) lors du chargement d'un module, celui-ci étant automatiquement différé.
 - Les modules sont exécutés une seule fois, même s'ils sont référencés dans plusieurs balises `<script>`.
 - Enfin, les fonctionnalités importées ne sont disponibles qu'au sein de la portée du script qui les utilise ! Les valeurs importées ne sont manipulables que depuis le script, elles ne sont pas rattachées à la portée globale. On ne pourra par exemple pas y accéder depuis la console JavaScript. Bien que les erreurs soient toujours indiquées dans les outils de développement, certaines techniques de débogage ne seront pas disponibles.
 
-- 
cgit v1.2.3-54-g00ecf


From 582025021017c11b128879cbfa45c0e50997cd7f Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Fri, 4 Mar 2022 18:27:55 +0900
Subject: learn/javasrcipt/client-side_webapis 内の英単語の前後に空白を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../learn/javascript/client-side_web_apis/index.html   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/files/ja/learn/javascript/client-side_web_apis/index.html b/files/ja/learn/javascript/client-side_web_apis/index.html
index 2335c02956..f0d4f7740e 100644
--- a/files/ja/learn/javascript/client-side_web_apis/index.html
+++ b/files/ja/learn/javascript/client-side_web_apis/index.html
@@ -19,11 +19,11 @@ translation_of: Learn/JavaScript/Client-side_web_APIs
 ---
 <div>{{LearnSidebar}}</div>
 
-<p class="summary">Web サイトやアプリケーション用にクライアント側のJavaScriptを書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p>
+<p class="summary">Web サイトやアプリケーション用にクライアント側の JavaScript を書いていると、すぐに<strong>アプリケーションプログラミングインターフェース </strong>(<u>A</u>pprication <u>P</u>rogramming <u>I</u>nterfaces、<strong>API</strong>) にでくわします。API とはブラウザやサイトが動作している OS の様々な面を操作したり、他の Web サイト、サービスから取得したデータを操作するためのプログラムされた機能です。このモジュールでは API とは何か、開発作業の中でよく見かける最もよく利用される API のいくつかについて、どのように使うかを説明していきます。</p>
 
 <h2 id="前提条件">前提条件</h2>
 
-<p>このモジュールをよく理解するためには、ここまでの一連のJavaScriptに関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p>
+<p>このモジュールをよく理解するためには、ここまでの一連の JavaScript に関するモジュール (<a href="/ja/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/ja/docs/Learn/JavaScript/Building_blocks">Building blocks</a> と <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript objects</a>) の学習をすませているべきです。これらのモジュールでは大抵簡単な API を使っていますが、その助けなしにクライアント側の JavaScript を書き上げるのは難しいからです。このチュートリアルの中では、JavaScript 言語のコア部分については十分理解しているものとして、よく使われる Web API についてもう少し詳しく探っていきます。</p>
 
 <p><a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> に関する基礎知識も役に立つでしょう。</p>
 
@@ -35,17 +35,17 @@ translation_of: Learn/JavaScript/Client-side_web_APIs
 
 <dl>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Web API の紹介</a></dt>
- <dd>まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIが何なのか、どんな使い方があるのかも見ていきます。</dd>
+ <dd>まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API が何なのか、どんな使い方があるのかも見ていきます。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">文章の操作</a></dt>
- <dd>Webページやアプリを書く場合に、最も多く必要になるのはWeb文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これはHTMLとスタイルに関する情報を{{domxref("Document")}}オブジェクトを使いまくって操作するための一連のAPIです、を用いて行ないます。この記事では、DOMの使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他のAPIもいくつか見ていきます。</dd>
+ <dd>Web ページやアプリを書く場合に、最も多く必要になるのは Web 文書をどうかして操作する事でしょう。これは普通ドキュメントオブジェクトモデル(<u>D</u>ocument <u>O</u>bject <u>M</u>odel、DOM)、これは HTML とスタイルに関する情報を {{domxref("Document")}} オブジェクトを使いまくって操作するための一連の API です、を用いて行ないます。この記事では、DOM の使い方を詳しく見ながら、面白い方法であなたの環境を変える事ができる興味深い他の API もいくつか見ていきます。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a></dt>
- <dd>また別に、モダンなWebサイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術{{domxref("XMLHttpRequest")}}と<a href="/ja/docs/Web/API/Fetch_API">Fetch API</a>について見ていきます。</dd>
+ <dd>また別に、モダンな Web サイトやアプリケーションでしょっちゅう必要になるのは、サーバから個々のデータを取ってきて、新しいページ全体を読んでくることなしに、ページの一部を書き換える事です。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました。この記事ではそのコンセプトを解説し、これを可能にした技術 {{domxref("XMLHttpRequest")}} と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> について見ていきます。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">サードパーティ API</a></dt>
- <dd>これまでに説明したAPIはブラウザに組込まれていますが、全てのAPIが組込まれているのではありません。グーグルマップやTwitter、Facebook、ペイパルなど、多くの巨大なWebサイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログにtwitterのタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者にFacebookでログインできたり)するためのAPIを提供しています。この記事ではブラウザAPIとサードパーティAPIの違いを見ていき、典型的な後者の使い方をお見せします。</dd>
+ <dd>これまでに説明した API はブラウザに組込まれていますが、全ての API が組込まれているのではありません。グーグルマップや Twitter、Facebook、ペイパルなど、多くの巨大な Web サイトやサービスが、開発者に対して彼らのデータを利用したり(例:あなたのブログに twitter のタイムラインを表示させる)、サービスを利用したり(例:あなたのサイトに独自のグーグルマップを表示したり、あなたのサービス利用者に Facebook でログインできたり)するための API を提供しています。この記事ではブラウザ API とサードパーティ API の違いを見ていき、典型的な後者の使い方をお見せします。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">絵を描く</a></dt>
- <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics)言語から、HTMLの{{htmlelement("canvas")}}キャンバス要素に描画するためのAPIまで (<a href="/ja/docs/Web/API/Canvas_API">キャンバスAPI</a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバスAPIへの導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd>
+ <dd>ブラウザにはグラフィックを描くためのとても強力なツールがいくつか組込まれています。<a href="/ja/docs/Web/SVG">SVG</a>(Scalable Vector Graphics) 言語から、HTML の {{htmlelement("canvas")}} キャンバス要素に描画するための API まで (<a href="/ja/docs/Web/API/Canvas_API">キャンバス API </a> や <a href="/ja/docs/Web/API/WebGL_API">WebGL</a>を参照)。 この記事ではキャンバス API への導入を説明し、もっと深く学習していくためのリソースをご紹介します。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">動画と音声の API</a></dt>
- <dd>HTML5には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自APIを備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd>
+ <dd>HTML5 には文書にリッチなメディアを埋め込むための要素が備わっています — {{htmlelement("video")}} と {{htmlelement("audio")}} — それぞれに再生やシークなどの操作するための独自 API を備えています。この記事では独自の再生操作パネルを作成するような、よくある仕事をどうやればいいのかお見せします。</dd>
  <dt><a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">クライアント側でのデータ保存</a></dt>
- <dd>モダンなブラウザには、Webサイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd>
+ <dd>モダンなブラウザには、Web サイトに関するデータを保存し必要なときに取り出すための様々に異なる技術が実装されており、これを使ってデータを長期間保存したり、サイトをオフラインに保存したりなどなどができます。この記事ではこれらがいかに動作するのか、その基本の基本について説明します。</dd>
 </dl>
-- 
cgit v1.2.3-54-g00ecf


From d132914ab964aec5d9394d7e11725ef5d1ce339d Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Sat, 5 Mar 2022 17:12:02 +0900
Subject: learn/javascript/client-side_web_apis/introduction
 の英単語の前後に半角空白を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client-side_web_apis/introduction/index.html   | 32 +++++++++++-----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html
index 51db397a58..20ff345db3 100644
--- a/files/ja/learn/javascript/client-side_web_apis/introduction/index.html
+++ b/files/ja/learn/javascript/client-side_web_apis/introduction/index.html
@@ -18,13 +18,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 
 <div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
 
-<p class="summary">まずはAPIを高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスのAPIは何なのか、どのような使い方があるのかも見ていきます。</p>
+<p class="summary">まずは API を高い視点から見ていきます — これは何なのか、どう働くのか、あなたのコードでどう使うのか、どういう風に作られているのか? また様々なクラスの API は何なのか、どのような使い方があるのかも見ていきます。</p>
 
 <table class="learn-box standard-table">
  <tbody>
   <tr>
    <th scope="row">前提条件:</th>
-   <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScriptオブジェクト</a>).</td>
+   <td>基本的なコンピューターの知識および利用能力、<a href="/ja/docs/Learn/HTML">HTML</a> と <a href="/ja/docs/Learn/CSS">CSS</a> の基本的な理解、JavaScript の基本 (<a href="/ja/docs/Learn/JavaScript/First_steps">第一歩</a>、<a href="/ja/docs/Learn/JavaScript/Building_blocks">構成要素</a>, <a href="/ja/docs/Learn/JavaScript/Objects">JavaScript オブジェクト</a>).</td>
   </tr>
   <tr>
    <th scope="row">目的:</th>
@@ -46,7 +46,7 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 <p>それと同じことで、そうですね、例えば3次元グラフィックのプログラムを JavaScript や Python のような高レベル言語で書かれた API を使ってやる方が、C や C++ のような低レベル言語から直接コンピューターの GPU やグラフィック機能を叩いてやるよりも、ずっと簡単です。</p>
 
 <div class="note">
-<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">APIの用語解説</a> を参照して下さい。</p>
+<p><strong>注記</strong>: API という語についてもっと詳しいことは <a href="/ja/docs/Glossary/API">API の用語解説</a> を参照して下さい。</p>
 </div>
 
 <h3 id="クライアントサイド_JavaScript_での_API">クライアントサイド JavaScript での API</h3>
@@ -89,13 +89,13 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 <ul>
  <li>ブラウザーで読み込んだ<strong>文書を操作するための API</strong>。一番目にする例は <a href="/ja/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a> で、 HTML と CSS を操作できます — HTML を作成したり削除したり書き換えたり、動的に新しいスタイルをページに適用したり、などなど。例えばページにポップアップウィンドウが表われたり、何か新しい中身が表示されたりする時、DOM が使われています。この種の API については<a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#the_document_object_model">ドキュメントの操作</a>でもっといろいろ見られます。</li>
  <li><strong>サーバからデータ取得をする API</strong> で Web ページの一部を書き換える事はとてもよく行なわれます。この一見ちょっとした事が、サイトのパフォーマンスや振舞いに巨大なインパクトを与えました  — 在庫一覧や新しいお話一覧を書き換えたい時に、サーバからページ全体をリロードする事なしにさくっとできたら、サイトやアプリはずっと反応よく素早く感じられます。これを可能にした API には <a href="/ja/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> と <a href="/ja/docs/Web/API/Fetch_API">Fetch API</a> が含まれています。<strong>Ajax</strong> という言葉を聞いた事があるかもしれませんが、これがこのテクニックの呼び名です。これらの API について <a href="/ja/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">サーバからのデータ取得</a>でもっといろいろ見られます。</li>
- <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザーがサポートしています — 最も知られているものには<a href="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の{{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバスAPIを使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成するAPI({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li>
- <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}}や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li>
+ <li><strong>グラフィックスを描画したり操作する API</strong> は多くのブラウザーがサポートしています — 最も知られているものには<a href="/ja/docs/Web/API/Canvas_API"> Canvas</a> と <a href="/ja/docs/Web/API/WebGL_API">WebGL</a> があり、HTML の {{htmlelement("canvas")}} 要素上にあるピクセルデータを書き換えて2次元や3次元のシーンを作成するのに使えます。例えばキャンバス API を使って長方形や円のような形を描いたり、キャンバスに画像を読み込んだり、セピアやグレイスケールといったフィルターを適用したり、あるいは WebGL を使ってライティングやテクスチャを使った3Dシーンを作成したりできます。これらの API はよくアニメーションループを作成する API ({{domxref("window.requestAnimationFrame()")}} など)や他のものと組み合わせて使われ、アニメやゲームのようなものの表示を定期的に書き換えるようにします。</li>
+ <li><strong><a href="/ja/docs/Web/Guide/Audio_and_video_delivery">動画と音声の API</a></strong> {{domxref("HTMLMediaElement")}} や <a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> や <a href="/ja/docs/Web/API/WebRTC_API">WebRTC</a> のような API を使うと、 マルチメディアを使ってとても面白い事ができます。音声や動画再生のための独自のコントロールUIの作成、字幕やサブタイトルのような音声トラックをビデオと一緒に表示したり、Web カメラの画像を取り込んで操作し、上述のキャンバスに表示したり Web カンファレンスに参加している他の誰かのコンピューター上に表示したり、音声トラックにイフェクト(ゲイン、ディストーション、音場効果など)をかけたりできます。</li>
  <li><strong>デバイス API</strong> は基本的に Web アプリで使えるような形で、今時のハードウェアデバイスのデータを操作したり取得する API です。デバイスの位置データにアクセスして地図上にあなたの居場所を書くような位置情報 API についてはすでにお話しました。他の例にはシステム通知を使って Web アプリに役に立つアップデートがあるのを知らせたり(<a href="/ja/docs/Web/API/Notifications_API">Notifications API</a> を参照)、ハードウェアを振動させたり(<a href="/ja/docs/Web/API/Vibration_API">Vibration API</a> を参照)などがあります。</li>
  <li><strong>クライアント側でのデータ保持 API </strong>は今多くのブラウザーに普及しつつあります。— クライアント側にデータを保存できると、ページを移動しても状態を保存したり、たとえデバイスがオフラインでも動作するようなアプリを作成したいような場合、とても役に立ちます。いくつもの選択肢があり、例えば <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage API</a> を使ったキーバリューストアや、 <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> を使ったもっと複雑なテーブル型データ保存などです。</li>
 </ul>
 
-<h3 id="一般的なサードパーティAPI">一般的なサードパーティAPI</h3>
+<h3 id="一般的なサードパーティAPI">一般的なサードパーティ API</h3>
 
 <p>サードパーティ API はバラエティーに富んでいます。あなたが遅かれ早かれ使うようになりそうな、世間でよく使われているものには以下のようなものがあります:</p>
 
@@ -104,19 +104,19 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
  <li><a href="https://developer.mapquest.com/">Mapquest</a> や <a href="https://developers.google.com/maps/">Google Maps API</a> のような地図の API は、あなたのWebページ上に地図を使ったあらゆる事を可能にします。</li>
  <li><a href="https://developers.facebook.com/docs/">Facebook APIスイート</a>によって Facebook エコシステムの様々な部品を使ってあなたのアプリを強化できます。例えばアプリへのログインを Facebook のログインで行なったり、アプリ内での支払い、ターゲット広告を出したりなどです。</li>
  <li><a href="https://core.telegram.org/api">Telegram APIs</a>  を使用すると、ボットのサポートに加えて、Telegram チャネルのコンテンツを Web サイトに埋め込むことができます。</li>
- <li><a href="https://developers.google.com/youtube/">YouTube API</a>を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li>
+ <li><a href="https://developers.google.com/youtube/">YouTube API</a> を使ってあなたのサイトに YouTube のビデオを埋め込んだり、YouTube を検索したり、プレイリストを作成したりなどなどできます。</li>
  <li><a href="https://developers.pinterest.com/">Pinterest API</a> は、Pinterest のボードとピンを管理して Web サイトに含めるためのツールを提供します。</li>
  <li><a href="https://www.twilio.com/">Twilio API</a>はあなたのアプリで音声・ビデオ電話の機能を作成したり、SMS/MMSを送信したりなどするためのフレームワークを提供します。</li>
  <li><a href="https://docs.joinmastodon.org/api/">Mastodon API</a> を使用すると、Mastodon ソーシャルネットワークの機能をプログラムで操作できます。</li>
 </ul>
 
 <div class="note">
-<p><strong>注記</strong>: サードパーティAPIについては <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a>でもっと多くの情報を見られます。</p>
+<p><strong>注記</strong>: サードパーティ API については <a href="http://www.programmableweb.com/category/all/apis">Programmable Web API directory</a> でもっと多くの情報を見られます。</p>
 </div>
 
-<h2 id="APIはどのように動作する">APIはどのように動作する?</h2>
+<h2 id="APIはどのように動作する">API はどのように動作する?</h2>
 
-<p>異なるJavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p>
+<p>異なる JavaScript APIはそれぞれに違う方法で動作しますが、普通は、共通した機能とどのように動くべきかの類似したテーマを持ちます。</p>
 
 <h3 id="オブジェクトに基づいています">オブジェクトに基づいています</h3>
 
@@ -207,21 +207,21 @@ volumeSlider.addEventListener('input', function() {
 
 <h3 id="認識できる入口があります">認識できる入口があります</h3>
 
-<p>APIを使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio APIではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p>
+<p>API を使うときは、その API の入口がどこなのかしっかり確認するべきです。Web Audio API ではとても単純でした — それは {{domxref("AudioContext")}} オブジェクトであり、あらゆる音声操作を行うために使用する必要があります。</p>
 
-<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は{{domxref("Document")}} もしくは何らかの方法で影響を与えたい いHTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p>
+<p>Document Object Model (DOM) API でも単純な入口があります — これの機能は {{domxref("Document")}} もしくは何らかの方法で影響を与えたい HTML 要素のインスタンスにぶらさがっている場合が多く、例えば:</p>
 
 <pre class="brush: js notranslate">const em = document.createElement('em'); // create a new em element
 const para = document.querySelector('p'); // reference an existing p element
 em.textContent = 'Hello there!'; // give em some text content
 para.appendChild(em); // embed em inside para</pre>
 
-<p><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの{{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p>
+<p><a href="/ja/docs/Web/API/Canvas_API">Canvas API</a> は、諸々を操作するために使用するコンテキストオブジェクトの取得にも依存していますが、この場合は、音声コンテキストではなく描画コンテキストです。そのコンテキストオブジェクトは、描画をしたい {{htmlelement("canvas")}} 要素への参照を取得して、 これの {{domxref("HTMLCanvasElement.getContext()")}} メソッドを呼ぶと作成されます:</p>
 
 <pre class="brush: js notranslate">const canvas = document.querySelector('canvas');
 const ctx = canvas.getContext('2d');</pre>
 
-<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは{{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p>
+<p>キャンバスを使って何かやろうとする場合は何でも、コンテキストオブジェクト (これは {{domxref("CanvasRenderingContext2D")}} のインスタンスです) のプロパティやメソッドを呼んで行ないます。例えば:</p>
 
 <pre class="brush: js notranslate">Ball.prototype.draw = function() {
   ctx.beginPath();
@@ -238,7 +238,7 @@ const ctx = canvas.getContext('2d');</pre>
 
 <p>すでに学習コース中でイベントについてはお話しています、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a> — この記事でクライアント側 Web イベントとは何か、コードの中でどのように使えるのか詳しく見てきました。もしまだクライアント側 WebAPI の仕組みがよくわからいなら、この先に進む前に記事を読み直しておく方が良いでしょう。</p>
 
-<p>イベントを持たないWebAPIもありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p>
+<p>イベントを持たない WebAPI もありますが、ほとんどの WebAPI はいくつか持っています。イベントが発火した際に関数を実行できるイベントハンドラーのプロパティについては、リファレンス記事の独立した"イベントハンドラー"セクションとしておおよそ列挙されています。</p>
 
 <p class="simple-translate-result" style="color: rgb(0, 0, 0);">上記の Web Audio API の例では、すでにいくつかのイベントハンドラーが使用されています。</p>
 
@@ -270,7 +270,7 @@ request.onload = function() {
 
 <p>WebAPI 機能は JavaScript や他の Web 技術と同等のセキュリティ上の配慮が必要です (例えば <a href="/ja/docs/Web/Security/Same-origin_policy">same-origin ポリシー</a>) が、追加のセキュリティ機構が必要な場合もあります。例として今時の WebAPI の中に はHTTPS で配信されるページ上でしか動かないものがあり、これは機密とすべきデータをやりとりする可能性があるためです (<a href="/ja/docs/Web/API/Service_Worker_API">ServiceWorkers</a> や <a href="/ja/docs/Web/API/Push_API">Push</a> など)。</p>
 
-<p>さらには、ある種のWebAPIへの呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/ja/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p>
+<p>さらには、ある種の WebAPI への呼び出しがあなたのコードにあると、ユーザに対してそれの許可を要求します。例えば、<a href="/ja/docs/Web/API/Notifications_API">Notifications API (通知 API)</a> はポップアップのダイアログボックスを用いて許可を要求します:</p>
 
 <p><img alt="" src="notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
 
-- 
cgit v1.2.3-54-g00ecf


From 7b582dd1d008c1daee40ac27dd2f72b067438652 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 25 Feb 2022 00:44:22 +0900
Subject: Web/API/Node 以下のプロパティの文書を移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/childnodes/index.html      | 101 --------------------
 files/ja/web/api/node/childnodes/index.md        | 101 ++++++++++++++++++++
 files/ja/web/api/node/firstchild/index.html      |  46 ---------
 files/ja/web/api/node/firstchild/index.md        |  46 +++++++++
 files/ja/web/api/node/lastchild/index.html       |  28 ------
 files/ja/web/api/node/lastchild/index.md         |  28 ++++++
 files/ja/web/api/node/nextsibling/index.html     |  87 -----------------
 files/ja/web/api/node/nextsibling/index.md       |  87 +++++++++++++++++
 files/ja/web/api/node/nodename/index.html        | 102 --------------------
 files/ja/web/api/node/nodename/index.md          | 102 ++++++++++++++++++++
 files/ja/web/api/node/nodetype/index.html        |  88 ------------------
 files/ja/web/api/node/nodetype/index.md          |  88 ++++++++++++++++++
 files/ja/web/api/node/nodevalue/index.html       |  81 ----------------
 files/ja/web/api/node/nodevalue/index.md         |  81 ++++++++++++++++
 files/ja/web/api/node/ownerdocument/index.html   |  66 -------------
 files/ja/web/api/node/ownerdocument/index.md     |  66 +++++++++++++
 files/ja/web/api/node/parentelement/index.html   |  46 ---------
 files/ja/web/api/node/parentelement/index.md     |  46 +++++++++
 files/ja/web/api/node/parentnode/index.html      |  47 ----------
 files/ja/web/api/node/parentnode/index.md        |  47 ++++++++++
 files/ja/web/api/node/previoussibling/index.html |  42 ---------
 files/ja/web/api/node/previoussibling/index.md   |  42 +++++++++
 files/ja/web/api/node/textcontent/index.html     | 113 -----------------------
 files/ja/web/api/node/textcontent/index.md       | 113 +++++++++++++++++++++++
 24 files changed, 847 insertions(+), 847 deletions(-)
 delete mode 100644 files/ja/web/api/node/childnodes/index.html
 create mode 100644 files/ja/web/api/node/childnodes/index.md
 delete mode 100644 files/ja/web/api/node/firstchild/index.html
 create mode 100644 files/ja/web/api/node/firstchild/index.md
 delete mode 100644 files/ja/web/api/node/lastchild/index.html
 create mode 100644 files/ja/web/api/node/lastchild/index.md
 delete mode 100644 files/ja/web/api/node/nextsibling/index.html
 create mode 100644 files/ja/web/api/node/nextsibling/index.md
 delete mode 100644 files/ja/web/api/node/nodename/index.html
 create mode 100644 files/ja/web/api/node/nodename/index.md
 delete mode 100644 files/ja/web/api/node/nodetype/index.html
 create mode 100644 files/ja/web/api/node/nodetype/index.md
 delete mode 100644 files/ja/web/api/node/nodevalue/index.html
 create mode 100644 files/ja/web/api/node/nodevalue/index.md
 delete mode 100644 files/ja/web/api/node/ownerdocument/index.html
 create mode 100644 files/ja/web/api/node/ownerdocument/index.md
 delete mode 100644 files/ja/web/api/node/parentelement/index.html
 create mode 100644 files/ja/web/api/node/parentelement/index.md
 delete mode 100644 files/ja/web/api/node/parentnode/index.html
 create mode 100644 files/ja/web/api/node/parentnode/index.md
 delete mode 100644 files/ja/web/api/node/previoussibling/index.html
 create mode 100644 files/ja/web/api/node/previoussibling/index.md
 delete mode 100644 files/ja/web/api/node/textcontent/index.html
 create mode 100644 files/ja/web/api/node/textcontent/index.md

diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html
deleted file mode 100644
index 82a90460c6..0000000000
--- a/files/ja/web/api/node/childnodes/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Node.childNodes
-slug: Web/API/Node/childNodes
-tags:
-  - API
-  - DOM
-  - DOMリファレンス
-  - プロパティ
-  - リファレンス
-translation_of: Web/API/Node/childNodes
----
-<p>{{ ApiRef() }}</p>
-
-<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
-</pre>
-
-<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2>
-
-<h3 id="簡単な使用方法">簡単な使用方法</h3>
-
-<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// 変数pargは&lt;p&gt;要素へのオブジェクト参照です</span>
-
-<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span>
-<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
-
-  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします
-    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3>
-
-<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span>
-<span class="comment token">// let box = document.getElementById(/**/)</span>;
-
-<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{
-    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span>
-    box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h2 id="注記">注記</h2>
-
-<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br>
- <br>
- <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br>
- <br>
- <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
-
-<p>{{Compat("api.Node.childNodes")}}</p>
-
-<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2>
-
-<ul>
- <li>{{ domxref("Node.firstChild") }}</li>
- <li>{{ domxref("Node.lastChild") }}</li>
- <li>{{ domxref("Node.nextSibling") }}</li>
- <li>{{ domxref("Node.previousSibling") }}</li>
- <li>{{ domxref("Element.children") }}</li>
-</ul>
diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md
new file mode 100644
index 0000000000..82a90460c6
--- /dev/null
+++ b/files/ja/web/api/node/childnodes/index.md
@@ -0,0 +1,101 @@
+---
+title: Node.childNodes
+slug: Web/API/Node/childNodes
+tags:
+  - API
+  - DOM
+  - DOMリファレンス
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/Node/childNodes
+---
+<p>{{ ApiRef() }}</p>
+
+<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
+</pre>
+
+<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2>
+
+<h3 id="簡単な使用方法">簡単な使用方法</h3>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// 変数pargは&lt;p&gt;要素へのオブジェクト参照です</span>
+
+<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span>
+<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
+
+  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします
+    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3>
+
+<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span>
+<span class="comment token">// let box = document.getElementById(/**/)</span>;
+
+<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{
+    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span>
+    box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="注記">注記</h2>
+
+<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br>
+ <br>
+ <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br>
+ <br>
+ <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>変更なし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
+
+<p>{{Compat("api.Node.childNodes")}}</p>
+
+<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2>
+
+<ul>
+ <li>{{ domxref("Node.firstChild") }}</li>
+ <li>{{ domxref("Node.lastChild") }}</li>
+ <li>{{ domxref("Node.nextSibling") }}</li>
+ <li>{{ domxref("Node.previousSibling") }}</li>
+ <li>{{ domxref("Element.children") }}</li>
+</ul>
diff --git a/files/ja/web/api/node/firstchild/index.html b/files/ja/web/api/node/firstchild/index.html
deleted file mode 100644
index 5a57be3ae9..0000000000
--- a/files/ja/web/api/node/firstchild/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Node.firstChild
-slug: Web/API/Node/firstChild
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
-translation_of: Web/API/Node/firstChild
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
-</pre>
-<ul>
- <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p>
-<pre class="brush:html">&lt;p id="para-01"&gt;
-  &lt;span&gt;First span&lt;/span&gt;
-&lt;/p&gt;
-
-&lt;script type="text/javascript"&gt;
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-&lt;/script&gt;</pre>
-<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ &lt;p&gt; の末端と &lt;span&gt; の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p>
-<p>その他の #text ノードは閉じタグ &lt;/span&gt; と &lt;/p&gt; の間に挿入されていみます。</p>
-<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p>
-<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
-
-&lt;script type="text/javascript"&gt;
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-&lt;/script&gt;
-</pre>
-<p>今度は alert は 'SPAN' を表示するでしょう。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
-</ul>
diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md
new file mode 100644
index 0000000000..5a57be3ae9
--- /dev/null
+++ b/files/ja/web/api/node/firstchild/index.md
@@ -0,0 +1,46 @@
+---
+title: Node.firstChild
+slug: Web/API/Node/firstChild
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Node
+translation_of: Web/API/Node/firstChild
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
+</pre>
+<ul>
+ <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li>
+</ul>
+<h2 id="Example" name="Example">例</h2>
+<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p>
+<pre class="brush:html">&lt;p id="para-01"&gt;
+  &lt;span&gt;First span&lt;/span&gt;
+&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;</pre>
+<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ &lt;p&gt; の末端と &lt;span&gt; の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p>
+<p>その他の #text ノードは閉じタグ &lt;/span&gt; と &lt;/p&gt; の間に挿入されていみます。</p>
+<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p>
+<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
+
+&lt;script type="text/javascript"&gt;
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+&lt;/script&gt;
+</pre>
+<p>今度は alert は 'SPAN' を表示するでしょう。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
+</ul>
diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html
deleted file mode 100644
index e7f5626f3c..0000000000
--- a/files/ja/web/api/node/lastchild/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Node.lastChild
-slug: Web/API/Node/lastChild
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
-translation_of: Web/API/Node/lastChild
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p>
-<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2>
-<pre class="syntaxbox">var last_child = element.lastChild
-</pre>
-<h2 id="Description" name="Description">説明</h2>
-<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var tr = document.getElementById("row1");  // table 要素の特定の行を取得
-var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
-</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
- <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md
new file mode 100644
index 0000000000..e7f5626f3c
--- /dev/null
+++ b/files/ja/web/api/node/lastchild/index.md
@@ -0,0 +1,28 @@
+---
+title: Node.lastChild
+slug: Web/API/Node/lastChild
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Node
+translation_of: Web/API/Node/lastChild
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p>
+<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2>
+<pre class="syntaxbox">var last_child = element.lastChild
+</pre>
+<h2 id="Description" name="Description">説明</h2>
+<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var tr = document.getElementById("row1");  // table 要素の特定の行を取得
+var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
+</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
+ <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html
deleted file mode 100644
index 1ff4c13cef..0000000000
--- a/files/ja/web/api/node/nextsibling/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Node.nextSibling
-slug: Web/API/Node/nextSibling
-tags:
-  - DOM
-  - Gecko
-  - Node
-  - 要更新
-translation_of: Web/API/Node/nextSibling
----
-<div>
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
-
-<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
-</pre>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<div>
- <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
-
-<div> </div>
-
-<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div>
-</div>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
-<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
-    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
-
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-
-<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
-  i<span class="operator token">++</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-
-/**************************************************
-  The following is written to the console as it loads:
-
-     Siblings of div-01
-
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
-
-**************************************************/</code></pre>
-
-<p>上の例で、<code>#text</code> ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 <code>document.write</code> 文で挿入された要素の間には空白が作成されません。</p>
-
-<p>DOM にテキストノードが入りうるのは DOM が <code>nextSibling</code> を使って横断される時に許可されます。注記のセクションのリソースを見てください。</p>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
-</ul>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-
-
-<p>{{Compat("api.Node.nextSibling")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.nextElementSibling")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md
new file mode 100644
index 0000000000..1ff4c13cef
--- /dev/null
+++ b/files/ja/web/api/node/nextsibling/index.md
@@ -0,0 +1,87 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - DOM
+  - Gecko
+  - Node
+  - 要更新
+translation_of: Web/API/Node/nextSibling
+---
+<div>
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
+</pre>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<div>
+ <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
+    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
+
+<div> </div>
+
+<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div>
+</div>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+
+<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
+<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
+    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+
+console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+
+<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
+  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
+  i<span class="operator token">++</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+
+</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+
+/**************************************************
+  The following is written to the console as it loads:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/</code></pre>
+
+<p>上の例で、<code>#text</code> ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 <code>document.write</code> 文で挿入された要素の間には空白が作成されません。</p>
+
+<p>DOM にテキストノードが入りうるのは DOM が <code>nextSibling</code> を使って横断される時に許可されます。注記のセクションのリソースを見てください。</p>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
+</ul>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+
+
+<p>{{Compat("api.Node.nextSibling")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.nextElementSibling")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/nodename/index.html b/files/ja/web/api/node/nodename/index.html
deleted file mode 100644
index 65daeb1074..0000000000
--- a/files/ja/web/api/node/nodename/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Node.nodeName
-slug: Web/API/Node/nodeName
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Node/nodeName
----
-<div>
- {{APIRef}}</div>
-<div>
-  </div>
-<div>
- <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div>
-<p>ノードの名前を文字列で返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName;
-</pre>
-<ul>
- <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li>
- <li><code>nodeName</code> は読み取り専用の属性です。</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>以下の異なる種類のノードの戻り値があります。</p>
-<table>
- <thead>
-  <tr>
-   <th>Interface</th>
-   <th>nodeName</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/ja/docs/DOM/Attr">Attr</a></td>
-   <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td>
-   <td>"#cdata-section"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/Comment">Comment</a></td>
-   <td>"#comment"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/document">Document</a></td>
-   <td>"#document"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td>
-   <td>"#document-fragment"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td>
-   <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/element">Element</a></td>
-   <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/Entity">Entity</a></td>
-   <td>実体名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td>
-   <td>実体参照名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/Notation">Notation</a></td>
-   <td>記法名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td>
-   <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td>Text</td>
-   <td>"#text"</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Example" name="Example">例</h2>
-<p>次のマークアップ文書が与えられているとします。</p>
-<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
-&lt;input type="text" id="t"/&gt;
-</pre>
-<p>そして、以下のスクリプトがあると考えてください。</p>
-<pre class="brush:js">var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-
-text_field.value = div1.nodeName;
-</pre>
-<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p>
-<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
diff --git a/files/ja/web/api/node/nodename/index.md b/files/ja/web/api/node/nodename/index.md
new file mode 100644
index 0000000000..65daeb1074
--- /dev/null
+++ b/files/ja/web/api/node/nodename/index.md
@@ -0,0 +1,102 @@
+---
+title: Node.nodeName
+slug: Web/API/Node/nodeName
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/nodeName
+---
+<div>
+ {{APIRef}}</div>
+<div>
+  </div>
+<div>
+ <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div>
+<p>ノードの名前を文字列で返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName;
+</pre>
+<ul>
+ <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li>
+ <li><code>nodeName</code> は読み取り専用の属性です。</li>
+</ul>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>以下の異なる種類のノードの戻り値があります。</p>
+<table>
+ <thead>
+  <tr>
+   <th>Interface</th>
+   <th>nodeName</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/ja/docs/DOM/Attr">Attr</a></td>
+   <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td>
+   <td>"#cdata-section"</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/Comment">Comment</a></td>
+   <td>"#comment"</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/document">Document</a></td>
+   <td>"#document"</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td>
+   <td>"#document-fragment"</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td>
+   <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/element">Element</a></td>
+   <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/API/Entity">Entity</a></td>
+   <td>実体名</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td>
+   <td>実体参照名</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/Web/API/Notation">Notation</a></td>
+   <td>記法名</td>
+  </tr>
+  <tr>
+   <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td>
+   <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>"#text"</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Example" name="Example">例</h2>
+<p>次のマークアップ文書が与えられているとします。</p>
+<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
+&lt;input type="text" id="t"/&gt;
+</pre>
+<p>そして、以下のスクリプトがあると考えてください。</p>
+<pre class="brush:js">var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+</pre>
+<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p>
+<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p>
+<h2 id="Specifications" name="Specifications">仕様</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html
deleted file mode 100644
index 135f0f95c7..0000000000
--- a/files/ja/web/api/node/nodetype/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: Node.nodeType
-slug: Web/API/Node/nodeType
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Node/nodeType
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードの種類を表す整数のコードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
-</pre>
-<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p>
-<table>
- <thead>
-  <tr>
-   <th scope="col">名称</th>
-   <th scope="col">値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ELEMENT_NODE</code></td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td><code>TEXT_NODE</code></td>
-   <td>3</td>
-  </tr>
-  <tr>
-   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td>
-   <td>5</td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td>
-   <td>6</td>
-  </tr>
-  <tr>
-   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
-   <td>7</td>
-  </tr>
-  <tr>
-   <td><code>COMMENT_NODE</code></td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_NODE</code></td>
-   <td>9</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_TYPE_NODE</code></td>
-   <td>10</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
-   <td>11</td>
-  </tr>
-  <tr>
-   <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td>
-   <td>12</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Example" name="Example">例</h2>
-<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p>
-<pre class="brush:js">var node = document.documentElement.firstChild;
-
-if (node.nodeType != Node.COMMENT_NODE)
-  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
-</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
- <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
-</ul>
diff --git a/files/ja/web/api/node/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md
new file mode 100644
index 0000000000..135f0f95c7
--- /dev/null
+++ b/files/ja/web/api/node/nodetype/index.md
@@ -0,0 +1,88 @@
+---
+title: Node.nodeType
+slug: Web/API/Node/nodeType
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/nodeType
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>ノードの種類を表す整数のコードを返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
+</pre>
+<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p>
+<table>
+ <thead>
+  <tr>
+   <th scope="col">名称</th>
+   <th scope="col">値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ELEMENT_NODE</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>TEXT_NODE</code></td>
+   <td>3</td>
+  </tr>
+  <tr>
+   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td>
+   <td>6</td>
+  </tr>
+  <tr>
+   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
+   <td>7</td>
+  </tr>
+  <tr>
+   <td><code>COMMENT_NODE</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_NODE</code></td>
+   <td>9</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_TYPE_NODE</code></td>
+   <td>10</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
+   <td>11</td>
+  </tr>
+  <tr>
+   <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td>
+   <td>12</td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Example" name="Example">例</h2>
+<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p>
+<pre class="brush:js">var node = document.documentElement.firstChild;
+
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
+</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
+ <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
+</ul>
diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html
deleted file mode 100644
index 2cfbbf795f..0000000000
--- a/files/ja/web/api/node/nodevalue/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Node.nodeValue
-slug: Web/API/Node/nodeValue
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
-translation_of: Web/API/Node/nodeValue
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードの値を取得または設定します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre>
-<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p>
-<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p>
-<p> </p>
-<p>以下の表は、 様々なノードの戻り値を表しています。</p>
-<table>
- <thead>
-  <tr>
-   <th>Attr</th>
-   <th>attribute の値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>CDATASection</td>
-   <td>CDATA Sectionの中身</td>
-  </tr>
-  <tr>
-   <td>コメント</td>
-   <td>commentの中身</td>
-  </tr>
-  <tr>
-   <td>Document</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>DocumentFragment</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>DocumentType</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>Element</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>NamedNodeMap</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>EntityReference</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>Notation</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>ProcessingInstruction</td>
-   <td>ターゲットを除く全体の内容</td>
-  </tr>
-  <tr>
-   <td>Text</td>
-   <td>the text nodeの中身</td>
-  </tr>
- </tbody>
-</table>
-<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
-</ul>
diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md
new file mode 100644
index 0000000000..2cfbbf795f
--- /dev/null
+++ b/files/ja/web/api/node/nodevalue/index.md
@@ -0,0 +1,81 @@
+---
+title: Node.nodeValue
+slug: Web/API/Node/nodeValue
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Node
+translation_of: Web/API/Node/nodeValue
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>ノードの値を取得または設定します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre>
+<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p>
+<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p>
+<p> </p>
+<p>以下の表は、 様々なノードの戻り値を表しています。</p>
+<table>
+ <thead>
+  <tr>
+   <th>Attr</th>
+   <th>attribute の値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>CDATASection</td>
+   <td>CDATA Sectionの中身</td>
+  </tr>
+  <tr>
+   <td>コメント</td>
+   <td>commentの中身</td>
+  </tr>
+  <tr>
+   <td>Document</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentFragment</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>DocumentType</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Element</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>NamedNodeMap</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>EntityReference</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>Notation</td>
+   <td>null</td>
+  </tr>
+  <tr>
+   <td>ProcessingInstruction</td>
+   <td>ターゲットを除く全体の内容</td>
+  </tr>
+  <tr>
+   <td>Text</td>
+   <td>the text nodeの中身</td>
+  </tr>
+ </tbody>
+</table>
+<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
+</ul>
diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html
deleted file mode 100644
index f6eef4f570..0000000000
--- a/files/ja/web/api/node/ownerdocument/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Node.ownerDocument
-slug: Web/API/Node/ownerDocument
-tags:
-  - DOM
-  - Gecko
-  - Node
-translation_of: Web/API/Node/ownerDocument
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>document</var> = element.ownerDocument
-</pre>
-
-<ul>
- <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
-var html = doc.documentElement; // owner のドキュメント要素を取得
-
-alert(html); // [object HTMLHtmlElement]
-</pre>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>No change</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.ownerDocument")}}</p>
diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md
new file mode 100644
index 0000000000..f6eef4f570
--- /dev/null
+++ b/files/ja/web/api/node/ownerdocument/index.md
@@ -0,0 +1,66 @@
+---
+title: Node.ownerDocument
+slug: Web/API/Node/ownerDocument
+tags:
+  - DOM
+  - Gecko
+  - Node
+translation_of: Web/API/Node/ownerDocument
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>document</var> = element.ownerDocument
+</pre>
+
+<ul>
+ <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
+var html = doc.documentElement; // owner のドキュメント要素を取得
+
+alert(html); // [object HTMLHtmlElement]
+</pre>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th>Specification</th>
+   <th>Status</th>
+   <th>Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM4")}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM3 Core")}}</td>
+   <td>No change</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
+   <td>{{Spec2("DOM2 Core")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.ownerDocument")}}</p>
diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html
deleted file mode 100644
index e121601c07..0000000000
--- a/files/ja/web/api/node/parentelement/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Node.parentElement
-slug: Web/API/Node/parentElement
-tags:
-  - DOM
-  - Element
-  - Node
-  - Property
-  - parent
-translation_of: Web/API/Node/parentElement
----
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
-
-<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre>
-
-<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}</pre>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<ul>
- <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
-</ul>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.parentElement")}}</p>
-
-<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.parentNode")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md
new file mode 100644
index 0000000000..e121601c07
--- /dev/null
+++ b/files/ja/web/api/node/parentelement/index.md
@@ -0,0 +1,46 @@
+---
+title: Node.parentElement
+slug: Web/API/Node/parentElement
+tags:
+  - DOM
+  - Element
+  - Node
+  - Property
+  - parent
+translation_of: Web/API/Node/parentElement
+---
+<div>
+<div>{{APIRef("DOM")}}</div>
+</div>
+
+<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre>
+
+<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">if (node.parentElement) {
+  node.parentElement.style.color = "red";
+}</pre>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<ul>
+ <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.parentElement")}}</p>
+
+<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.parentNode")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/parentnode/index.html b/files/ja/web/api/node/parentnode/index.html
deleted file mode 100644
index 33ea858b0c..0000000000
--- a/files/ja/web/api/node/parentnode/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Node.parentNode
-slug: Web/API/Node/parentNode
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
-translation_of: Web/API/Node/parentNode
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>指定されたノードの DOM ツリー内の親ノードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode
-</pre>
-<ul>
- <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
-  node.parentNode.removeChild(node);
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p>
-<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.parentNode")}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{Domxref("element.firstChild")}}</li>
- <li>{{Domxref("element.lastChild")}}</li>
- <li>{{Domxref("element.childNodes")}}</li>
- <li>{{Domxref("element.nextSibling")}}</li>
- <li>{{Domxref("element.previousSibling")}}</li>
- <li>{{Domxref("Node.removeChild")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md
new file mode 100644
index 0000000000..33ea858b0c
--- /dev/null
+++ b/files/ja/web/api/node/parentnode/index.md
@@ -0,0 +1,47 @@
+---
+title: Node.parentNode
+slug: Web/API/Node/parentNode
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - Node
+translation_of: Web/API/Node/parentNode
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>指定されたノードの DOM ツリー内の親ノードを返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode
+</pre>
+<ul>
+ <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li>
+</ul>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">if (node.parentNode) {
+  // ツリー上に既に存在しない場合を除き、
+  // ツリーからノードを削除します。
+  node.parentNode.removeChild(node);
+}</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p>
+<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p>
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.parentNode")}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
+</ul>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+ <li>{{Domxref("element.firstChild")}}</li>
+ <li>{{Domxref("element.lastChild")}}</li>
+ <li>{{Domxref("element.childNodes")}}</li>
+ <li>{{Domxref("element.nextSibling")}}</li>
+ <li>{{Domxref("element.previousSibling")}}</li>
+ <li>{{Domxref("Node.removeChild")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/previoussibling/index.html b/files/ja/web/api/node/previoussibling/index.html
deleted file mode 100644
index 5506f5fd86..0000000000
--- a/files/ja/web/api/node/previoussibling/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Node.previousSibling
-slug: Web/API/Node/previousSibling
-tags:
-  - DOM
-  - Gecko
-  - Node
-translation_of: Web/API/Node/previousSibling
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling;
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
-
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-</pre>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
- <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
-
-<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
-</ul>
diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md
new file mode 100644
index 0000000000..5506f5fd86
--- /dev/null
+++ b/files/ja/web/api/node/previoussibling/index.md
@@ -0,0 +1,42 @@
+---
+title: Node.previousSibling
+slug: Web/API/Node/previousSibling
+tags:
+  - DOM
+  - Gecko
+  - Node
+translation_of: Web/API/Node/previousSibling
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling;
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+
+alert( document.getElementById("b1").previousSibling ); // null
+alert( document.getElementById("b2").previousSibling.id ); // "b1"
+</pre>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+ <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
+    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
+
+<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
+</ul>
diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html
deleted file mode 100644
index 3f90221d9f..0000000000
--- a/files/ja/web/api/node/textcontent/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Node.textContent
-slug: Web/API/Node/textContent
-tags:
-  - API
-  - DOM
-  - Node
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/API/Node/textContent
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p>
-
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent
-<var>someOtherNode</var>.textContent = <var>string</var>
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>文字列または {{jsxref("null")}}</p>
-
-<h2 id="Description" name="Description">説明</h2>
-
-<p><code>textContent</code> の値は状況によります。</p>
-
-<ul>
- <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。
-
-  <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div>
- </li>
- <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li>
- <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li>
-</ul>
-
-<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p>
-
-<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3>
-
-<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p>
-
-<ul>
- <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li>
- <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。
-  <ul>
-   <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li>
-  </ul>
- </li>
- <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li>
-</ul>
-
-<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3>
-
-<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p>
-
-<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>以下のような HTML の断片があります。</p>
-
-<pre class="brush: html">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>
-
-<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p>
-
-<pre class="brush: js">let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。</pre>
-
-<p>... また、要素のテキストを設定します。</p>
-
-<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!';
-// divA の HTML は次のようになります。
-// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
-</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-textcontent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.textContent")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.innerText")}}</li>
- <li>{{domxref("Element.innerHTML")}}</li>
- <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li>
-</ul>
diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md
new file mode 100644
index 0000000000..3f90221d9f
--- /dev/null
+++ b/files/ja/web/api/node/textcontent/index.md
@@ -0,0 +1,113 @@
+---
+title: Node.textContent
+slug: Web/API/Node/textContent
+tags:
+  - API
+  - DOM
+  - Node
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/Node/textContent
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent
+<var>someOtherNode</var>.textContent = <var>string</var>
+</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>文字列または {{jsxref("null")}}</p>
+
+<h2 id="Description" name="Description">説明</h2>
+
+<p><code>textContent</code> の値は状況によります。</p>
+
+<ul>
+ <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。
+
+  <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div>
+ </li>
+ <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li>
+ <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li>
+</ul>
+
+<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p>
+
+<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3>
+
+<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p>
+
+<ul>
+ <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li>
+ <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。
+  <ul>
+   <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li>
+  </ul>
+ </li>
+ <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li>
+</ul>
+
+<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3>
+
+<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p>
+
+<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>以下のような HTML の断片があります。</p>
+
+<pre class="brush: html">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>
+
+<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p>
+
+<pre class="brush: js">let text = document.getElementById('divA').textContent;
+// 変数 text の値は 'This is some text!' となります。</pre>
+
+<p>... また、要素のテキストを設定します。</p>
+
+<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!';
+// divA の HTML は次のようになります。
+// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
+</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-textcontent','Node.textContent')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Node.textContent")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.innerText")}}</li>
+ <li>{{domxref("Element.innerHTML")}}</li>
+ <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf


From 0e7fc92daa74711762322b806e2371ff19d2fed3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 26 Feb 2022 02:27:38 +0900
Subject: 2021/12/20 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/nodename/index.md | 174 ++++++++++++++------------------
 1 file changed, 78 insertions(+), 96 deletions(-)

diff --git a/files/ja/web/api/node/nodename/index.md b/files/ja/web/api/node/nodename/index.md
index 65daeb1074..ea9679714d 100644
--- a/files/ja/web/api/node/nodename/index.md
+++ b/files/ja/web/api/node/nodename/index.md
@@ -2,101 +2,83 @@
 title: Node.nodeName
 slug: Web/API/Node/nodeName
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.nodeName
 translation_of: Web/API/Node/nodeName
 ---
-<div>
- {{APIRef}}</div>
-<div>
-  </div>
-<div>
- <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div>
-<p>ノードの名前を文字列で返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName;
-</pre>
-<ul>
- <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li>
- <li><code>nodeName</code> は読み取り専用の属性です。</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>以下の異なる種類のノードの戻り値があります。</p>
-<table>
- <thead>
-  <tr>
-   <th>Interface</th>
-   <th>nodeName</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/ja/docs/DOM/Attr">Attr</a></td>
-   <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td>
-   <td>"#cdata-section"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/Comment">Comment</a></td>
-   <td>"#comment"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/document">Document</a></td>
-   <td>"#document"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td>
-   <td>"#document-fragment"</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td>
-   <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/element">Element</a></td>
-   <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/Entity">Entity</a></td>
-   <td>実体名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td>
-   <td>実体参照名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/Web/API/Notation">Notation</a></td>
-   <td>記法名</td>
-  </tr>
-  <tr>
-   <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td>
-   <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td>
-  </tr>
-  <tr>
-   <td>Text</td>
-   <td>"#text"</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Example" name="Example">例</h2>
-<p>次のマークアップ文書が与えられているとします。</p>
-<pre class="brush:html">&lt;div id="d1"&gt;hello world&lt;/div&gt;
-&lt;input type="text" id="t"/&gt;
-</pre>
-<p>そして、以下のスクリプトがあると考えてください。</p>
-<pre class="brush:js">var div1 = document.getElementById("d1");
-var text_field = document.getElementById("t");
-
-text_field.value = div1.nodeName;
-</pre>
-<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p>
-<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`nodeName`** は {{domxref("Node")}} の読み取り専用プロパティで、現在のノードの名前を文字列で返します。
+
+## 値
+
+文字列です。ノードの種類によって、次のような値になります。
+
+- {{domxref("Attr")}}
+  - : {{domxref("Attr.name")}} の値で、この属性の*修飾名*です。
+- {{domxref("CDATASection")}}
+  - : `"#cdata-section"` という文字列です。
+- {{domxref("Comment")}}
+  - : `"#comment"` という文字列です。
+- {{domxref("Document")}}
+  - : `"#document"` という文字列です。
+- {{domxref("DocumentFragment")}}
+  - : `"#document-fragment"` という文字列です。
+- {{domxref("DocumentType")}}
+  - : {{domxref("DocumentType.name")}} の値です。
+- {{domxref("Element")}}
+  - : {{domxref("Element.tagName")}} の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。
+- {{domxref("ProcessingInstruction")}}
+  - : {{domxref("ProcessingInstruction.target")}} の値です。
+- {{domxref("Text")}}
+  - : `"#text"` という文字列です。
+
+## 例
+
+この例では、様々なノードのノード名を表示します。
+
+```html
+こちらは HTML です。
+<div id="d1">Hello world</div>
+<!-- コメントの例 -->
+テキスト<span>テキスト</span>
+テキスト<br/>
+<svg height="20" width="20">
+  <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" />
+</svg>
+<hr>
+<output id="result">まだ出力されていません。</output>
+```
+
+また、スクリプトは以下の通りです。
+
+```js
+let node = document.getElementsByTagName("body")[0].firstChild;
+let result = "ノード名:<br/>";
+while (node) {
+  result += node.nodeName + "<br/>";
+  node = node.nextSibling
+}
+
+const output = document.getElementById("result");
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", "450")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.tagName")}}
+- {{domxref("Attr.name")}}
+- {{domxref("DocumentType.name")}}
+- {{domxref("ProcessingInstruction.target")}}
-- 
cgit v1.2.3-54-g00ecf


From ed6203f957a5616efa135b87368715645b251444 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 26 Feb 2022 00:16:32 +0900
Subject: 2021/11/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/childnodes/index.md    | 159 +++++++++++----------------
 files/ja/web/api/node/firstchild/index.md    | 103 ++++++++++-------
 files/ja/web/api/node/lastchild/index.md     |  55 +++++----
 files/ja/web/api/node/nextsibling/index.md   | 107 ++++++++----------
 files/ja/web/api/node/nodetype/index.md      | 150 ++++++++++++-------------
 files/ja/web/api/node/nodevalue/index.md     | 136 ++++++++++-------------
 files/ja/web/api/node/ownerdocument/index.md |  68 ++++--------
 7 files changed, 353 insertions(+), 425 deletions(-)

diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md
index 82a90460c6..0e07d3ecb3 100644
--- a/files/ja/web/api/node/childnodes/index.md
+++ b/files/ja/web/api/node/childnodes/index.md
@@ -2,100 +2,73 @@
 title: Node.childNodes
 slug: Web/API/Node/childNodes
 tags:
-  - API
-  - DOM
-  - DOMリファレンス
   - プロパティ
   - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.childNodes
 translation_of: Web/API/Node/childNodes
 ---
-<p>{{ ApiRef() }}</p>
-
-<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
-</pre>
-
-<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2>
-
-<h3 id="簡単な使用方法">簡単な使用方法</h3>
-
-<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// 変数pargは&lt;p&gt;要素へのオブジェクト参照です</span>
-
-<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span>
-<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
-
-  <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします
-    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3>
-
-<pre class="brush:js line-numbers  language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span>
-<span class="comment token">// let box = document.getElementById(/**/)</span>;
-
-<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{
-    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span>
-    box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
-
-<h2 id="注記">注記</h2>
-
-<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br>
- <br>
- <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br>
- <br>
- <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>変更なし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
-
-<p>{{Compat("api.Node.childNodes")}}</p>
-
-<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2>
-
-<ul>
- <li>{{ domxref("Node.firstChild") }}</li>
- <li>{{ domxref("Node.lastChild") }}</li>
- <li>{{ domxref("Node.nextSibling") }}</li>
- <li>{{ domxref("Node.previousSibling") }}</li>
- <li>{{ domxref("Element.children") }}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`childNodes`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、{{domxref("NodeList")}} で指定された要素の子{{domxref("Node", "ノード", "", 1)}}の生きたリストを返し、最初の子ノードは位置 `0` に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。
+
+> **Note:** {{domxref("NodeList")}} が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。
+
+ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、 `elementNodeReference.childNodes[0].nodeName` を使うことで実現できます。
+
+{{domxref("document")}} オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは `documentElement` として参照されます。 HTML 文書の場合、後者は {{HTMLElement("html")}} 要素です。
+
+覚えておくべき重要なこととして、 `childNodes` には*すべての*子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。
+要素のみが含まれるコレクションを取得するのであれば、 {{domxref("Element.children")}} を代わりに使用してください。
+
+## 値
+
+このノードの子を含む生きた {{domxref("NodeList")}} です。
+
+> **Note:** `childNodes` を複数回呼び出しても、*同じ* {{domxref("NodeList")}} が返されます。
+
+## 例
+
+### 単純な使用方法
+
+```js
+// parg は <p> 要素へのオブジェクト参照です
+
+// まず、要素に子ノードがあるかどうかをチェックします
+if (parg.hasChildNodes()) {
+  let children = parg.childNodes;
+
+  for (let i = 0; i < children.length; i++) {
+    // それぞれの子を children[i] として処理します
+    // 注: リストは生きています。子を追加したり取り除いたりすると、リストの `length` が変わります
+  }
+}
+```
+
+### ノードからすべてての子を削除
+
+```js
+// これはあるノードからすべての子を取り除くための一つの方法です
+// box はある要素へのオブジェクト参照です
+
+while (box.firstChild) {
+    // リストは生きているので、呼び出されるたびにインデックスが変わります
+    box.removeChild(box.firstChild);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.firstChild")}}
+- {{domxref("Node.lastChild")}}
+- {{domxref("Node.nextSibling")}}
+- {{domxref("Node.previousSibling")}}
+- {{domxref("Element.children")}}
diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md
index 5a57be3ae9..504cd98284 100644
--- a/files/ja/web/api/node/firstchild/index.md
+++ b/files/ja/web/api/node/firstchild/index.md
@@ -2,45 +2,68 @@
 title: Node.firstChild
 slug: Web/API/Node/firstChild
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
+  - プロパティ
+  - リファレンス
+browser-compat: api.Node.firstChild
 translation_of: Web/API/Node/firstChild
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
-</pre>
-<ul>
- <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p>
-<pre class="brush:html">&lt;p id="para-01"&gt;
-  &lt;span&gt;First span&lt;/span&gt;
-&lt;/p&gt;
-
-&lt;script type="text/javascript"&gt;
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-&lt;/script&gt;</pre>
-<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ &lt;p&gt; の末端と &lt;span&gt; の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p>
-<p>その他の #text ノードは閉じタグ &lt;/span&gt; と &lt;/p&gt; の間に挿入されていみます。</p>
-<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p>
-<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
-
-&lt;script type="text/javascript"&gt;
-  var p01 = document.getElementById('para-01');
-  alert(p01.firstChild.nodeName)
-&lt;/script&gt;
-</pre>
-<p>今度は alert は 'SPAN' を表示するでしょう。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。
+
+このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。
+
+> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
+> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。
+> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。
+
+## 値
+
+{{domxref("Node")}}、または存在しなければ `null`。
+
+## 例
+
+次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。
+
+```html
+<p id="para-01">
+  <span>最初の span</span>
+</p>
+
+<script>
+  const p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+```
+
+上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。
+
+`#text` ノードはもう 1 つ、閉じタグ `</span>` と `</p>` の間に挿入されます。
+
+ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。
+
+```html
+<p id="para-01"><span>最初の span</span></p>
+
+<script>
+  const p01 = document.getElementById('para-01');
+  console.log(p01.firstChild.nodeName);
+</script>
+```
+
+コンソールには 'SPAN' と表示されるようになります。
+
+`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.firstElementChild")}}
+- {{domxref("Node.lastChild")}}
diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md
index e7f5626f3c..9e9d386274 100644
--- a/files/ja/web/api/node/lastchild/index.md
+++ b/files/ja/web/api/node/lastchild/index.md
@@ -2,27 +2,38 @@
 title: Node.lastChild
 slug: Web/API/Node/lastChild
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.lastChild
 translation_of: Web/API/Node/lastChild
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p>
-<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2>
-<pre class="syntaxbox">var last_child = element.lastChild
-</pre>
-<h2 id="Description" name="Description">説明</h2>
-<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var tr = document.getElementById("row1");  // table 要素の特定の行を取得
-var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
-</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
- <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。
+親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。
+子要素がない場合は `null` を返します。
+
+## Value
+
+このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。
+
+## 例
+
+```js
+const tr = document.getElementById("row1");
+const corner_td = tr.lastChild;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.firstChild")}}
+- {{domxref("Element.lastElementChild")}}
diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md
index 1ff4c13cef..f310d8e456 100644
--- a/files/ja/web/api/node/nextsibling/index.md
+++ b/files/ja/web/api/node/nextsibling/index.md
@@ -2,86 +2,65 @@
 title: Node.nextSibling
 slug: Web/API/Node/nextSibling
 tags:
-  - DOM
-  - Gecko
-  - Node
-  - 要更新
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.nextSibling
 translation_of: Web/API/Node/nextSibling
 ---
-<div>
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p>
-</div>
+**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。
+> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
+>
+> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
+>
+> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。
+>
+> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。
 
-<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
-</pre>
+## 値
 
-<h2 id="Notes" name="Notes">注記</h2>
+現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。
 
-<div>
- <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
+## 例
 
-<div> </div>
+```html
+<div id="div-1">こちらは div-1 です。</div>
+<div id="div-2">こちらは div-2 です。</div>
+<br/>
+<output><em>計算結果がありません。</em></output>
+```
 
-<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div>
-</div>
+```js
+let el = document.getElementById('div-1').nextSibling,
+i = 1;
 
-<h2 id="Example" name="Example">例</h2>
+let result = "div-1 の兄弟要素:<br/>";
 
-<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
+while (el) {
+  result += i + '. ' + el.nodeName+"<br/>";
+  el = el.nextSibling;
+  i++;
+}
 
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
-<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
-    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
+const output = document.getElementsByTagName("output")[0];
+output.innerHTML = result;
+```
 
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+{{ EmbedLiveSample("Example", "100%", 500)}}
 
-<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
-  i<span class="operator token">++</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+## 仕様書
 
-</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
+{{Specifications}}
 
-/**************************************************
-  The following is written to the console as it loads:
+## ブラウザーの互換性
 
-     Siblings of div-01
+{{Compat}}
 
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
+## 関連情報
 
-**************************************************/</code></pre>
-
-<p>上の例で、<code>#text</code> ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 <code>document.write</code> 文で挿入された要素の間には空白が作成されません。</p>
-
-<p>DOM にテキストノードが入りうるのは DOM が <code>nextSibling</code> を使って横断される時に許可されます。注記のセクションのリソースを見てください。</p>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
-</ul>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-
-
-<p>{{Compat("api.Node.nextSibling")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.nextElementSibling")}}</li>
-</ul>
+- {{domxref("Element.nextElementSibling")}}
+- {{domxref("Node.previousSibling")}}
diff --git a/files/ja/web/api/node/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md
index 135f0f95c7..099e980805 100644
--- a/files/ja/web/api/node/nodetype/index.md
+++ b/files/ja/web/api/node/nodetype/index.md
@@ -2,87 +2,73 @@
 title: Node.nodeType
 slug: Web/API/Node/nodeType
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.nodeType
 translation_of: Web/API/Node/nodeType
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードの種類を表す整数のコードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType;
-</pre>
-<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p>
-<table>
- <thead>
-  <tr>
-   <th scope="col">名称</th>
-   <th scope="col">値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>ELEMENT_NODE</code></td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td><code>TEXT_NODE</code></td>
-   <td>3</td>
-  </tr>
-  <tr>
-   <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td>
-   <td>5</td>
-  </tr>
-  <tr>
-   <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td>
-   <td>6</td>
-  </tr>
-  <tr>
-   <td><code>PROCESSING_INSTRUCTION_NODE</code></td>
-   <td>7</td>
-  </tr>
-  <tr>
-   <td><code>COMMENT_NODE</code></td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_NODE</code></td>
-   <td>9</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_TYPE_NODE</code></td>
-   <td>10</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_FRAGMENT_NODE</code></td>
-   <td>11</td>
-  </tr>
-  <tr>
-   <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td>
-   <td>12</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Example" name="Example">例</h2>
-<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p>
-<pre class="brush:js">var node = document.documentElement.firstChild;
-
-if (node.nodeType != Node.COMMENT_NODE)
-  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
-</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li>
- <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li>
- <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`nodeType`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、整数値でこのノードがなんであるかを識別します。これは様々なノードの種類、例えば {{domxref("Element", "elements")}}, {{domxref("Text", "text")}}, {{domxref("Comment", "comments")}} を見分けます。
+
+## 値
+
+整数値で、このノードの種類を識別します。可能な値は次の通りです。
+
+- `Node.ELEMENT_NODE` (`1`)
+  - : {{HTMLElement("p")}} や {{HTMLElement("div")}} などの {{domxref("Element")}} ノードです。
+- `Node.ATTRIBUTE_NODE` (`2`)
+  - : {{domxref("Element")}} の {{domxref("Attr", "Attribute")}} ノードです。
+- `Node.TEXT_NODE` (`3`)
+  - : {{domxref("Element")}} や {{domxref("Attr")}} の中に存在する {{domxref("Text")}} です。
+- `Node.CDATA_SECTION_NODE`(`4`)
+  - : `<!CDATA[[ … ]]>` のような {{domxref("CDATASection")}} です。
+- `Node.PROCESSING_INSTRUCTION_NODE` (`7`)
+  - : `<?xml-stylesheet … ?>` のような XML 文書の {{domxref("ProcessingInstruction")}} です。
+- `Node.COMMENT_NODE` (`8`)
+  - : `<!-- … -->` のような {{domxref("Comment")}} ノードです。
+- `Node.DOCUMENT_NODE` (`9`)
+  - : {{domxref("Document")}} ノードです。
+- `Node.DOCUMENT_TYPE_NODE` (`10`)
+  - : `<!DOCTYPE html>` のような {{domxref("DocumentType")}} ノードです。
+- `Node.DOCUMENT_FRAGMENT_NODE` (`11`)
+  - : A {{domxref("DocumentFragment")}} node.
+
+`Node.ENTITY_REFERENCE_NODE` (`5`), `Node.ENTITY_NODE` (`6`), `Node.NOTATION_NODE` (`12`) は非推奨になっており、使用されなくなっています。
+
+## 例
+
+## 様々な種類のノード
+
+```js
+document.nodeType === Node.DOCUMENT_NODE; // true
+document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true
+
+document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true
+
+const p = document.createElement("p");
+p.textContent = "昔々…";
+
+p.nodeType === Node.ELEMENT_NODE; // true
+p.firstChild.nodeType === Node.TEXT_NODE; // true
+```
+
+### コメント
+
+次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。
+
+```js
+const node = document.documentElement.firstChild;
+if (node.nodeType !== Node.COMMENT_NODE) {
+  console.warn("コメントを入れてください。");
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md
index 2cfbbf795f..2d254b0a33 100644
--- a/files/ja/web/api/node/nodevalue/index.md
+++ b/files/ja/web/api/node/nodevalue/index.md
@@ -2,80 +2,66 @@
 title: Node.nodeValue
 slug: Web/API/Node/nodeValue
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
+  - プロパティ
+  - リファレンス
+browser-compat: api.Node.nodeValue
 translation_of: Web/API/Node/nodeValue
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ノードの値を取得または設定します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre>
-<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p>
-<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p>
-<p> </p>
-<p>以下の表は、 様々なノードの戻り値を表しています。</p>
-<table>
- <thead>
-  <tr>
-   <th>Attr</th>
-   <th>attribute の値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>CDATASection</td>
-   <td>CDATA Sectionの中身</td>
-  </tr>
-  <tr>
-   <td>コメント</td>
-   <td>commentの中身</td>
-  </tr>
-  <tr>
-   <td>Document</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>DocumentFragment</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>DocumentType</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>Element</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>NamedNodeMap</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>EntityReference</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>Notation</td>
-   <td>null</td>
-  </tr>
-  <tr>
-   <td>ProcessingInstruction</td>
-   <td>ターゲットを除く全体の内容</td>
-  </tr>
-  <tr>
-   <td>Text</td>
-   <td>the text nodeの中身</td>
-  </tr>
- </tbody>
-</table>
-<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`nodeValue`** は {{domxref("Node")}} インターフェイスのプロパティで、現在のノードの値を返したり設定したりします。
+
+## Value
+
+もしあれば、現在のノードの値を含む文字列です。
+文書自身においては、 `nodeValue` は `null` を返します。
+テキスト、コメント、 CDATA ノードでは、 `nodeValue` はノードの内容を返します。
+属性ノードにおいては、属性の値が返します。
+
+以下の表はノードの種類別の返値を表しています。
+
+| ノード                               | nodeValue の値                      |
+| ------------------------------------ | ----------------------------------- |
+| {{domxref("CDATASection")}}          | CDATA セクションの中身              |
+| {{domxref("Comment")}}               | コメントの中身                      |
+| {{domxref("Document")}}              | `null`                              |
+| {{domxref("DocumentFragment")}}      | `null`                              |
+| {{domxref("DocumentType")}}          | `null`                              |
+| {{domxref("Element")}}               | `null`                              |
+| {{domxref("NamedNodeMap")}}          | `null`                              |
+| {{domxref("ProcessingInstruction")}} | 対象を除く内容物全体                |
+| {{domxref("Text")}}                  | テキストノードの中身                |
+
+> **Note:** `nodeValue` が `null` になると定義されている場合は、設定しても効果がありません。
+
+## 例
+
+```html
+<div id="d1">Hello world</div>
+<!-- コメントの例 -->
+<output id="result">結果が出ていません。</output>
+```
+
+また、以下のスクリプトを参照してください。
+
+```js
+let node = document.getElementsByTagName("body")[0].firstChild;
+let result = "<br/>ノード名:<br/>";
+while (node) {
+  result += node.nodeName + "の値: " + node.nodeValue + "<br/>";
+  node = node.nextSibling
+}
+
+const output = document.getElementById("result");
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", "250")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md
index f6eef4f570..75cf471b02 100644
--- a/files/ja/web/api/node/ownerdocument/index.md
+++ b/files/ja/web/api/node/ownerdocument/index.md
@@ -2,65 +2,35 @@
 title: Node.ownerDocument
 slug: Web/API/Node/ownerDocument
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.ownerDocument
 translation_of: Web/API/Node/ownerDocument
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`ownerDocument`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最上位の文書オブジェクトを返します。
 
-<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p>
+## 値
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+すべての子ノードが作成された最上位の {{domxref("Document")}} オブジェクトです。
 
-<pre class="syntaxbox"><var>document</var> = element.ownerDocument
-</pre>
+このプロパティが文書自身のノードで使用された場合、値は `null` になります。
 
-<ul>
- <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li>
-</ul>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+```js
+// 指定された "p" から、文書オブジェクトの子である最上位の HTML を取得します。
 
-<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
-var html = doc.documentElement; // owner のドキュメント要素を取得
+const d = p.ownerDocument;
+const html = d.documentElement;
+```
 
-alert(html); // [object HTMLHtmlElement]
-</pre>
+## 仕様書
 
-<h2 id="Notes" name="Notes">注記</h2>
+{{Specifications}}
 
-<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p>
+## ブラウザーの互換性
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Specification</th>
-   <th>Status</th>
-   <th>Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM4")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM3 Core")}}</td>
-   <td>No change</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td>
-   <td>{{Spec2("DOM2 Core")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.ownerDocument")}}</p>
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 068058eea2550a1b3da98a3a5af70bc9172d2be2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 26 Feb 2022 00:16:32 +0900
Subject: 2021/11/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/parentelement/index.md   |  49 ++++-----
 files/ja/web/api/node/parentnode/index.md      |  80 +++++++--------
 files/ja/web/api/node/previoussibling/index.md |  81 ++++++++++-----
 files/ja/web/api/node/textcontent/index.md     | 132 ++++++++++---------------
 4 files changed, 167 insertions(+), 175 deletions(-)

diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md
index e121601c07..8aa85b65f5 100644
--- a/files/ja/web/api/node/parentelement/index.md
+++ b/files/ja/web/api/node/parentelement/index.md
@@ -2,45 +2,36 @@
 title: Node.parentElement
 slug: Web/API/Node/parentElement
 tags:
-  - DOM
-  - Element
-  - Node
-  - Property
-  - parent
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.parentElement
 translation_of: Web/API/Node/parentElement
 ---
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
+{{APIRef("DOM")}}
 
-<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p>
+**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre>
+現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。
 
-<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+```js
+if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+```
 
-<pre class="brush:js">if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}</pre>
+## 仕様書
 
-<h2 id="Specification" name="Specification">仕様</h2>
+{{Specifications}}
 
-<ul>
- <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li>
-</ul>
+## ブラウザーの互換性
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+{{Compat}}
 
-<p>{{Compat("api.Node.parentElement")}}</p>
+## 関連情報
 
-<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.parentNode")}}</li>
-</ul>
+- {{domxref("Node.parentNode")}}
diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md
index 33ea858b0c..d50c111b37 100644
--- a/files/ja/web/api/node/parentnode/index.md
+++ b/files/ja/web/api/node/parentnode/index.md
@@ -2,46 +2,46 @@
 title: Node.parentNode
 slug: Web/API/Node/parentNode
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.parentNode
 translation_of: Web/API/Node/parentNode
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>指定されたノードの DOM ツリー内の親ノードを返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode
-</pre>
-<ul>
- <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
+{{APIRef("DOM")}}
+
+**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。
+
+`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。
+ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。
+
+## 値
+
+現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。
+
+## 例
+
+```js
+if (node.parentNode) {
+  // ノードがツリーの中にある場合は、ツリーから取り除く
   node.parentNode.removeChild(node);
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p>
-<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p>
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.parentNode")}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{Domxref("element.firstChild")}}</li>
- <li>{{Domxref("element.lastChild")}}</li>
- <li>{{Domxref("element.childNodes")}}</li>
- <li>{{Domxref("element.nextSibling")}}</li>
- <li>{{Domxref("element.previousSibling")}}</li>
- <li>{{Domxref("Node.removeChild")}}</li>
-</ul>
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{Domxref("Node.firstChild")}}
+- {{Domxref("Node.lastChild")}}
+- {{Domxref("Node.childNodes")}}
+- {{Domxref("Node.nextSibling")}}
+- {{Domxref("Node.parentElement")}}
+- {{Domxref("Node.previousSibling")}}
+- {{Domxref("Node.removeChild")}}
diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md
index 5506f5fd86..cec77e3af9 100644
--- a/files/ja/web/api/node/previoussibling/index.md
+++ b/files/ja/web/api/node/previoussibling/index.md
@@ -2,41 +2,74 @@
 title: Node.previousSibling
 slug: Web/API/Node/previousSibling
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.previousSibling
 translation_of: Web/API/Node/previousSibling
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。
 
-<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p>
+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。
+> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
+>
+> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
+>
+> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。
+>
+> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling;
-</pre>
+現在のノードの直前のノードを表す {{domxref("Node")}} です。
+存在しない場合は `null` です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<pre class="brush:js">// &lt;a&gt;&lt;b1 id="b1"/&gt;&lt;b2 id="b2"/&gt;&lt;/a&gt;
+次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。
 
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-</pre>
+### 最初の例
 
-<h2 id="Notes" name="Notes">注記</h2>
+この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。
 
- <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
+```html
+<img id="b0"><img id="b1"><img id="b2">
+```
 
-<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p>
+```js
+document.getElementById("b1").previousSibling;    // <img id="b0">
+document.getElementById("b2").previousSibling.id; // "b1"
+```
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+### 2 番目の例
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li>
-</ul>
+この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。
+
+```html
+<img id="b0">
+<img id="b1">
+<img id="b2">
+```
+
+```js
+document.getElementById("b1").previousSibling;                 // #text
+document.getElementById("b1").previousSibling.previousSibling; // <img id="b0">
+document.getElementById("b2").previousSibling.previousSibling; // <img id="b1">
+document.getElementById("b2").previousSibling;                 // #text
+document.getElementById("b2").previousSibling.id;              // undefined
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.nextSibling")}}
+- {{domxref("Element.previousElementSibling")}}
diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md
index 3f90221d9f..1777a5cd21 100644
--- a/files/ja/web/api/node/textcontent/index.md
+++ b/files/ja/web/api/node/textcontent/index.md
@@ -2,112 +2,80 @@
 title: Node.textContent
 slug: Web/API/Node/textContent
 tags:
-  - API
-  - DOM
-  - Node
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Node.textContent
 translation_of: Web/API/Node/textContent
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p>
+**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p>
-</div>
+> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 値
 
-<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent
-<var>someOtherNode</var>.textContent = <var>string</var>
-</pre>
+文字列または {{jsxref("null")}} です。値は場面によります。
 
-<h3 id="Value" name="Value">値</h3>
+- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。
 
-<p>文字列または {{jsxref("null")}}</p>
+  > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。
 
-<h2 id="Description" name="Description">説明</h2>
+- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
+- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。）
 
-<p><code>textContent</code> の値は状況によります。</p>
+> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。
 
-<ul>
- <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。
+### innerText との違い
 
-  <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div>
- </li>
- <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li>
- <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li>
-</ul>
+`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。
 
-<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p>
+- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。
+- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。
 
-<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3>
+  - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
 
-<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p>
+- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。
 
-<ul>
- <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li>
- <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。
-  <ul>
-   <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li>
-  </ul>
- </li>
- <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li>
-</ul>
+### innerHTML との違い
 
-<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3>
+{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。
 
-<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p>
+さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。
 
-<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+以下のような HTML の断片があります。
 
-<p>以下のような HTML の断片があります。</p>
+```html
+<div id="divA">This is <span>some</span> text!</div>
+```
 
-<pre class="brush: html">&lt;div id="divA"&gt;This is &lt;span&gt;some&lt;/span&gt; text!&lt;/div&gt;</pre>
+... `textContent` を使用して、要素のテキストの内容を取得することができます。
 
-<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p>
+```js
+let text = document.getElementById('divA').textContent;
+// 変数 text の値は 'This is some text!' となります。
+```
 
-<pre class="brush: js">let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。</pre>
+... また、要素のテキストを設定します。
 
-<p>... また、要素のテキストを設定します。</p>
-
-<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!';
+```js
+document.getElementById('divA').textContent = 'This text is different!';
 // divA の HTML は次のようになります。
-// &lt;div id="divA"&gt;This text is different!&lt;/div&gt;
-</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-textcontent','Node.textContent')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.textContent")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.innerText")}}</li>
- <li>{{domxref("Element.innerHTML")}}</li>
- <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li>
-</ul>
+// <div id="divA">This text is different!</div>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("HTMLElement.innerText")}}
+- {{domxref("Element.innerHTML")}}
+- [More on differences between `innerText` and `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (ブログ投稿)
-- 
cgit v1.2.3-54-g00ecf


From ed80f378403bc2760e37b274c78e6629836d36f8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 12:26:02 +0900
Subject: 2021/11/08 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/baseuri/index.md | 67 ++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 files/ja/web/api/node/baseuri/index.md

diff --git a/files/ja/web/api/node/baseuri/index.md b/files/ja/web/api/node/baseuri/index.md
new file mode 100644
index 0000000000..053fadb866
--- /dev/null
+++ b/files/ja/web/api/node/baseuri/index.md
@@ -0,0 +1,67 @@
+---
+title: Node.baseURI
+slug: Web/API/Node/baseURI
+tags:
+  - Node
+  - プロパティ
+  - 読み取り専用
+browser-compat: api.Node.baseURI
+translation_of: Web/API/Node/baseURI
+---
+{{APIRef("DOM")}}
+
+**`baseURI`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードを含む文書の絶対的なベース URL を返します。
+
+ベース URL はブラウザーが絶対 URL を必要とするときに、相対 URL を解決するために使用されます。例えば、 HTML の {{HTMLElement("img")}} 要素の `src` 属性や、 SVG の `xlink:href` や `href` 属性を処理する場合などです。
+
+このプロパティは読み取り専用ですが、値はプロパティがアクセスされるたびにアルゴリズムで決まりますので、状況が変化すると変化することがあります。
+
+ベース URL は次のように決まります。
+
+1. 既定で、ベース URL は文書の位置（{{domxref("window.location")}} で指定された通り）となります。
+2. これが HTML 文書であり、文書に {{HTMLElement("Base")}} 要素があった場合、*最初の* `Base` 要素の `href` の値があれば、代わりに使用されます。
+
+## 値
+
+{{domxref("Node")}} のベース URL を表す文字列です。
+
+## 例
+
+### \<base> なし
+
+```html
+<output>Not calculated</output>
+```
+
+```js
+const output = document.getElementsByTagName("output")[0];
+output.value = output.baseURI;
+```
+
+{{EmbedLiveSample("Without <base>", "100%", 40)}}
+
+### \<base> あり
+
+```html
+<base href="https://developer.mozilla.org/modified_base_uri/">
+<output>Not calculated</output>
+```
+
+```js
+const output = document.getElementsByTagName("output")[0];
+output.value = output.baseURI;
+```
+
+{{EmbedLiveSample("With <base>", "100%", 40)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{HTMLElement("base")}} 要素
-- 
cgit v1.2.3-54-g00ecf


From 1107252040025dbb122a68dd75f0dd285e4c40d5 Mon Sep 17 00:00:00 2001
From: Julien Wilhelm <49813904+AwebsomeFr@users.noreply.github.com>
Date: Sat, 5 Mar 2022 16:51:20 +0100
Subject: Typo fixes for French DOMContentLoaded event page (#4419)

Spell Checking.
---
 files/fr/web/api/document/domcontentloaded_event/index.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md
index 92c383e65d..787f2a1d16 100644
--- a/files/fr/web/api/document/domcontentloaded_event/index.md
+++ b/files/fr/web/api/document/domcontentloaded_event/index.md
@@ -5,7 +5,7 @@ translation_of: Web/API/Document/DOMContentLoaded_event
 ---
 {{APIRef}}
 
-L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initiale est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.
+L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML initial est complètement chargé et analysé, sans attendre la fin du chargement des feuilles de styles, images et sous-document.
 
 <table class="properties">
   <tbody>
@@ -28,9 +28,9 @@ L'évènement **`DOMContentLoaded`** est déclenché quand le document HTML init
   </tbody>
 </table>
 
-Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tord `load` là où `DOMContentLoaded` serait plus approprié.
+Un évènement différent, {{domxref("Window/load_event", "load")}} doit être utilisé pour détecter que la page entière est chargée. On utilise couramment à tort `load` là où `DOMContentLoaded` serait plus approprié.
 
-Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafique du document principale HTML.
+Du code JavaScript synchrone va mettre en pause la création du DOM. Si vous voulez charger le DOM le plus rapidement possible, vous pouvez faire votre code [(en) JavaScript asynchrone](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [(en) optimiser le chargement des feuilles de styles](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Si vous chargez comme d'habitude, les feuilles de styles vont ralentir la création du DOM comme si elles étaient chargées en parallèle, en «volant» le trafic du document principal HTML.
 
 ## Exemples
 
-- 
cgit v1.2.3-54-g00ecf


From ae31d37aef1b9cf3b307651166f1cb0c02d1eaf7 Mon Sep 17 00:00:00 2001
From: "Charles Emmanuel S. Ndiaye" <manusquall@outlook.com>
Date: Sat, 5 Mar 2022 18:20:13 +0000
Subject: fr-web/api/htmlmediaelement/mscleareffects id:4289 (#4406)

* suggest translation for id:4289

* Fixing typo and translation

Fixing typo and translation according to @cw118 review
---
 .../api/htmlmediaelement/mscleareffects/index.md   | 31 ++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 files/fr/web/api/htmlmediaelement/mscleareffects/index.md

diff --git a/files/fr/web/api/htmlmediaelement/mscleareffects/index.md b/files/fr/web/api/htmlmediaelement/mscleareffects/index.md
new file mode 100644
index 0000000000..3ccc0ff537
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/mscleareffects/index.md
@@ -0,0 +1,31 @@
+---
+title: HTMLMediaElement.msClearEffects
+slug: Web/API/HTMLMediaElement/msClearEffects
+translation_of: Web/API/HTMLMediaElement/msClearEffects
+---
+{{APIRef("HTMLMediaElement")}}
+
+{{Non-standard_header()}}
+
+La méthode **`msClearEffects`** de l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) est une méthode propriétaire spécifique à Internet Explorer et Microsoft Edge.
+
+**`msClearEffects`** efface tous les effets du canal de rendu.
+
+### Syntaxe
+
+```js
+HTMLMediaElement.msClearEffects();
+```
+
+### Paramètres
+
+Cette méthode ne prend pas de paramètres.
+
+### Valeur retournée
+
+Cette méthode ne retourne pas de valeur.
+
+## Voir aussi
+
+- [L'API Touch](/fr/docs/Web/API/Touch)
+- [Extensions d'API Microsoft](/fr/docs/Web/API/Microsoft_Extensions)
-- 
cgit v1.2.3-54-g00ecf


From 9a01a5446e5c02cb66cb0c4423daf4a3a50f6453 Mon Sep 17 00:00:00 2001
From: Niedziolka Michal <100634371+NiedziolkaMichal@users.noreply.github.com>
Date: Sat, 5 Mar 2022 22:44:53 +0100
Subject: Fix for vertical-align examples in Dark Mode (#4401)

* Fix for vertical-align examples in Dark Mode

* Removed empty parameter

Co-authored-by: Claas Augner <github@caugner.de>

* Removed empty parameter

Co-authored-by: Claas Augner <github@caugner.de>

* Fix for other locale

* Revert "Fix for other locale"

This reverts commit 2e7b836b3a4fbbbe4d0150e14e4e55f4f75f9c04.

* Fixed for other locale, without idea files

* Removed invalid quote

* Changed 100% to 1200px

* Removed quotes

Co-authored-by: Claas Augner <github@caugner.de>
---
 files/de/web/css/vertical-align/index.html    | 4 ++--
 files/ja/web/css/vertical-align/index.md      | 4 ++--
 files/ko/web/css/vertical-align/index.html    | 4 ++--
 files/pt-br/web/css/vertical-align/index.html | 4 ++--
 files/ru/web/css/vertical-align/index.html    | 4 ++--
 files/zh-cn/web/css/vertical-align/index.html | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/files/de/web/css/vertical-align/index.html b/files/de/web/css/vertical-align/index.html
index 43d76f8a1d..dc247353c5 100644
--- a/files/de/web/css/vertical-align/index.html
+++ b/files/de/web/css/vertical-align/index.html
@@ -61,7 +61,7 @@ p {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p>
 
 <ul>
  <li>Um den Inhalt einer Zelle vertikal in einer Tabelle auszurichten:</li>
@@ -100,7 +100,7 @@ td {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p>
 
 <p>Beachte, dass sich <code>vertical-align</code> nur auf inline- und Tabellenzellenelemente bezieht: es kann nicht eingesetzt werden um <a href="/de/docs/Web/HTML/Block-level_elemente">Block-level Elemente</a> auszurichten.</p>
 
diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md
index 5ae9631f82..4f69ef7e47 100644
--- a/files/ja/web/css/vertical-align/index.md
+++ b/files/ja/web/css/vertical-align/index.md
@@ -174,7 +174,7 @@ p {
 
 #### 結果
 
-{{EmbedLiveSample("Vertical_alignment_in_a_line_box", '100%', 160, "", "")}}
+{{EmbedLiveSample("Vertical_alignment_in_a_line_box", 1200, 160)}}
 
 <h3 id="Vertical_alignment_in_a_table_cell">表のセル内での垂直方向の配置</h3>
 
@@ -218,7 +218,7 @@ td {
 
 #### 結果
 
-{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", '100%', 230, "", "")}}
+{{EmbedLiveSample("Vertical_alignment_in_a_table_cell", 1200, 230)}}
 
 ## 仕様書
 
diff --git a/files/ko/web/css/vertical-align/index.html b/files/ko/web/css/vertical-align/index.html
index 0a139fbc61..92475d81e3 100644
--- a/files/ko/web/css/vertical-align/index.html
+++ b/files/ko/web/css/vertical-align/index.html
@@ -79,7 +79,7 @@ p {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p>
 
 <ul>
  <li>table의 한 셀에서 포함하고 있는 내용을 수직 정렬할 때:</li>
@@ -118,7 +118,7 @@ td {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p>
 
 <p><code>vertical-align은 오로지 inline과 table-cell 엘리먼트에만 적용된다는 것에 주의하세요: 이 속성을</code> <a href="/en-US/docs/Web/HTML/Block-level_elements">block level 엘리먼트</a>에 사용할 수 없습니다.</p>
 
diff --git a/files/pt-br/web/css/vertical-align/index.html b/files/pt-br/web/css/vertical-align/index.html
index 5461771c73..623c7deb34 100644
--- a/files/pt-br/web/css/vertical-align/index.html
+++ b/files/pt-br/web/css/vertical-align/index.html
@@ -79,7 +79,7 @@ p {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p>
 
 <ul>
  <li>Para alinhar verticalmente o conteudo de uma celula em uma tabela:</li>
@@ -118,7 +118,7 @@ td {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p>
 
 <p>Observe que  <code>vertical-align</code> é aplicado apenas em elementos inline e table-cell: Você não pode usar isso para alinhar verticalmente elementos de nível de bloco.</p>
 
diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html
index 9074a6000f..99f06f3732 100644
--- a/files/ru/web/css/vertical-align/index.html
+++ b/files/ru/web/css/vertical-align/index.html
@@ -75,7 +75,7 @@ p {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p>
 
 <ul>
  <li>Для вертикального позиционирования содержимого ячейки таблицы:</li>
@@ -109,7 +109,7 @@ td {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p>
 
 <div class="note">
 <p><strong>Обратите внимание:</strong> свойство vertical-align применяется только к строчным элементам и элементам ячеек таблицы: его нельзя использовать для вертикального позиционирования <a href="/ru/docs/Web/HTML/Block-level_elements">блочных элементов</a>.</p>
diff --git a/files/zh-cn/web/css/vertical-align/index.html b/files/zh-cn/web/css/vertical-align/index.html
index 3c55e414be..14acdecb59 100644
--- a/files/zh-cn/web/css/vertical-align/index.html
+++ b/files/zh-cn/web/css/vertical-align/index.html
@@ -60,7 +60,7 @@ p {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-inline", 1200, 120, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-inline", 1200, 160)}}</p>
 
 <ul>
  <li>垂直对齐表格单元内容:</li>
@@ -99,7 +99,7 @@ td {
 </pre>
 </div>
 
-<p>{{EmbedLiveSample("vertical-align-table", 1200, 210, "", "", "example-outcome-frame")}}</p>
+<p>{{EmbedLiveSample("vertical-align-table", 1200, 230)}}</p>
 
 <p>注意 <code>vertical-align</code> 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐<a href="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>。</p>
 
-- 
cgit v1.2.3-54-g00ecf


From 8e8d92a50f74b5370984259dc963dac56cc5902b Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Sun, 6 Mar 2022 00:13:06 +0000
Subject: [CRON] sync translated content

---
 files/ja/_redirects.txt                            |   5 +-
 files/ja/_wikihistory.json                         |  20 ++--
 .../web/api/navigator/online/index.html            | 127 +++++++++++++++++++++
 .../navigator/online_and_offline_events/index.html | 127 ---------------------
 files/ko/_redirects.txt                            |   5 +-
 files/ko/web/api/navigator/online/index.html       | 108 ++++++++++++++++++
 .../navigator/online_and_offline_events/index.html | 107 -----------------
 7 files changed, 251 insertions(+), 248 deletions(-)
 create mode 100644 files/ja/conflicting/web/api/navigator/online/index.html
 delete mode 100644 files/ja/web/api/navigator/online_and_offline_events/index.html
 create mode 100644 files/ko/web/api/navigator/online/index.html
 delete mode 100644 files/ko/web/api/navigator/online_and_offline_events/index.html

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 98461ee39d..82f79f7a60 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -2811,7 +2811,7 @@
 /ja/docs/Notification_object/tag	/ja/docs/Web/API/Notification/tag
 /ja/docs/Notification_object/title	/ja/docs/Web/API/Notification/title
 /ja/docs/Offline_resources_in_Firefox/Using_audio_and_video_in_Firefox	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
-/ja/docs/Online_and_offline_events	/ja/docs/Web/API/Navigator/Online_and_offline_events
+/ja/docs/Online_and_offline_events	/ja/docs/conflicting/Web/API/Navigator/onLine
 /ja/docs/Other_JavaScript_tools	/ja/docs/Tools
 /ja/docs/Parsing_and_serializing_XML	/ja/docs/Web/Guide/Parsing_and_serializing_XML
 /ja/docs/Plugins/Guide/Constants	/ja/docs/Glossary/Plugin
@@ -3182,6 +3182,7 @@
 /ja/docs/Web/API/MediaStreamConstraints	/ja/docs/conflicting/Web/API/MediaDevices/getUserMedia
 /ja/docs/Web/API/MouseEvent/which	/ja/docs/Web/API/UIEvent/which
 /ja/docs/Web/API/Navigator.getUserMedia	/ja/docs/Web/API/Navigator/getUserMedia
+/ja/docs/Web/API/Navigator/Online_and_offline_events	/ja/docs/conflicting/Web/API/Navigator/onLine
 /ja/docs/Web/API/NavigatorID	/ja/docs/Web/API/Navigator
 /ja/docs/Web/API/NavigatorID/appCodeName	/ja/docs/Web/API/Navigator/appCodeName
 /ja/docs/Web/API/NavigatorID/appName	/ja/docs/Web/API/Navigator/appName
@@ -3193,7 +3194,7 @@
 /ja/docs/Web/API/NavigatorLanguage.languages	/ja/docs/Web/API/Navigator/languages
 /ja/docs/Web/API/NavigatorLanguage/language	/ja/docs/Web/API/Navigator/language
 /ja/docs/Web/API/NavigatorLanguage/languages	/ja/docs/Web/API/Navigator/languages
-/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events	/ja/docs/Web/API/Navigator/Online_and_offline_events
+/ja/docs/Web/API/NavigatorOnLine/Online_and_offline_events	/ja/docs/conflicting/Web/API/Navigator/onLine
 /ja/docs/Web/API/NavigatorOnLine/onLine	/ja/docs/Web/API/Navigator/onLine
 /ja/docs/Web/API/NavigatorStorage	/ja/docs/orphaned/Web/API/NavigatorStorage
 /ja/docs/Web/API/NavigatorStorage/storage	/ja/docs/orphaned/Web/API/NavigatorStorage/storage
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index eab8b35361..acf6f16c9e 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -18689,16 +18689,6 @@
       "fscholz"
     ]
   },
-  "Web/API/Navigator/Online_and_offline_events": {
-    "modified": "2019-03-23T23:53:08.504Z",
-    "contributors": [
-      "chrisdavidmills",
-      "ethertank",
-      "Marsf",
-      "Mgjbot",
-      "Koyamak"
-    ]
-  },
   "Web/API/Navigator/activeVRDisplays": {
     "modified": "2020-10-15T21:47:31.877Z",
     "contributors": [
@@ -48425,6 +48415,16 @@
       "e53e04ac"
     ]
   },
+  "conflicting/Web/API/Navigator/onLine": {
+    "modified": "2019-03-23T23:53:08.504Z",
+    "contributors": [
+      "chrisdavidmills",
+      "ethertank",
+      "Marsf",
+      "Mgjbot",
+      "Koyamak"
+    ]
+  },
   "conflicting/Web/API/Pointer_events": {
     "modified": "2019-03-18T20:45:32.564Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/api/navigator/online/index.html b/files/ja/conflicting/web/api/navigator/online/index.html
new file mode 100644
index 0000000000..e30c9d6c63
--- /dev/null
+++ b/files/ja/conflicting/web/api/navigator/online/index.html
@@ -0,0 +1,127 @@
+---
+title: オンライン・オフラインイベント
+slug: conflicting/Web/API/Navigator/onLine
+tags:
+  - AJAX
+  - DOM
+  - HTML5
+  - Intermediate
+  - NeedsUpdate
+  - Offline web applications
+  - Web Development
+translation_of: Web/API/Navigator/Online_and_offline_events
+original_slug: Web/API/Navigator/Online_and_offline_events
+---
+<p>一部のブラウザーは、 <a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を <a href="https://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様書</a>に従って実装しています。</p>
+
+<h3 id="Overview">概要</h3>
+
+<p>オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。</p>
+
+<ol>
+  <li>サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。</li>
+  <li>サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。</li>
+</ol>
+
+<p>オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。</p>
+
+<p>残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。</p>
+
+<h2 id="API">API</h2>
+
+<h3 id="navigator.onLine"><code>navigator.onLine</code></h3>
+
+<p><code><a href="/ja/docs/Web/API/Navigator/onLine">navigator.onLine</a></code> は、 <code>true</code>/<code>false</code> の値を保持しているプロパティです (オンラインの場合は <code>true</code>、オフラインの場合は <code>false</code>)。</p>
+
+<p>このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。</p>
+
+<blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline">
+  <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote>
+
+<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p>
+
+<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p>
+
+<h3 id=".22online.22_and_.22offline.22_events">"<code>online</code>" および "<code>offline</code>" イベント</h3>
+
+<p><a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a> は 2 つの新しいイベントを導入しました。"<a href="/ja/docs/Web/API/document.ononline"><code>online</code></a>" and "<a href="/ja/docs/Web/API/document.onoffline"><code>offline</code></a>" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <code>&lt;body&gt;</code> に発行されます。加えて、このイベントは <code>document.body</code> から <code>document</code> へとバブリングし、 <code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p>
+
+<p><a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。</p>
+
+<p>これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。</p>
+<ul>
+ <li><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を、 <code>window</code>, <code>document</code>, <code>document.body</code> に対して使用します。</li>
+  <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<strong>注意:</strong> <code>window.ononline</code> または <code>window.onoffline</code> は互換性の理由で動作しません)</li>
+  <li>HTML マークアップで <code>&lt;body&gt;</code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li>
+</ul>
+
+<h2 id="Example">例</h2>
+
+<p>イベントが機能しているかどうかを確認するために、<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。</p>
+
+<p>こちらが JavaScript 部分です。</p>
+
+<pre class="brush: js">window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+  var log = document.getElementById("log");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});</pre>
+
+<p>CSS 部分です。</p>
+
+<pre class="brush: css">#status {
+  position: fixed;
+  width: 100%;
+  font: bold 1em sans-serif;
+  color: #FFF;
+  padding: 0.5em;
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+</pre>
+
+<p>対応する HTML です。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="brush: html">&lt;div id="status"&gt;&lt;/div&gt;
+&lt;div id="log"&gt;&lt;/div&gt;
+&lt;p&gt;This is a test&lt;/p&gt;
+</pre>
+
+<p>実行例はこちらです。</p>
+
+<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p>
+
+<h2 id="Notes">注</h2>
+
+<p>この API がブラウザに実装されていない場合は、サービスワーカーや  <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。</p>
+
+<h2 id="References">参考文献</h2>
+
+<ul>
+  <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節</a></li>
+  <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li>
+  <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li>
+  <li><a href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li>
+</ul>
diff --git a/files/ja/web/api/navigator/online_and_offline_events/index.html b/files/ja/web/api/navigator/online_and_offline_events/index.html
deleted file mode 100644
index 15fc35b7c8..0000000000
--- a/files/ja/web/api/navigator/online_and_offline_events/index.html
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: オンライン・オフラインイベント
-slug: Web/API/Navigator/Online_and_offline_events
-tags:
-  - AJAX
-  - DOM
-  - HTML5
-  - Intermediate
-  - NeedsUpdate
-  - Offline web applications
-  - Web Development
-translation_of: Web/API/Navigator/Online_and_offline_events
-original_slug: Web/API/NavigatorOnLine/Online_and_offline_events
----
-<p>一部のブラウザーは、 <a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">Online/Offline イベント</a>を <a href="https://www.whatwg.org/specs/web-apps/current-work/">WHATWG Web Applications 1.0 仕様書</a>に従って実装しています。</p>
-
-<h3 id="Overview">概要</h3>
-
-<p>オフラインに対応した良いウェブアプリケーションを構築するためには、アプリケーションが実際にオフラインになったタイミングを知る必要があります。また、アプリケーションが「オンライン」の状態に復帰したタイミングも知る必要があります。要件を分解すると次のようになります。</p>
-
-<ol>
-  <li>サーバーとの再同期ができるように、ユーザーがオンラインに戻ったタイミングを知る必要があります。</li>
-  <li>サーバーへのリクエストを後回しにすることができるように、ユーザーがオフラインなったタイミングを知る必要があります。</li>
-</ol>
-
-<p>オンライン／オフラインイベントがこのプロセスを一般化するのに役立ちます。</p>
-
-<p>残念ながら、これらのイベントは完全には信頼できません。より高い信頼性が必要な場合や、 API がブラウザーに実装されていない場合は、サービスワーカーを使用したり <a href="https://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を利用してオフラインであるかどうかを検出することができます。</p>
-
-<h2 id="API">API</h2>
-
-<h3 id="navigator.onLine"><code>navigator.onLine</code></h3>
-
-<p><code><a href="/ja/docs/Web/API/Navigator/onLine">navigator.onLine</a></code> は、 <code>true</code>/<code>false</code> の値を保持しているプロパティです (オンラインの場合は <code>true</code>、オフラインの場合は <code>false</code>)。</p>
-
-<p>このプロパティは、ユーザーが「オフラインモード」に切り替えたとき (Firefox の場合は、ファイル→オフライン作業) に更新されます。さらに、このプロパティは、ブラウザーがネットワークに接続できなくなったときに更新されます。仕様書によれば、次のようになっています。</p>
-
-<blockquote cite="https://www.whatwg.org/specs/web-apps/current-work/#offline">
-  <code>navigator.onLine</code> 属性はユーザーがリンクを辿ったり、スクリプトが外部のページをリクエストしたりしたときにユーザーエージェントがネットワークで通信できない場合 (またはそのような試みが失敗した場合) は、必ず false を返す必要があります。</blockquote>
-
-<p>Firefox 2 はこのプロパティをブラウザーのオフラインモードが切り替わる度に更新します。 <a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> は、 Windows、 Linux、 OS X においてネットワークの接続状態が変化したときにも更新します。</p>
-
-<p>このプロパティは Firefox と Internet Explorer の古いバージョンにも存在しました。 (この仕様はこれらの先行的な実装に基づいています)。従って、今すぐこのプロパティを使い始めることができます。ネットワーク状態の自動判断は Firefox 2 にて実装されました。</p>
-
-<h3 id=".22online.22_and_.22offline.22_events">"<code>online</code>" および "<code>offline</code>" イベント</h3>
-
-<p><a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a> は 2 つの新しいイベントを導入しました。"<a href="/ja/docs/Web/API/document.ononline"><code>online</code></a>" and "<a href="/ja/docs/Web/API/document.onoffline"><code>offline</code></a>" です。これらの 2 つのイベントは、ブラウザーのオンラインおよびオフラインモードが切り替わるたびに、各ページの <code>&lt;body&gt;</code> に発行されます。加えて、このイベントは <code>document.body</code> から <code>document</code> へとバブリングし、 <code>window</code> までたどり着きます。これらのイベントはキャンセルできません (ユーザーのオンラインモードやオフラインモードへの移行を防ぐことはできません)。</p>
-
-<p><a href="/ja/docs/Mozilla/Firefox/Releases/41#miscellaneous">Firefox 41</a> では、 Windows, Linux, OS X においてネットワークの接続状態が変化したことを OS が通知したときに、これらのイベントが発行されます。</p>
-
-<p>これらのイベントに対するリスナーは、いくつかのお馴染みの方法で登録することができます。</p>
-<ul>
- <li><code><a href="/ja/docs/Web/API/EventTarget/addEventListener">addEventListener</a></code> を、 <code>window</code>, <code>document</code>, <code>document.body</code> に対して使用します。</li>
-  <li><code>document</code> または <code>document.body</code> の <code>.ononline</code> または <code>.onoffline</code> プロパティを JavaScript の <code>Function</code> オブジェクトに設定します。(<strong>注意:</strong> <code>window.ononline</code> または <code>window.onoffline</code> は互換性の理由で動作しません)</li>
-  <li>HTML マークアップで <code>&lt;body&gt;</code> タグの <code>ononline="..."</code> または <code>onoffline="..."</code> 属性を指定します。</li>
-</ul>
-
-<h2 id="Example">例</h2>
-
-<p>イベントが機能しているかどうかを確認するために、<a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a>を用意しました (イベントリスナーを document.body に代入しているため、 Chrome では動作しません)。</p>
-
-<p>こちらが JavaScript 部分です。</p>
-
-<pre class="brush: js">window.addEventListener('load', function() {
-  var status = document.getElementById("status");
-  var log = document.getElementById("log");
-
-  function updateOnlineStatus(event) {
-    var condition = navigator.onLine ? "online" : "offline";
-
-    status.className = condition;
-    status.innerHTML = condition.toUpperCase();
-
-    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
-  }
-
-  window.addEventListener('online',  updateOnlineStatus);
-  window.addEventListener('offline', updateOnlineStatus);
-});</pre>
-
-<p>CSS 部分です。</p>
-
-<pre class="brush: css">#status {
-  position: fixed;
-  width: 100%;
-  font: bold 1em sans-serif;
-  color: #FFF;
-  padding: 0.5em;
-}
-
-#log {
-  padding: 2.5em 0.5em 0.5em;
-  font: 1em sans-serif;
-}
-
-.online {
-  background: green;
-}
-
-.offline {
-  background: red;
-}
-</pre>
-
-<p>対応する HTML です。 <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
-
-<pre class="brush: html">&lt;div id="status"&gt;&lt;/div&gt;
-&lt;div id="log"&gt;&lt;/div&gt;
-&lt;p&gt;This is a test&lt;/p&gt;
-</pre>
-
-<p>実行例はこちらです。</p>
-
-<p>{{ EmbedLiveSample('Example', '100%', '150') }}</p>
-
-<h2 id="Notes">注</h2>
-
-<p>この API がブラウザに実装されていない場合は、サービスワーカーや  <a href="http://www.html5rocks.com/en/mobile/workingoffthegrid.html#toc-xml-http-request">XMLHttpRequest からのレスポンス</a>を使用するなど、他の兆候を使用してオフラインであるかどうかを検出することができます。</p>
-
-<h2 id="References">参考文献</h2>
-
-<ul>
-  <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG Web Applications 1.0 仕様の「Online/Offline イベント」の節</a></li>
-  <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">Firefox に実装された online/offline イベントのバグ追跡</a>および<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">関連バグ</a></li>
-  <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">簡単なテストケース</a></li>
-  <li><a href="http://ejohn.org/blog/offline-events/">Online/Offline イベントの解説</a></li>
-</ul>
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index 0dcfb7500c..dec0d5b016 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -409,7 +409,7 @@
 /ko/docs/Navigation_timing	/ko/docs/Web/API/Navigation_timing_API
 /ko/docs/Node_server_without_framework	/ko/docs/Learn/Server-side/Node_server_without_framework
 /ko/docs/Notable_bugs_fixed_in_Firefox_3	/ko/docs/Mozilla/Firefox/Releases/3/Notable_bugs_fixed
-/ko/docs/Online_and_offline_events	/ko/docs/Web/API/Navigator/Online_and_offline_events
+/ko/docs/Online_and_offline_events	/ko/docs/Web/API/Navigator/onLine
 /ko/docs/Plugins/Guide/Scripting_plugins	/ko/docs/Glossary/Plugin
 /ko/docs/SVG	/ko/docs/Web/SVG
 /ko/docs/SVG/Tutorial	/ko/docs/Web/SVG/Tutorial
@@ -466,11 +466,12 @@
 /ko/docs/Web/API/Navigator.battery	/ko/docs/Web/API/Navigator/battery
 /ko/docs/Web/API/Navigator.battery/window.navigator.battery	/ko/docs/Web/API/Navigator/battery
 /ko/docs/Web/API/Navigator.connection/window.navigator.connection	/ko/docs/Web/API/Navigator/connection
+/ko/docs/Web/API/Navigator/Online_and_offline_events	/ko/docs/Web/API/Navigator/onLine
 /ko/docs/Web/API/NavigatorID	/ko/docs/Web/API/Navigator
 /ko/docs/Web/API/NavigatorLanguage	/ko/docs/Web/API/Navigator
 /ko/docs/Web/API/NavigatorLanguage/language	/ko/docs/Web/API/Navigator/language
 /ko/docs/Web/API/NavigatorOnLine	/ko/docs/Web/API/Navigator/language
-/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events	/ko/docs/Web/API/Navigator/Online_and_offline_events
+/ko/docs/Web/API/NavigatorOnLine/Online_and_offline_events	/ko/docs/Web/API/Navigator/onLine
 /ko/docs/Web/API/NetworkInformation.connection	/ko/docs/Web/API/Navigator/connection
 /ko/docs/Web/API/NetworkInformation.connection/window.navigator.connection	/ko/docs/Web/API/Navigator/connection
 /ko/docs/Web/API/NetworkInformation/connection	/ko/docs/Web/API/Navigator/connection
diff --git a/files/ko/web/api/navigator/online/index.html b/files/ko/web/api/navigator/online/index.html
new file mode 100644
index 0000000000..b28eb025c1
--- /dev/null
+++ b/files/ko/web/api/navigator/online/index.html
@@ -0,0 +1,108 @@
+---
+title: Online and offline events
+slug: Web/API/Navigator/onLine
+tags:
+  - AJAX
+  - DOM
+  - Web Development
+translation_of: Web/API/Navigator/Online_and_offline_events
+original_slug: Web/API/Navigator/Online_and_offline_events
+---
+<p>In progress <a href="ko/Firefox_3_for_developers">Firefox 3</a>는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG 웹 애플리케이션 1.0 명세</a>에 기술된 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">온라인/오프라인 이벤트</a>를 구현합니다.</p>
+
+<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
+
+<p>좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.</p>
+
+<ol>
+ <li>여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.</li>
+ <li>여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.</li>
+</ol>
+
+<p>온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.</p>
+
+<p>여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 <code>HEAD</code> 섹션에 <code>LINK</code> 요소를 포함합니다.</p>
+
+<pre class="eval"><span class="nowiki">&lt;link rel="offline-resource" href="myresource"&gt;</span>
+</pre>
+
+<p>이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.</p>
+
+<h3 id="API" name="API">API</h3>
+
+<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
+
+<p><code><a href="ko/DOM/window.navigator.onLine">navigator.onLine</a></code>는 <code>true</code>/<code>false</code>(온라인은 <code>true</code>, 오프라인은 <code>false</code>)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -&gt; 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.</p>
+
+<p>또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:</p>
+
+<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) <code>navigator.onLine</code> 속성은 false를 반환해야 합니다...</blockquote>
+
+<p>Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.</p>
+
+<p>이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.</p>
+
+<h4 id=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8">"<code>online</code>"과 "<code>offline</code>" 이벤트</h4>
+
+<p><a href="ko/Firefox_3">Firefox 3</a>는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "<code>online</code>"과 "<code>offline</code>"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <code>&lt;body&gt;</code>에서 발생합니다. 덧붙여, 이 이벤트는 <code>document.body</code>에서 <code>document</code>로 전달되고 <code>window</code>에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).</p>
+
+<p>널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.</p>
+
+<ul>
+ <li><code>window</code>, <code>document</code>, <code>document.body</code>에서 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 이용</li>
+ <li>자바스크립트의 <code>Function</code> 개체에서 <code>document</code>나 <code>document.body</code>에 <code>.ononline</code> 혹은 <code>.onoffline</code> 속성을 설정 (<strong>참고:</strong> 호환성 때문에<code>window.ononline</code>이나 <code>window.onoffline</code>은 올바로 동작하지 않습니다.)</li>
+ <li>HTML 마크업의 <code>&lt;body&gt;</code> 태그에 <code>ononline="..."</code> 혹은 <code>onoffline="..."</code> 속성을 지정</li>
+</ul>
+
+<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
+
+<p>이벤트가 동작하는지 확인할 수 있는 <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">간단한 테스트 케이스</a>가 있습니다. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
+
+<pre class="eval"> &lt;!doctype html&gt;
+ &lt;html&gt;
+ &lt;head&gt;
+   &lt;script&gt;
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   &lt;/script&gt;
+   &lt;style&gt;...&lt;/style&gt;
+ &lt;/head&gt;
+ &lt;body onload="loaded()"&gt;
+   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
+   &lt;div id="log"&gt;&lt;/div&gt;
+ &lt;/body&gt;
+ &lt;/html&gt;
+</pre>
+
+<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
+
+<ul>
+ <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
+ <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
+ <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
+</ul>
+
+<p> </p>
+
+<p> </p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
diff --git a/files/ko/web/api/navigator/online_and_offline_events/index.html b/files/ko/web/api/navigator/online_and_offline_events/index.html
deleted file mode 100644
index 039240fedc..0000000000
--- a/files/ko/web/api/navigator/online_and_offline_events/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: Online and offline events
-slug: Web/API/Navigator/Online_and_offline_events
-tags:
-  - AJAX
-  - DOM
-  - Web Development
-translation_of: Web/API/Navigator/Online_and_offline_events
----
-<p>In progress <a href="ko/Firefox_3_for_developers">Firefox 3</a>는 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WHATWG 웹 애플리케이션 1.0 명세</a>에 기술된 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">온라인/오프라인 이벤트</a>를 구현합니다.</p>
-
-<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3>
-
-<p>좋은 오프라인 가능(offline-capable) 웹 애플리케이션을 작성하려면 여러분의 애플리케이션이 실제로 오프라인이 되는 때를 알아야 합니다. 덧붙여, 여러분의 애플리케이션이 '온라인' 상태로 돌아오는 때도 알아야 합니다. 사실, 이 요구사항은 다음과 같이 정리할 수 있습니다.</p>
-
-<ol>
- <li>여러분이 서버와 재동기화할 수 있도록 사용자가 온라인으로 돌아오는 때를 알아야 합니다.</li>
- <li>여러분의 서버 요청을 나중에 처리하기 위해 대기시킬 수 있도록 사용자가 오프라인이 되는 때를 알아야 합니다.</li>
-</ol>
-
-<p>온라인/오프라인 이벤트는 이 과정을 단순하게 만드는 것을 도와줍니다.</p>
-
-<p>여러분의 웹 애플리케이션은 특정 문서가 오프라인 자원 캐시에 보관되는 것을 확실하게 할 필요도 있습니다. 이를 위해서는 다음과 같이 <code>HEAD</code> 섹션에 <code>LINK</code> 요소를 포함합니다.</p>
-
-<pre class="eval"><span class="nowiki">&lt;link rel="offline-resource" href="myresource"&gt;</span>
-</pre>
-
-<p>이는 Firefox 3 및 이후 버전에서 HTML을 처리할 때, 참조하는 자원을 오프라인에서 사용할 수 있도록 특별한 오프라인 자원 캐시에 저장하도록 합니다.</p>
-
-<h3 id="API" name="API">API</h3>
-
-<h4 id="navigator.onLine" name="navigator.onLine"><code>navigator.onLine</code></h4>
-
-<p><code><a href="ko/DOM/window.navigator.onLine">navigator.onLine</a></code>는 <code>true</code>/<code>false</code>(온라인은 <code>true</code>, 오프라인은 <code>false</code>)를 보관하는 속성입니다. 이 속성은 사용자가 해당 메뉴 항목(파일 -&gt; 오프라인 작업)을 선택하여 "오프라인 모드"로 전환할 때마다 갱신됩니다.</p>
-
-<p>또한 이 속성은 브라우저가 네트워크에 더 이상 연결할 수 없을 때마다 갱신됩니다. 명세에 따르면:</p>
-
-<blockquote cite="http://www.whatwg.org/specs/web-apps/current-work/#offline">사용자가 링크를 따라가거나 스크립트가 원격 페이지를 요청할 때 사용자 에이전트가 네트워크에 접속할 수 없으면 (혹은 그러한 시도가 실패할 것이라는 것을 안다면) <code>navigator.onLine</code> 속성은 false를 반환해야 합니다...</blockquote>
-
-<p>Firefox 2는 윈도우와 리눅스에서 브라우저의 온라인/오프라인 모드가 바뀔 때와 네트워크가 끊어지거나 다시 접속될 때 이 속성을 갱신합니다.</p>
-
-<p>이 속성은 Firefox와 Internet Explorer의 이전 버전에도 있으므로 (명세는 이러한 기존 구현을 바탕으로 합니다) 이를 즉시 사용할 수 있습니다. 네트워크 상태의 자동 감지는 Firefox 2에서 구현되었습니다.</p>
-
-<h4 id=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8" name=".22online.22.EA.B3.BC_.22offline.22_.EC.9D.B4.EB.B2.A4.ED.8A.B8">"<code>online</code>"과 "<code>offline</code>" 이벤트</h4>
-
-<p><a href="ko/Firefox_3">Firefox 3</a>는 두 가지 새로운 이벤트를 도입하고 있습니다: 바로 "<code>online</code>"과 "<code>offline</code>"입니다. 이 두 가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 각 페이지의 <code>&lt;body&gt;</code>에서 발생합니다. 덧붙여, 이 이벤트는 <code>document.body</code>에서 <code>document</code>로 전달되고 <code>window</code>에서 끝납니다. 두 가지 이벤트 모두 취소 불가능한(non-cancellable) 이벤트입니다(여러분은 사용자가 온라인이 되거나 오프라인이 되는 것을 막을 수 없습니다).</p>
-
-<p>널리 알려진 몇 가지 방법으로 해당 이벤트에 대한 리스너(listener)를 등록할 수 있습니다.</p>
-
-<ul>
- <li><code>window</code>, <code>document</code>, <code>document.body</code>에서 <code><a href="ko/DOM/element.addEventListener">addEventListener</a></code>를 이용</li>
- <li>자바스크립트의 <code>Function</code> 개체에서 <code>document</code>나 <code>document.body</code>에 <code>.ononline</code> 혹은 <code>.onoffline</code> 속성을 설정 (<strong>참고:</strong> 호환성 때문에<code>window.ononline</code>이나 <code>window.onoffline</code>은 올바로 동작하지 않습니다.)</li>
- <li>HTML 마크업의 <code>&lt;body&gt;</code> 태그에 <code>ononline="..."</code> 혹은 <code>onoffline="..."</code> 속성을 지정</li>
-</ul>
-
-<h3 id=".EC.98.88.EC.A0.9C" name=".EC.98.88.EC.A0.9C">예제</h3>
-
-<p>이벤트가 동작하는지 확인할 수 있는 <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">간단한 테스트 케이스</a>가 있습니다. <span class="comment">XXX When mochitests for this are created, point to those instead and update this example -nickolay</span></p>
-
-<pre class="eval"> &lt;!doctype html&gt;
- &lt;html&gt;
- &lt;head&gt;
-   &lt;script&gt;
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   &lt;/script&gt;
-   &lt;style&gt;...&lt;/style&gt;
- &lt;/head&gt;
- &lt;body onload="loaded()"&gt;
-   &lt;div id="status"&gt;&lt;p id="state"&gt;&lt;/p&gt;&lt;/div&gt;
-   &lt;div id="log"&gt;&lt;/div&gt;
- &lt;/body&gt;
- &lt;/html&gt;
-</pre>
-
-<h3 id=".EC.B0.B8.EA.B3.A0" name=".EC.B0.B8.EA.B3.A0">참고</h3>
-
-<ul>
- <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">'Online/Offline events' section from the WHATWG Web Applications 1.0 Specification</a></li>
- <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336359">The bug tracking online/offline events implementation in Firefox</a> and a <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=336682">follow-up</a></li>
- <li><a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=220609">A simple test case</a></li>
- <li><a class="external" href="http://ejohn.org/blog/offline-events/">An explanation of Online/Offline events</a></li>
-</ul>
-
-<p> </p>
-
-<p> </p>
-
-<div class="noinclude"> </div>
-
-<p>{{ languages( { "en": "en/Online_and_offline_events", "es": "es/Eventos_online_y_offline", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }}</p>
-- 
cgit v1.2.3-54-g00ecf


From b88331943881611bbf03c9475fa8134d084b8ed2 Mon Sep 17 00:00:00 2001
From: kraccoon-dev <kraccoon0420@gmail.com>
Date: Thu, 3 Mar 2022 15:36:41 +0900
Subject: h2m

---
 files/ko/web/javascript/shells/index.html | 41 -------------------------------
 files/ko/web/javascript/shells/index.md   | 37 ++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 41 deletions(-)
 delete mode 100644 files/ko/web/javascript/shells/index.html
 create mode 100644 files/ko/web/javascript/shells/index.md

diff --git a/files/ko/web/javascript/shells/index.html b/files/ko/web/javascript/shells/index.html
deleted file mode 100644
index 106b41621c..0000000000
--- a/files/ko/web/javascript/shells/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: JavaScript 쉘
-slug: Web/JavaScript/Shells
-translation_of: Web/JavaScript/Shells
-original_slug: Web/JavaScript/쉘
----
-<div>{{JsSidebar}}</div>
-
-<p>여러분은 JavaScript 쉘을 통해 웹페이지 새로고침하지 않고 빠르게 <a href="/en-US/docs/Web/JavaScript">JavaScript</a> 의 코드를 테스트해볼 수 있습니다. 코드를 개발하고 디버깅하는데 매우 유용한 도구입니다.</p>
-
-<h2 id="독립적으로_사용할_수_있는_JavaScript_쉘">독립적으로 사용할 수 있는 JavaScript 쉘</h2>
-
-<p>아래의 Javascript 쉘은 펄과 파이썬과 같이 독립적인 환경을 제공합니다.</p>
-
-<ul>
- <li><a href="http://nodejs.org/">Node.js</a> - Node.js는 빠르고 확장 가능한 네트워크 어플리케이션을 쉽게 만들 수 있는 플랫폼입니다.</li>
- <li><a class="external" href="http://www.jsdb.org/">JSDB</a> - Windows, Mac, Linux 환경에 맞는 컴파일된 바이너리를 제공하는 독립적인 독립적인 Javascript 쉘입니다.</li>
- <li><a class="external" href="http://javalikescript.free.fr/">JavaLikeScript</a> - 네이티브와 JavaScript 라이브러리 모두를 제공하는 독립적이고 확장 가능한 JavaScript 쉘입니다.</li>
- <li><a class="external" href="http://gluescript.sourceforge.net/">GLUEscript</a> - 크로스-플랫폼 JavaScript 어플리케이션을 제작하기 위한 독립적인 JavaScript 쉘입니다. GUI 앱을 위한 wxWidgets(구 wxJavaScript)를 사용할 수 있습니다.</li>
- <li><a class="external" href="http://jspl.msg.mx/">jspl</a> - Perl의 영향을 받은 독립적인 JavaScript 쉘입니다. JavaScript에서 직접 perl 모듈을 사용할 수 있습니다: 데이터베이스 통합을 위한 DBI, GUI 앱을 위한 GTK2, 시스템 프로그래밍을 위한 POSIX, 기타 등등. 현재로서는 JavaScript 프로그래머를 위한 최고의 CPAN입니다.</li>
- <li><a class="external" href="http://shelljs.org">ShellJS</a> - Node.js를 위한 포터블 Unix 쉘 명령도구입니다.</li>
-</ul>
-
-<h2 id="JavaScript_쉘_리스트">JavaScript 쉘 리스트</h2>
-
-<p>아래는 Mozilla에서 사용할 수 있는 JavaScript Shell입니다.</p>
-
-<ul>
- <li>Firefox는 <a href="/ko/docs/Tools/Scratchpad">Scratchpad</a>라 불리는 자바스크립트 내장 콘솔을 가지고있습니다.(version6 이후)</li>
- <li><a href="/ko/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell">JavaScript Shell</a> (<code>js</code>) - JavaScript를 위한 command line인터프리터입니다.</li>
- <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect">XPConnect</a>인 <a href="/en-US/docs/Mozilla/XPConnect/xpcshell">xpcshell</a> - Mozilla개발자는 위한 유용한 쉘 입니다. (가끔 필요할거에요.)</li>
- <li><a href="http://babeljs.io/repl">Babel REPL</a> - 최신 자바스크립트를 시험해 볼 수 있는 브라우저 기반 <a href="https://en.wikipedia.org/wiki/REPL">REPL</a>입니다.</li>
- <li><a href="http://es6console.com/">ES6Console.com</a> - 브라우저에서 ECMAScript 2015 코드를 테스트 해보기위한 open-source JavaScript 콘솔 입니다.</li>
- <li><a href="http://jsconsole.com/">jsconsole.com</a> -- 웹에서 빠른속도록 JavaScript 코드를 테스트 해 볼 수 있는 open-source JavaScript 콘솔 입니다.</li>
- <li><a class="external" href="http://www.squarefree.com/shell/">JavaScript Shell (web page)</a> - <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/7434">Extension Developer's Extension</a>의 일부 기능으로 사용 가능합니다.</li>
- <li><a class="external" href="http://www.billyreisinger.com/jash/">Jash: JavaScript Shell</a> - 웹에서 커맨드라인접속이 가능한 <a href="https://ko.wikipedia.org/wiki/DHTML">DHTML</a> 기반 쉘 입니다.</li>
- <li><a class="external" href="http://hyperstruct.net/projects/mozrepl">MozRepl</a> - Firefox 및 기타 Mozilla 응용 프로그램에 연결하고 코드를 실행하는 중에 코드내용을 다루거나 확인 할 수 있습니다.</li>
- <li><a class="external" href="https://addons.mozilla.org/en-US/firefox/addon/execute-js/">Execute JS</a> - (더이상 지원되지않음) - 확장 된 JavaScript 콘솔을 제공하는 Firefox 확장 기능입니다. 임의의 JavaScript 코드 및 수정 기능을 편안하게 입력하고 실행할 수 있습니다.</li>
- <li><a class="link-https" href="https://addons.mozilla.org/addon/159546">xqjs</a> - Firefox를 위한 간단한 콘솔</li>
- <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">Firebug</a> - 콘솔을 포함한 Firefox 개발자도구입니다.</li>
-</ul>
diff --git a/files/ko/web/javascript/shells/index.md b/files/ko/web/javascript/shells/index.md
new file mode 100644
index 0000000000..e4c0284deb
--- /dev/null
+++ b/files/ko/web/javascript/shells/index.md
@@ -0,0 +1,37 @@
+---
+title: JavaScript 쉘
+slug: Web/JavaScript/Shells
+translation_of: Web/JavaScript/Shells
+original_slug: Web/JavaScript/쉘
+---
+{{JsSidebar}}
+
+여러분은 JavaScript 쉘을 통해 웹페이지 새로고침하지 않고 빠르게 [JavaScript](/en-US/docs/Web/JavaScript) 의 코드를 테스트해볼 수 있습니다. 코드를 개발하고 디버깅하는데 매우 유용한 도구입니다.
+
+## 독립적으로 사용할 수 있는 JavaScript 쉘
+
+아래의 Javascript 쉘은 펄과 파이썬과 같이 독립적인 환경을 제공합니다.
+
+- [Node.js](http://nodejs.org/) - Node.js는 빠르고 확장 가능한 네트워크 어플리케이션을 쉽게 만들 수 있는 플랫폼입니다.
+- [JSDB](http://www.jsdb.org/) - Windows, Mac, Linux 환경에 맞는 컴파일된 바이너리를 제공하는 독립적인 독립적인 Javascript 쉘입니다.
+- [JavaLikeScript](http://javalikescript.free.fr/) - 네이티브와 JavaScript 라이브러리 모두를 제공하는 독립적이고 확장 가능한 JavaScript 쉘입니다.
+- [GLUEscript](http://gluescript.sourceforge.net/) - 크로스-플랫폼 JavaScript 어플리케이션을 제작하기 위한 독립적인 JavaScript 쉘입니다. GUI 앱을 위한 wxWidgets(구 wxJavaScript)를 사용할 수 있습니다.
+- [jspl](http://jspl.msg.mx/) - Perl의 영향을 받은 독립적인 JavaScript 쉘입니다. JavaScript에서 직접 perl 모듈을 사용할 수 있습니다: 데이터베이스 통합을 위한 DBI, GUI 앱을 위한 GTK2, 시스템 프로그래밍을 위한 POSIX, 기타 등등. 현재로서는 JavaScript 프로그래머를 위한 최고의 CPAN입니다.
+- [ShellJS](http://shelljs.org) - Node.js를 위한 포터블 Unix 쉘 명령도구입니다.
+
+## JavaScript 쉘 리스트
+
+아래는 Mozilla에서 사용할 수 있는 JavaScript Shell입니다.
+
+- Firefox는 [Scratchpad](/ko/docs/Tools/Scratchpad)라 불리는 자바스크립트 내장 콘솔을 가지고있습니다.(version6 이후)
+- [JavaScript Shell](/ko/docs/Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell) (`js`) - JavaScript를 위한 command line인터프리터입니다.
+- [XPConnect](/en-US/docs/Mozilla/Tech/XPCOM/Language_bindings/XPConnect)인 [xpcshell](/en-US/docs/Mozilla/XPConnect/xpcshell) - Mozilla개발자는 위한 유용한 쉘 입니다. (가끔 필요할거에요.)
+- [Babel REPL](http://babeljs.io/repl) - 최신 자바스크립트를 시험해 볼 수 있는 브라우저 기반 [REPL](https://en.wikipedia.org/wiki/REPL)입니다.
+- [ES6Console.com](http://es6console.com/) - 브라우저에서 ECMAScript 2015 코드를 테스트 해보기위한 open-source JavaScript 콘솔 입니다.
+- [jsconsole.com](http://jsconsole.com/) -- 웹에서 빠른속도록 JavaScript 코드를 테스트 해 볼 수 있는 open-source JavaScript 콘솔 입니다.
+- [JavaScript Shell (web page)](http://www.squarefree.com/shell/) - [Extension Developer's Extension](https://addons.mozilla.org/en-US/firefox/addon/7434)의 일부 기능으로 사용 가능합니다.
+- [Jash: JavaScript Shell](http://www.billyreisinger.com/jash/) - 웹에서 커맨드라인접속이 가능한 [DHTML](https://ko.wikipedia.org/wiki/DHTML) 기반 쉘 입니다.
+- [MozRepl](http://hyperstruct.net/projects/mozrepl) - Firefox 및 기타 Mozilla 응용 프로그램에 연결하고 코드를 실행하는 중에 코드내용을 다루거나 확인 할 수 있습니다.
+- [Execute JS](https://addons.mozilla.org/en-US/firefox/addon/execute-js/) - (더이상 지원되지않음) - 확장 된 JavaScript 콘솔을 제공하는 Firefox 확장 기능입니다. 임의의 JavaScript 코드 및 수정 기능을 편안하게 입력하고 실행할 수 있습니다.
+- [xqjs](https://addons.mozilla.org/addon/159546) - Firefox를 위한 간단한 콘솔
+- [Firebug](https://addons.mozilla.org/en-US/firefox/addon/firebug/) - 콘솔을 포함한 Firefox 개발자도구입니다.
-- 
cgit v1.2.3-54-g00ecf


From 5fbfeee5908241590dacb0f0aac3859f61360947 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 13:04:02 +0900
Subject: Node インターフェイスのメソッドの記事を移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/appendchild/index.html       |  97 -----------
 files/ja/web/api/node/appendchild/index.md         |  97 +++++++++++
 files/ja/web/api/node/clonenode/index.html         |  62 -------
 files/ja/web/api/node/clonenode/index.md           |  62 +++++++
 .../api/node/comparedocumentposition/index.html    | 118 -------------
 .../web/api/node/comparedocumentposition/index.md  | 118 +++++++++++++
 files/ja/web/api/node/contains/index.html          |  56 -------
 files/ja/web/api/node/contains/index.md            |  56 +++++++
 files/ja/web/api/node/haschildnodes/index.html     |  31 ----
 files/ja/web/api/node/haschildnodes/index.md       |  31 ++++
 files/ja/web/api/node/insertbefore/index.html      | 186 ---------------------
 files/ja/web/api/node/insertbefore/index.md        | 186 +++++++++++++++++++++
 .../ja/web/api/node/isdefaultnamespace/index.html  |  35 ----
 files/ja/web/api/node/isdefaultnamespace/index.md  |  35 ++++
 files/ja/web/api/node/isequalnode/index.html       |  90 ----------
 files/ja/web/api/node/isequalnode/index.md         |  90 ++++++++++
 files/ja/web/api/node/issamenode/index.html        |  39 -----
 files/ja/web/api/node/issamenode/index.md          |  39 +++++
 files/ja/web/api/node/issupported/index.html       |  44 -----
 files/ja/web/api/node/issupported/index.md         |  44 +++++
 files/ja/web/api/node/normalize/index.html         |  48 ------
 files/ja/web/api/node/normalize/index.md           |  48 ++++++
 files/ja/web/api/node/removechild/index.html       | 124 --------------
 files/ja/web/api/node/removechild/index.md         | 124 ++++++++++++++
 files/ja/web/api/node/replacechild/index.html      |  75 ---------
 files/ja/web/api/node/replacechild/index.md        |  75 +++++++++
 26 files changed, 1005 insertions(+), 1005 deletions(-)
 delete mode 100644 files/ja/web/api/node/appendchild/index.html
 create mode 100644 files/ja/web/api/node/appendchild/index.md
 delete mode 100644 files/ja/web/api/node/clonenode/index.html
 create mode 100644 files/ja/web/api/node/clonenode/index.md
 delete mode 100644 files/ja/web/api/node/comparedocumentposition/index.html
 create mode 100644 files/ja/web/api/node/comparedocumentposition/index.md
 delete mode 100644 files/ja/web/api/node/contains/index.html
 create mode 100644 files/ja/web/api/node/contains/index.md
 delete mode 100644 files/ja/web/api/node/haschildnodes/index.html
 create mode 100644 files/ja/web/api/node/haschildnodes/index.md
 delete mode 100644 files/ja/web/api/node/insertbefore/index.html
 create mode 100644 files/ja/web/api/node/insertbefore/index.md
 delete mode 100644 files/ja/web/api/node/isdefaultnamespace/index.html
 create mode 100644 files/ja/web/api/node/isdefaultnamespace/index.md
 delete mode 100644 files/ja/web/api/node/isequalnode/index.html
 create mode 100644 files/ja/web/api/node/isequalnode/index.md
 delete mode 100644 files/ja/web/api/node/issamenode/index.html
 create mode 100644 files/ja/web/api/node/issamenode/index.md
 delete mode 100644 files/ja/web/api/node/issupported/index.html
 create mode 100644 files/ja/web/api/node/issupported/index.md
 delete mode 100644 files/ja/web/api/node/normalize/index.html
 create mode 100644 files/ja/web/api/node/normalize/index.md
 delete mode 100644 files/ja/web/api/node/removechild/index.html
 create mode 100644 files/ja/web/api/node/removechild/index.md
 delete mode 100644 files/ja/web/api/node/replacechild/index.html
 create mode 100644 files/ja/web/api/node/replacechild/index.md

diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html
deleted file mode 100644
index 3242491906..0000000000
--- a/files/ja/web/api/node/appendchild/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Node.appendChild
-slug: Web/API/Node/appendChild
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/Node/appendChild
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p>
-
-<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p>
-
-<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
-
-<h3 id="引数">引数</h3>
-
-<h4 id="aChild">aChild</h4>
-
-<p>親ノードに追加する子ノード(要素)</p>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p>
-
-<h2 id="Notes" name="Notes">注意</h2>
-
-<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p>
-
-<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre>
-
-<p><code>aBlock</code> に <code>&lt;b&gt;&lt;/b&gt;</code> を与えただけでは期待通りに動きません。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
-document.body.appendChild(p);
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>{{SpecName("DOM3 Core")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>{{SpecName("DOM2 Core")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>{{SpecName("DOM1")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
-
-<p>{{Compat("api.Node.appendChild")}}</p>
-
-<div id="compat-mobile"></div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild()")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("Node.hasChildNodes()")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md
new file mode 100644
index 0000000000..3242491906
--- /dev/null
+++ b/files/ja/web/api/node/appendchild/index.md
@@ -0,0 +1,97 @@
+---
+title: Node.appendChild
+slug: Web/API/Node/appendChild
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+translation_of: Web/API/Node/appendChild
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p>
+
+<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p>
+
+<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
+
+<h3 id="引数">引数</h3>
+
+<h4 id="aChild">aChild</h4>
+
+<p>親ノードに追加する子ノード(要素)</p>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p>
+
+<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre>
+
+<p><code>aBlock</code> に <code>&lt;b&gt;&lt;/b&gt;</code> を与えただけでは期待通りに動きません。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
+var p = document.createElement("p");
+document.body.appendChild(p);
+</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{SpecName("DOM3 Core")}} から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>{{SpecName("DOM2 Core")}} から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>{{SpecName("DOM1")}} から変更なし。</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初期定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
+
+<p>{{Compat("api.Node.appendChild")}}</p>
+
+<div id="compat-mobile"></div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.insertBefore()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("ParentNode.append()")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/clonenode/index.html b/files/ja/web/api/node/clonenode/index.html
deleted file mode 100644
index db00fc7a61..0000000000
--- a/files/ja/web/api/node/clonenode/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: Node.cloneNode()
-slug: Web/API/Node/cloneNode
-translation_of: Web/API/Node/cloneNode
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>現在のノードの複製を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
-</pre>
-
-<dl>
- <dt><code>node</code></dt>
- <dd>複製するノード</dd>
- <dt><code>dupNode</code></dt>
- <dd>新しく生成される <code>node</code> の複製</dd>
- <dt><code>deep</code> {{optional_inline}}</dt>
- <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code>
- <div class="note">
- <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p>
-
- <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p>
- </div>
- </dd>
-</dl>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">var p = document.getElementById("para1");
-var p_prime = p.cloneNode(true);
-</pre>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p>
-
-<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p>
-
-<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p>
-
-<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p>
-
-<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div>
-
-<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.cloneNode")}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<ul>
- <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
- <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
- <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li>
-</ul>
diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md
new file mode 100644
index 0000000000..db00fc7a61
--- /dev/null
+++ b/files/ja/web/api/node/clonenode/index.md
@@ -0,0 +1,62 @@
+---
+title: Node.cloneNode()
+slug: Web/API/Node/cloneNode
+translation_of: Web/API/Node/cloneNode
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>現在のノードの複製を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
+</pre>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>複製するノード</dd>
+ <dt><code>dupNode</code></dt>
+ <dd>新しく生成される <code>node</code> の複製</dd>
+ <dt><code>deep</code> {{optional_inline}}</dt>
+ <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code>
+ <div class="note">
+ <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p>
+
+ <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+</pre>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p>
+
+<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p>
+
+<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p>
+
+<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p>
+
+<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div>
+
+<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.cloneNode")}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<ul>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
+ <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
+ <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li>
+</ul>
diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html
deleted file mode 100644
index 5865081c84..0000000000
--- a/files/ja/web/api/node/comparedocumentposition/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Node.compareDocumentPosition
-slug: Web/API/Node/compareDocumentPosition
-tags:
-  - DOM
-  - DOM Element Methods
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Node/compareDocumentPosition
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> )
-</pre>
-
-<h3 id="パラメーター">パラメーター</h3>
-
-<dl>
- <dt><code>node</code></dt>
- <dd>比較元ノード</dd>
- <dt><code>otherNode</code></dt>
- <dd><em>node</em> と比較する別ノード</dd>
-</dl>
-
-<h3 id="返り値">返り値</h3>
-
-<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">名称</th>
-   <th scope="col">値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
-   <td>16</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
-   <td>32</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js;highlight:[3]">var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
-} else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
-}
-</pre>
-
-<div class="note">
-<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&amp;</code>" を用いなくてはならない点に注意して下さい。</p>
-</div>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table>
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>策定状況</th>
-   <th>コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td>
-   <td>Recommendation</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td>
-   <td>Living standard</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.contains")}}</li>
- <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
-</ul>
diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md
new file mode 100644
index 0000000000..5865081c84
--- /dev/null
+++ b/files/ja/web/api/node/comparedocumentposition/index.md
@@ -0,0 +1,118 @@
+---
+title: Node.compareDocumentPosition
+slug: Web/API/Node/compareDocumentPosition
+tags:
+  - DOM
+  - DOM Element Methods
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/compareDocumentPosition
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> )
+</pre>
+
+<h3 id="パラメーター">パラメーター</h3>
+
+<dl>
+ <dt><code>node</code></dt>
+ <dd>比較元ノード</dd>
+ <dt><code>otherNode</code></dt>
+ <dd><em>node</em> と比較する別ノード</dd>
+</dl>
+
+<h3 id="返り値">返り値</h3>
+
+<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p>
+
+<h2 id="Notes" name="Notes">注記</h2>
+
+<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">名称</th>
+   <th scope="col">値</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
+   <td>1</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
+   <td>2</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
+   <td>4</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
+   <td>8</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
+   <td>16</td>
+  </tr>
+  <tr>
+   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
+   <td>32</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js;highlight:[3]">var head = document.getElementsByTagName('head').item(0);
+
+if ( head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING ) {
+  console.log("head 要素は body 要素より前に記述されています。");
+} else {
+  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+}
+</pre>
+
+<div class="note">
+<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&amp;</code>" を用いなくてはならない点に注意して下さい。</p>
+</div>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>仕様書</th>
+   <th>策定状況</th>
+   <th>コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td>
+   <td>Recommendation</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td>
+   <td>Living standard</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.contains")}}</li>
+ <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
+</ul>
diff --git a/files/ja/web/api/node/contains/index.html b/files/ja/web/api/node/contains/index.html
deleted file mode 100644
index 2947ce92d1..0000000000
--- a/files/ja/web/api/node/contains/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-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> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">node.contains( otherNode )
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</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>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.contains")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.compareDocumentPosition")}}</li>
- <li>{{domxref("Node.hasChildNodes")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/contains/index.md b/files/ja/web/api/node/contains/index.md
new file mode 100644
index 0000000000..2947ce92d1
--- /dev/null
+++ b/files/ja/web/api/node/contains/index.md
@@ -0,0 +1,56 @@
+---
+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> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">node.contains( otherNode )
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</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>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.contains")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.compareDocumentPosition")}}</li>
+ <li>{{domxref("Node.hasChildNodes")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/haschildnodes/index.html b/files/ja/web/api/node/haschildnodes/index.html
deleted file mode 100644
index b4ed1654d3..0000000000
--- a/files/ja/web/api/node/haschildnodes/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Node.hasChildNodes
-slug: Web/API/Node/hasChildNodes
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Node/hasChildNodes
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
-<h2 id="Example" name="Example">例</h2>
-<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p>
-<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
-
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
-}</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("Node.childNodes")}}</li>
- <li>{{domxref("Node.hasAttributes")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/haschildnodes/index.md b/files/ja/web/api/node/haschildnodes/index.md
new file mode 100644
index 0000000000..b4ed1654d3
--- /dev/null
+++ b/files/ja/web/api/node/haschildnodes/index.md
@@ -0,0 +1,31 @@
+---
+title: Node.hasChildNodes
+slug: Web/API/Node/hasChildNodes
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/hasChildNodes
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
+<h2 id="Example" name="Example">例</h2>
+<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p>
+<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
+</ul>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+ <li>{{domxref("Node.childNodes")}}</li>
+ <li>{{domxref("Node.hasAttributes")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html
deleted file mode 100644
index 2bfea72cdf..0000000000
--- a/files/ja/web/api/node/insertbefore/index.html
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: Node.insertBefore()
-slug: Web/API/Node/insertBefore
-tags:
-  - API
-  - DOM
-  - Element
-  - Method
-  - Node
-  - Reference
-  - メソッド
-translation_of: Web/API/Node/insertBefore
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p>
-
-<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p>
-
-<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p>
-
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p>
-</div>
-
-<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>)
-</pre>
-
-<dl>
- <dt><code><var>insertedNode</var></code></dt>
- <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd>
- <dt><code><var>parentNode</var></code></dt>
- <dd>新しく挿入されるノードの親です。</dd>
- <dt><code><var>newNode</var></code></dt>
- <dd>挿入されるノードです。</dd>
- <dt><code><var>referenceNode</var></code></dt>
- <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd>
-</dl>
-
-<div class="note">
-<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p>
-</div>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="Example_1" name="Example_1">例 1</h3>
-
-<pre class="brush: html">&lt;div id="parentElement"&gt;
-   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-// 挿入する新しいノードを作成する
-let newNode = document.createElement("span")
-
-// 親ノードの参照を取得する
-let parentDiv = document.getElementById("childElement").parentNode
-
-// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
-let sp2 = document.getElementById("childElement")
-parentDiv.insertBefore(newNode, sp2)
-// テストケース [ 1 ] 終了
-
-// テストケース [ 2 ] 開始: childElement が undefined 型の場合
-let sp2 = undefined // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
-// テストケース [ 2 ] 終了
-
-// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
-let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
-parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
-// テストケース [ 3 ] 終了
-&lt;/script&gt;
-</pre>
-
-<h3 id="Example_2" name="Example_2">例 2</h3>
-
-<pre class="brush:html">&lt;div id="parentElement"&gt;
-  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
-// 新しい只の &lt;span&gt; 要素を作成
-let sp1 = document.createElement("span")
-
-// 参照要素を取得
-let sp2 = document.getElementById("childElement")
-// 親要素を取得
-let parentDiv = sp2.parentNode
-
-// 新しい要素を sp2 の手前に挿入
-parentDiv.insertBefore(sp1, sp2)
-&lt;/script&gt;
-</pre>
-
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p>
-</div>
-
-<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p>
-
-<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre>
-
-<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p>
-
-<h3 id="Example_3" name="Example_3">例 3</h3>
-
-<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p>
-
-<pre class="brush:js">// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
-
-// 新しい要素を取得
-let newElement = document.createElement("div")
-
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-</pre>
-
-<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p>
-
-<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="spectable 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-insertbefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>挿入アルゴリズムのエラーを修正</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>より詳細にアルゴリズムを記述</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>目立った変更はなし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>目立った変更はなし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>導入</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.insertBefore")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild()")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.hasChildNodes()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/insertbefore/index.md b/files/ja/web/api/node/insertbefore/index.md
new file mode 100644
index 0000000000..2bfea72cdf
--- /dev/null
+++ b/files/ja/web/api/node/insertbefore/index.md
@@ -0,0 +1,186 @@
+---
+title: Node.insertBefore()
+slug: Web/API/Node/insertBefore
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Node
+  - Reference
+  - メソッド
+translation_of: Web/API/Node/insertBefore
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p>
+
+<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p>
+
+<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p>
+</div>
+
+<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>)
+</pre>
+
+<dl>
+ <dt><code><var>insertedNode</var></code></dt>
+ <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd>
+ <dt><code><var>parentNode</var></code></dt>
+ <dd>新しく挿入されるノードの親です。</dd>
+ <dt><code><var>newNode</var></code></dt>
+ <dd>挿入されるノードです。</dd>
+ <dt><code><var>referenceNode</var></code></dt>
+ <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd>
+</dl>
+
+<div class="note">
+<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p>
+</div>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Example_1" name="Example_1">例 1</h3>
+
+<pre class="brush: html">&lt;div id="parentElement"&gt;
+   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// 挿入する新しいノードを作成する
+let newNode = document.createElement("span")
+
+// 親ノードの参照を取得する
+let parentDiv = document.getElementById("childElement").parentNode
+
+// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// テストケース [ 1 ] 終了
+
+// テストケース [ 2 ] 開始: childElement が undefined 型の場合
+let sp2 = undefined // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
+// テストケース [ 2 ] 終了
+
+// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
+let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
+// テストケース [ 3 ] 終了
+&lt;/script&gt;
+</pre>
+
+<h3 id="Example_2" name="Example_2">例 2</h3>
+
+<pre class="brush:html">&lt;div id="parentElement"&gt;
+  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+// 新しい只の &lt;span&gt; 要素を作成
+let sp1 = document.createElement("span")
+
+// 参照要素を取得
+let sp2 = document.getElementById("childElement")
+// 親要素を取得
+let parentDiv = sp2.parentNode
+
+// 新しい要素を sp2 の手前に挿入
+parentDiv.insertBefore(sp1, sp2)
+&lt;/script&gt;
+</pre>
+
+<div class="blockIndicator note">
+<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p>
+</div>
+
+<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p>
+
+<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre>
+
+<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p>
+
+<h3 id="Example_3" name="Example_3">例 3</h3>
+
+<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p>
+
+<pre class="brush:js">// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親の最初の子を取得
+let theFirstChild = parentElement.firstChild
+
+// 新しい要素を取得
+let newElement = document.createElement("div")
+
+// 最初の子の前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+</pre>
+
+<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p>
+
+<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="spectable 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-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>挿入アルゴリズムのエラーを修正</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM4')}}</td>
+   <td>より詳細にアルゴリズムを記述</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>目立った変更はなし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>目立った変更はなし</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>導入</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Node.insertBefore")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild()")}}</li>
+ <li>{{domxref("Node.replaceChild()")}}</li>
+ <li>{{domxref("Node.appendChild()")}}</li>
+ <li>{{domxref("Node.hasChildNodes()")}}</li>
+ <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+ <li>{{domxref("ParentNode.prepend()")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html
deleted file mode 100644
index 018e6562cc..0000000000
--- a/files/ja/web/api/node/isdefaultnamespace/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Node.isDefaultNamespace
-slug: Web/API/Node/isDefaultNamespace
-tags:
-  - DOM
-  - Gecko DOM Reference
-  - Namespaces
-  - Node
-translation_of: Web/API/Node/isDefaultNamespace
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>)
-</pre>
-<ul>
- <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li>
- <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
-
-alert(el.isDefaultNamespace(XULNS)); // true</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
- <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
-</ul>
diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md
new file mode 100644
index 0000000000..018e6562cc
--- /dev/null
+++ b/files/ja/web/api/node/isdefaultnamespace/index.md
@@ -0,0 +1,35 @@
+---
+title: Node.isDefaultNamespace
+slug: Web/API/Node/isDefaultNamespace
+tags:
+  - DOM
+  - Gecko DOM Reference
+  - Namespaces
+  - Node
+translation_of: Web/API/Node/isDefaultNamespace
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>)
+</pre>
+<ul>
+ <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li>
+ <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li>
+</ul>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true</pre>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
+ <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+ <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
+</ul>
diff --git a/files/ja/web/api/node/isequalnode/index.html b/files/ja/web/api/node/isequalnode/index.html
deleted file mode 100644
index 3eced87fe0..0000000000
--- a/files/ja/web/api/node/isequalnode/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Node.isEqualNode
-slug: Web/API/Node/isEqualNode
-translation_of: Web/API/Node/isEqualNode
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode);
-</pre>
-
-<ul>
- <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div&gt;最初の要素です。&lt;/div&gt;
-&lt;div&gt;2番目の要素です。&lt;/div&gt;
-&lt;div&gt;最初の要素です。&lt;/div&gt;
-
-&lt;p id="output"&gt;&lt;/p&gt;</pre>
-
-<div class="hidden">
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}</pre>
-</div>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "&lt;br/&gt;";</pre>
-
-<h3 id="Results">Results</h3>
-
-<p>{{ EmbedLiveSample('Example', 480) }}</p>
-
-<p>
- </p><h2 id="仕様">仕様</h2>
-
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザー互換性">ブラウザー互換性</h2>
-
-
-
-<p>{{Compat("api.Node.isEqualNode")}}</p>
-
-<h2 id="参考">参考</h2>
-
-<ul>
- <li>{{domxref("Node.isSameNode()")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md
new file mode 100644
index 0000000000..3eced87fe0
--- /dev/null
+++ b/files/ja/web/api/node/isequalnode/index.md
@@ -0,0 +1,90 @@
+---
+title: Node.isEqualNode
+slug: Web/API/Node/isEqualNode
+translation_of: Web/API/Node/isEqualNode
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode);
+</pre>
+
+<ul>
+ <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div&gt;最初の要素です。&lt;/div&gt;
+&lt;div&gt;2番目の要素です。&lt;/div&gt;
+&lt;div&gt;最初の要素です。&lt;/div&gt;
+
+&lt;p id="output"&gt;&lt;/p&gt;</pre>
+
+<div class="hidden">
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}</pre>
+</div>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "&lt;br/&gt;";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "&lt;br/&gt;";</pre>
+
+<h3 id="Results">Results</h3>
+
+<p>{{ EmbedLiveSample('Example', 480) }}</p>
+
+<p>
+ </p><h2 id="仕様">仕様</h2>
+
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザー互換性">ブラウザー互換性</h2>
+
+
+
+<p>{{Compat("api.Node.isEqualNode")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li>{{domxref("Node.isSameNode()")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html
deleted file mode 100644
index f94668cfd5..0000000000
--- a/files/ja/web/api/node/issamenode/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Node.isSameNode
-slug: Web/API/Node/isSameNode
-tags:
-  - DOM
-  - Gecko DOM Reference
-  - Node
-translation_of: Web/API/Node/isSameNode
----
-<div>
- {{ApiRef}}{{Obsolete_header}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p>
-<div class="warning">
- <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br>
- <pre class="brush:js">// 当メソッド
-node1.isSameNode(node2)
-
-// 代替策
-node1 === node2
-node1 == node2
-
-</pre>
-</div>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>);
-</pre>
-<ul>
- <li><var>arg</var> : 比較ノード</li>
-</ul>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li>
- <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("Node.isEqualNode")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md
new file mode 100644
index 0000000000..f94668cfd5
--- /dev/null
+++ b/files/ja/web/api/node/issamenode/index.md
@@ -0,0 +1,39 @@
+---
+title: Node.isSameNode
+slug: Web/API/Node/isSameNode
+tags:
+  - DOM
+  - Gecko DOM Reference
+  - Node
+translation_of: Web/API/Node/isSameNode
+---
+<div>
+ {{ApiRef}}{{Obsolete_header}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p>
+<div class="warning">
+ <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br>
+ <pre class="brush:js">// 当メソッド
+node1.isSameNode(node2)
+
+// 代替策
+node1 === node2
+node1 == node2
+
+</pre>
+</div>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>);
+</pre>
+<ul>
+ <li><var>arg</var> : 比較ノード</li>
+</ul>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li>
+ <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li>
+</ul>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+ <li>{{domxref("Node.isEqualNode")}}</li>
+</ul>
diff --git a/files/ja/web/api/node/issupported/index.html b/files/ja/web/api/node/issupported/index.html
deleted file mode 100644
index 3b25dc254b..0000000000
--- a/files/ja/web/api/node/issupported/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Node.isSupported
-slug: Web/API/Node/isSupported
-tags:
-  - DOM
-  - DOM Element Methods
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Node/isSupported
----
-<div>
- {{ApiRef}}{{obsolete_header("22")}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">element.isSupported(feature, version)</pre>
-<dl>
- <dt>
-  <code>feature</code></dt>
- <dd>
-  テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd>
- <dt>
-  <code>version</code></dt>
- <dd>
-  テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd>
-</dl>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">&lt;div id="doc"&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
- // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-&lt;/script&gt;
-</pre>
-<h2 id="Specification" name="Specification">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li>
-</ul>
-<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2>
-<ul>
- <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li>
-</ul>
diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md
new file mode 100644
index 0000000000..3b25dc254b
--- /dev/null
+++ b/files/ja/web/api/node/issupported/index.md
@@ -0,0 +1,44 @@
+---
+title: Node.isSupported
+slug: Web/API/Node/isSupported
+tags:
+  - DOM
+  - DOM Element Methods
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Node/isSupported
+---
+<div>
+ {{ApiRef}}{{obsolete_header("22")}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox">element.isSupported(feature, version)</pre>
+<dl>
+ <dt>
+  <code>feature</code></dt>
+ <dd>
+  テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd>
+ <dt>
+  <code>version</code></dt>
+ <dd>
+  テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd>
+</dl>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">&lt;div id="doc"&gt;
+&lt;/div&gt;
+
+&lt;script&gt;
+ // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+&lt;/script&gt;
+</pre>
+<h2 id="Specification" name="Specification">仕様</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li>
+</ul>
+<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2>
+<ul>
+ <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li>
+</ul>
diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html
deleted file mode 100644
index 83026ac378..0000000000
--- a/files/ja/web/api/node/normalize/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Node.normalize
-slug: Web/API/Node/normalize
-tags:
-  - DOM
-  - Gecko
-  - Node
-translation_of: Web/API/Node/normalize
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>element</em>.normalize();
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js;highlight:10;">var wrapper = document.createElement("div");
-
-wrapper.appendChild( document.createTextNode("Part 1 ") );
-wrapper.appendChild( document.createTextNode("Part 2 ") );
-
-// wrapper.childNodes[0].textContent === "Part 1 "
-// wrapper.childNodes[1].textContent === "Part 2 "
-// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
-
-wrapper.normalize(); // 正規化
-
-// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
-// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
-</ul>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li>
-</ul>
diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md
new file mode 100644
index 0000000000..83026ac378
--- /dev/null
+++ b/files/ja/web/api/node/normalize/index.md
@@ -0,0 +1,48 @@
+---
+title: Node.normalize
+slug: Web/API/Node/normalize
+tags:
+  - DOM
+  - Gecko
+  - Node
+translation_of: Web/API/Node/normalize
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>element</em>.normalize();
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js;highlight:10;">var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
+
+wrapper.normalize(); // 正規化
+
+// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
+// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li>
+</ul>
diff --git a/files/ja/web/api/node/removechild/index.html b/files/ja/web/api/node/removechild/index.html
deleted file mode 100644
index ff64604414..0000000000
--- a/files/ja/web/api/node/removechild/index.html
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: Node.removeChild
-slug: Web/API/Node/removeChild
-tags:
-  - DOM
-  - Gecko
-  - Node
-translation_of: Web/API/Node/removeChild
----
-<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
-<strong>または</strong>
-<em>node</em>.removeChild(<em>child</em>);
-</pre>
-
-<ul>
- <li><code>child</code> は DOM から取り除く、子ノードです。</li>
- <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li>
- <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li>
-</ul>
-
-<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p>
-
-<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p>
-
-<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p>
-
-<p>このメソッドでは、2つの異なる方法で例外が発生します。</p>
-
-<ol>
- <li>
-  <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p>
-
-  <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
- </li>
- <li>
-  <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br>
-   <br>
-   <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
- </li>
-</ol>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: html">&lt;!-- 対象とする HTML のコード --&gt;
-&lt;div id="top" &gt; &lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
-
-&lt;/script&gt;
-
-&lt;!--Sample HTML code--&gt;
-&lt;div id="top"&gt;
- &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;script type="text/javascript"&gt;
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
-
-      var garbage = top.removeChild(nested); // This first call remove correctly the node
-
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
-
-&lt;/script&gt;
-
-</pre>
-
-<pre class="brush: html">&lt;!--Sample HTML code--&gt;
-
-&lt;div id="top"&gt;
-  &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush:js">// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-</pre>
-
-<pre class="brush:js">// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-</pre>
-
-<pre class="brush:js">// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
-</ul>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Node.removeChild")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.replaceChild")}}</li>
- <li>{{domxref("Node.parentNode")}}</li>
- <li>{{domxref("ChildNode.remove")}}</li>
-</ul>
-
-<div>{{APIRef("DOM")}}</div>
diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md
new file mode 100644
index 0000000000..ff64604414
--- /dev/null
+++ b/files/ja/web/api/node/removechild/index.md
@@ -0,0 +1,124 @@
+---
+title: Node.removeChild
+slug: Web/API/Node/removeChild
+tags:
+  - DOM
+  - Gecko
+  - Node
+translation_of: Web/API/Node/removeChild
+---
+<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
+<strong>または</strong>
+<em>node</em>.removeChild(<em>child</em>);
+</pre>
+
+<ul>
+ <li><code>child</code> は DOM から取り除く、子ノードです。</li>
+ <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li>
+ <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li>
+</ul>
+
+<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p>
+
+<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p>
+
+<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p>
+
+<p>このメソッドでは、2つの異なる方法で例外が発生します。</p>
+
+<ol>
+ <li>
+  <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p>
+
+  <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
+ </li>
+ <li>
+  <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br>
+   <br>
+   <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
+ </li>
+</ol>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: html">&lt;!-- 対象とする HTML のコード --&gt;
+&lt;div id="top" &gt; &lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+
+&lt;/script&gt;
+
+&lt;!--Sample HTML code--&gt;
+&lt;div id="top"&gt;
+ &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script type="text/javascript"&gt;
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested); // This first call remove correctly the node
+
+      // ......
+      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+
+&lt;/script&gt;
+
+</pre>
+
+<pre class="brush: html">&lt;!--Sample HTML code--&gt;
+
+&lt;div id="top"&gt;
+  &lt;div id="nested"&gt;&lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush:js">// 親ノードから指定した子要素を除去
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+</pre>
+
+<pre class="brush:js">// 親要素が不明、不定の場合の方法
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+</pre>
+
+<pre class="brush:js">// 要素の全ての子を除去
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>{{Compat("api.Node.removeChild")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.replaceChild")}}</li>
+ <li>{{domxref("Node.parentNode")}}</li>
+ <li>{{domxref("ChildNode.remove")}}</li>
+</ul>
+
+<div>{{APIRef("DOM")}}</div>
diff --git a/files/ja/web/api/node/replacechild/index.html b/files/ja/web/api/node/replacechild/index.html
deleted file mode 100644
index 2c69ea2114..0000000000
--- a/files/ja/web/api/node/replacechild/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: Node.replaceChild
-slug: Web/API/Node/replaceChild
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-translation_of: Web/API/Node/replaceChild
----
-<div>{{ApiRef("DOM")}}</div>
-
-<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>);
-</pre>
-
-<ul>
- <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li>
- <li><code>oldChild</code> : 置き換えられる既存ノード</li>
- <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js">// &lt;div&gt;
-//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
-// &lt;/div&gt;
-
-// ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
-
-// 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
-
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
-
-// 生成したテキストノードを先の空要素の子ノードとして配置
-sp1.appendChild(sp1_content);
-
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
-
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
-parentDiv.replaceChild(sp1, sp2);
-
-
-// 上記コード実行後のノードは以下の様になります:
-// &lt;div&gt;
-//   &lt;span id="newSpan"&gt;新しい span 要素&lt;/span&gt;
-// &lt;/div&gt;
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
-</ul>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.replaceChild")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md
new file mode 100644
index 0000000000..2c69ea2114
--- /dev/null
+++ b/files/ja/web/api/node/replacechild/index.md
@@ -0,0 +1,75 @@
+---
+title: Node.replaceChild
+slug: Web/API/Node/replaceChild
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+translation_of: Web/API/Node/replaceChild
+---
+<div>{{ApiRef("DOM")}}</div>
+
+<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>);
+</pre>
+
+<ul>
+ <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li>
+ <li><code>oldChild</code> : 置き換えられる既存ノード</li>
+ <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js">// &lt;div&gt;
+//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
+// &lt;/div&gt;
+
+// ID も属性も内容も持たない空要素を生成
+var sp1 = document.createElement("span");
+
+// 生成したノードに id 属性 'newSpan' を付与
+sp1.setAttribute("id", "newSpan");
+
+// テキストノードを生成
+var sp1_content = document.createTextNode("新しい span 要素");
+
+// 生成したテキストノードを先の空要素の子ノードとして配置
+sp1.appendChild(sp1_content);
+
+// 置換に先んじ、参照を代入
+var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
+var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+
+// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+parentDiv.replaceChild(sp1, sp2);
+
+
+// 上記コード実行後のノードは以下の様になります:
+// &lt;div&gt;
+//   &lt;span id="newSpan"&gt;新しい span 要素&lt;/span&gt;
+// &lt;/div&gt;
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
+</ul>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Node.replaceChild")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node.removeChild")}}</li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf


From 1649dce744ae7836e6de49971f365cc8e2bbd8f6 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 14:34:15 +0900
Subject: 2022/01/18 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/appendchild/index.md | 135 +++++++++++++----------------
 1 file changed, 60 insertions(+), 75 deletions(-)

diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md
index 3242491906..6abebeaac4 100644
--- a/files/ja/web/api/node/appendchild/index.md
+++ b/files/ja/web/api/node/appendchild/index.md
@@ -1,97 +1,82 @@
 ---
-title: Node.appendChild
+title: Node.appendChild()
 slug: Web/API/Node/appendChild
 tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.appendChild
 translation_of: Web/API/Node/appendChild
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p>
+**`appendChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。
 
-<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p>
+これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。
+{{domxref("Node.cloneNode()")}} メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。
+`cloneNode` で作成したコピーは自動的に同期されません。
 
-<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p>
+指定された子ノードが {{domxref("DocumentFragment")}} であった場合、その 
+{{domxref("DocumentFragment")}} の内容全体が指定された親ノードの子ノードリストに移動します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。
 
-<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre>
+`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。
 
-<h3 id="引数">引数</h3>
+```js
+let aBlock = document.createElement('block').appendChild( document.createElement('b') );
+```
 
-<h4 id="aChild">aChild</h4>
+`aBlock` に `<b></b>` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。
 
-<p>親ノードに追加する子ノード(要素)</p>
+## 構文
 
-<h3 id="戻り値">戻り値</h3>
+```js
+appendChild(aChild);
+```
 
-<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p>
+### 引数
 
-<h2 id="Notes" name="Notes">注意</h2>
+- `aChild`
+  - : 指定された親ノードに追加するノード（ふつうは要素）。
 
-<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p>
+### 返値
 
-<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre>
+{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。
+ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。
 
-<p><code>aBlock</code> に <code>&lt;b&gt;&lt;/b&gt;</code> を与えただけでは期待通りに動きません。</p>
+### 例外
 
-<h2 id="Example" name="Example">例</h2>
+- `HierarchyRequestError` {{domxref("DOMException")}}
+  - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
+    - `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
+    - `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。
+    - `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
+    - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
+    - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
+    - このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
+    -`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
 
-<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
+## 例
+
+```js
+// 新しい段落要素を作成し、文書の body の末尾に追加します。
+let p = document.createElement("p");
 document.body.appendChild(p);
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>{{SpecName("DOM3 Core")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>{{SpecName("DOM2 Core")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>{{SpecName("DOM1")}} から変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初期定義。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2>
-
-<p>{{Compat("api.Node.appendChild")}}</p>
-
-<div id="compat-mobile"></div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild()")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("Node.insertBefore()")}}</li>
- <li>{{domxref("Node.hasChildNodes()")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.removeChild()")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Node.hasChildNodes()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.append()")}}
-- 
cgit v1.2.3-54-g00ecf


From 478de33ac5a748d403c77bed813546f57e53c05e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 15:00:03 +0900
Subject: 2021/11/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/clonenode/index.md | 75 ++++++++++++++++----------------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md
index db00fc7a61..ff734aa6c0 100644
--- a/files/ja/web/api/node/clonenode/index.md
+++ b/files/ja/web/api/node/clonenode/index.md
@@ -1,62 +1,61 @@
 ---
 title: Node.cloneNode()
 slug: Web/API/Node/cloneNode
+tags:
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.cloneNode
 translation_of: Web/API/Node/cloneNode
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。
+引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。
 
-<p>現在のノードの複製を返します。</p>
+ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。
+>
+> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。
+>
+> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。
 
-<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>);
-</pre>
+**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。
 
-<dl>
- <dt><code>node</code></dt>
- <dd>複製するノード</dd>
- <dt><code>dupNode</code></dt>
- <dd>新しく生成される <code>node</code> の複製</dd>
- <dt><code>deep</code> {{optional_inline}}</dt>
- <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code>
- <div class="note">
- <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p>
+## 構文
 
- <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p>
- </div>
- </dd>
-</dl>
+```js
+cloneNode();
+cloneNode(deep);
+```
 
-<h2 id="Example" name="Example">例</h2>
+### 引数
 
-<pre class="brush:js">var p = document.getElementById("para1");
-var p_prime = p.cloneNode(true);
-</pre>
+- `deep` {{optional_inline}}
 
-<h2 id="Notes" name="Notes">注記</h2>
+  - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。
 
-<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p>
+    `false` の場合、このノードのみが複製されます。
+    サブツリーは、そのノードに含まれているテキストも含め、複製されません。
 
-<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p>
+    なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。
 
-<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p>
+### 返値
 
-<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p>
+複製された {{domxref("Node")}} を返します。
+複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。
 
-<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div>
+## 例
 
-<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p>
+```js
+let p = document.getElementById("para1")
+let p_prime = p.cloneNode(true)
+```
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+## 仕様書
 
-<p>{{Compat("api.Node.cloneNode")}}</p>
+{{Specifications}}
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+## ブラウザーの互換性
 
-<ul>
- <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li>
- <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li>
- <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li>
-</ul>
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 38a18236aca758a3c29963a8654ab7c5d84dd9ca Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 15:00:03 +0900
Subject: 2021/11/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/node/comparedocumentposition/index.md  | 173 ++++++++------------
 files/ja/web/api/node/contains/index.md            |  88 +++++------
 files/ja/web/api/node/isdefaultnamespace/index.md  |  96 +++++++----
 files/ja/web/api/node/isequalnode/index.md         | 116 +++++++-------
 files/ja/web/api/node/issupported/index.md         |  87 +++++-----
 files/ja/web/api/node/removechild/index.md         | 175 +++++++++++----------
 files/ja/web/api/node/replacechild/index.md        | 113 +++++++------
 7 files changed, 429 insertions(+), 419 deletions(-)

diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md
index 5865081c84..346dc65e73 100644
--- a/files/ja/web/api/node/comparedocumentposition/index.md
+++ b/files/ja/web/api/node/comparedocumentposition/index.md
@@ -1,118 +1,69 @@
 ---
-title: Node.compareDocumentPosition
+title: Node.compareDocumentPosition()
 slug: Web/API/Node/compareDocumentPosition
 tags:
-  - DOM
-  - DOM Element Methods
-  - Gecko
-  - Gecko DOM Reference
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.compareDocumentPosition
 translation_of: Web/API/Node/compareDocumentPosition
 ---
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> )
-</pre>
-
-<h3 id="パラメーター">パラメーター</h3>
-
-<dl>
- <dt><code>node</code></dt>
- <dd>比較元ノード</dd>
- <dt><code>otherNode</code></dt>
- <dd><em>node</em> と比較する別ノード</dd>
-</dl>
-
-<h3 id="返り値">返り値</h3>
-
-<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p>
-
-<h2 id="Notes" name="Notes">注記</h2>
-
-<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p>
-
-<table>
- <thead>
-  <tr>
-   <th scope="col">名称</th>
-   <th scope="col">値</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td>
-   <td>1</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_PRECEDING</code></td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_FOLLOWING</code></td>
-   <td>4</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINS</code></td>
-   <td>8</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td>
-   <td>16</td>
-  </tr>
-  <tr>
-   <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td>
-   <td>32</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js;highlight:[3]">var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) &amp; Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
+{{APIRef("DOM")}}
+
+**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。
+
+## 構文
+
+```js
+compareDocumentPosition(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。
+
+### 返値
+
+整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク](<https://ja.wikipedia.org/wiki/マスク_(情報工学)>)で表します。
+
+- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`)
+  - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。
+- `Node.DOCUMENT_POSITION_PRECEDING` (`2`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。
+- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。
+- `Node.DOCUMENT_POSITION_CONTAINS` (`8`)
+  - : `otherNode` はこのノードの祖先ノードです。
+- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`)
+  - : `otherNode` はこのノードの子孫ノードです。
+- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`)
+  - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。
+
+複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。
+
+## 例
+
+```js
+const head = document.head;
+const body = document.body;
+
+if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log('正しい形式の文書です');
 } else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+  console.error('<head> が <body> の前にありません');
 }
-</pre>
-
-<div class="note">
-<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&amp;</code>" を用いなくてはならない点に注意して下さい。</p>
-</div>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table>
- <thead>
-  <tr>
-   <th>仕様書</th>
-   <th>策定状況</th>
-   <th>コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td>
-   <td>Recommendation</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td>
-   <td>Living standard</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.contains")}}</li>
- <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li>
-</ul>
+```
+
+> **Note:** `compareDocumentPosition()` の返値はビットマスクですので、意味のある結果を得るには[ビット AND 演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND)を使用する必要があります。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef("Node.contains()")}}
diff --git a/files/ja/web/api/node/contains/index.md b/files/ja/web/api/node/contains/index.md
index 2947ce92d1..6bcb67f897 100644
--- a/files/ja/web/api/node/contains/index.md
+++ b/files/ja/web/api/node/contains/index.md
@@ -1,56 +1,56 @@
 ---
-title: Node.contains
+title: Node.contains()
 slug: Web/API/Node/contains
 tags:
-  - API
-  - DOM
-  - Method
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.contains
 translation_of: Web/API/Node/contains
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Node.contains</code></strong> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p>
+**`contains()`** は {{domxref("Node")}} インターフェイスのメソッドで、あるノードが指定されたノードの子孫であるか、すなわち、このノード自体であるか、直接の子ノード ({{domxref("Node.childNodes", "childNodes")}}) の何れかであるか、直接の子ノードの子ノードの何れかであるか（以下同様）を示す論理値を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** ノードは自分自身に**含まれます**。
 
-<pre class="syntaxbox">node.contains( otherNode )
-</pre>
+## 構文
 
-<h2 id="Example" name="Example">例</h2>
+```js
+contains(otherNode);
+```
 
-<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</code> の意図ではないため明示的に <code>false</code> を返します。</p>
+### 引数
 
-<pre class="brush:js">function isInPage(node) {
+- `otherNode`
+  - : 検査する {{domxref("Node")}} です。
+    > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。
+そうでなければ `false` になります。
+
+`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。
+
+## 例
+
+この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。
+
+```js
+function isInPage(node) {
   return (node === document.body) ? false : document.body.contains(node);
-}</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Node.contains")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.compareDocumentPosition")}}</li>
- <li>{{domxref("Node.hasChildNodes")}}</li>
-</ul>
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.compareDocumentPosition")}}
+- {{domxref("Node.hasChildNodes")}}
diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md
index 018e6562cc..44f1b3acec 100644
--- a/files/ja/web/api/node/isdefaultnamespace/index.md
+++ b/files/ja/web/api/node/isdefaultnamespace/index.md
@@ -1,35 +1,71 @@
 ---
-title: Node.isDefaultNamespace
+title: Node.isDefaultNamespace()
 slug: Web/API/Node/isDefaultNamespace
 tags:
-  - DOM
-  - Gecko DOM Reference
-  - Namespaces
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.isDefaultNamespace
 translation_of: Web/API/Node/isDefaultNamespace
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>)
-</pre>
-<ul>
- <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li>
- <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
-
-alert(el.isDefaultNamespace(XULNS)); // true</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li>
- <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`isDefaultNamespace()`** は {{domxref("Node")}} インターフェイスのメソッドで、名前空間 URI を引数として受け取ります。
+その名前空間がこのノードの既定の名前空間である場合は `true` を返し、そうでない場合は `false` を返します。
+
+> **Note:** 既定の名前空間は、 HTML 要素では常に `""` です。 SVG 要素では、 `xmlns` 属性で設定されます。
+
+## 構文
+
+```js
+isDefaultNamespace(namespaceURI);
+```
+
+### 引数
+
+- `namespaceURI`
+  - : 要素の検査対象となる名前空間を表す文字列です。
+    > **Note:** `namespaceURI` は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+`true` または `false` の値を持つ論理値で、引数が既定の名前空間であるかどうかを示します。
+
+## 例
+
+```html
+"" が &lt;output&gt; の既定の名前空間であるか: <output>未検査</output><br/>
+"http://www.w3.org/2000/svg" が &lt;output&gt; の既定の名前空間であるか: <output>未検査</output><br/>
+"" が &lt;svg&gt; の既定の名前空間であるか: <output>未検査</output><br/>
+"http://www.w3.org/2000/svg" が &lt;svg&gt; の既定の名前空間であるか: <output>未検査</output><br/>
+<svg xmlns="http://www.w3.org/2000/svg" height="1"></svg>
+<button>結果を見るにはクリック</button>
+```
+
+```js
+const button = document.getElementsByTagName('button')[0];
+button.addEventListener("click", function () {
+  const aHtmlElt = document.getElementsByTagName('output')[0];
+  const aSvgElt = document.getElementsByTagName('svg')[0];
+
+  const result = document.getElementsByTagName('output');
+  result[0].value = aHtmlElt.isDefaultNamespace(""); // true
+  result[1].value = aHtmlElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false
+  result[2].value = aSvgElt.isDefaultNamespace(""); // true
+  result[3].value = aSvgElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false
+});
+```
+
+{{ EmbedLiveSample('Example','100%',130) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.lookupNamespaceURI")}}
+- {{domxref("Node.lookupPrefix")}}
diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md
index 3eced87fe0..b4c71cc44a 100644
--- a/files/ja/web/api/node/isequalnode/index.md
+++ b/files/ja/web/api/node/isequalnode/index.md
@@ -1,90 +1,82 @@
 ---
-title: Node.isEqualNode
+title: Node.isEqualNode()
 slug: Web/API/Node/isEqualNode
+tags:
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.isEqualNode
 translation_of: Web/API/Node/isEqualNode
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。
+2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。
 
-<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+isEqualNode(otherNode);
+```
 
-<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode);
-</pre>
+### 引数
 
-<ul>
- <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li>
-</ul>
+- `otherNode`
+  - : 比較対象となる {{domxref("Node")}} です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
 
-<h2 id="Example" name="Example">例</h2>
+### 返値
 
-<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p>
+論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。
+`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。
 
-<h3 id="HTML">HTML</h3>
+## 例
 
-<pre class="brush: html">&lt;div&gt;最初の要素です。&lt;/div&gt;
-&lt;div&gt;2番目の要素です。&lt;/div&gt;
-&lt;div&gt;最初の要素です。&lt;/div&gt;
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
 
-&lt;p id="output"&gt;&lt;/p&gt;</pre>
+### HTML
 
-<div class="hidden">
-<h3 id="CSS">CSS</h3>
+```html
+<div>最初の要素です。</div>
+<div>2 番目の要素です。</div>
+<div>最初の要素です。</div>
 
-<pre class="brush: css">#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}</pre>
-</div>
+<p id="output"></p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+```css hidden
+#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}
+```
 
-<pre class="brush: js">let output = document.getElementById("output");
-let divList  = document.getElementsByTagName("div");
-
-output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "&lt;br/&gt;";
-output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "&lt;br/&gt;";</pre>
+### JavaScript
 
-<h3 id="Results">Results</h3>
-
-<p>{{ EmbedLiveSample('Example', 480) }}</p>
+```js
+let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
 
-<p>
- </p><h2 id="仕様">仕様</h2>
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";
+```
 
+### 結果
 
-<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-isequalnode', 'Node.isEqualNode')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{ EmbedLiveSample('Example', "100%", "210") }}
 
-<h2 id="ブラウザー互換性">ブラウザー互換性</h2>
+## 仕様書
 
+{{Specifications}}
 
+## ブラウザーの互換性
 
-<p>{{Compat("api.Node.isEqualNode")}}</p>
+{{Compat}}
 
-<h2 id="参考">参考</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("Node.isSameNode()")}}</li>
-</ul>
+- {{domxref("Node.isSameNode()")}}
diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md
index 3b25dc254b..db0b3935ee 100644
--- a/files/ja/web/api/node/issupported/index.md
+++ b/files/ja/web/api/node/issupported/index.md
@@ -1,44 +1,53 @@
 ---
-title: Node.isSupported
+title: Node.isSupported()
 slug: Web/API/Node/isSupported
 tags:
-  - DOM
-  - DOM Element Methods
-  - Gecko
-  - Gecko DOM Reference
+  - メソッド
+  - 非推奨
+  - リファレンス
+browser-compat: api.Node.isSupported
 translation_of: Web/API/Node/isSupported
 ---
-<div>
- {{ApiRef}}{{obsolete_header("22")}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox">element.isSupported(feature, version)</pre>
-<dl>
- <dt>
-  <code>feature</code></dt>
- <dd>
-  テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd>
- <dt>
-  <code>version</code></dt>
- <dd>
-  テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd>
-</dl>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">&lt;div id="doc"&gt;
-&lt;/div&gt;
-
-&lt;script&gt;
- // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
- var main = document.getElementById('doc');
- var output = main.isSupported('HTML', '2.0');
-&lt;/script&gt;
-</pre>
-<h2 id="Specification" name="Specification">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li>
-</ul>
-<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2>
-<ul>
- <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li>
-</ul>
+{{APIRef("DOM")}}{{deprecated_header}}
+
+**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。
+
+## 構文
+
+```js
+isSupported(feature, version);
+```
+
+### 引数
+
+- `feature`
+  - : 文字列で、検査する機能の名前を指定します。
+    これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。
+- `version`
+  - : 文字列で、検査する機能のバージョン番号を指定します。
+    DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。
+
+## 例
+
+```html
+<div id="doc">
+</div>
+
+<script>
+ // 要素を取得して DOM2 HTML Module に対応しているかどうかを検査します。
+ const main = document.getElementById('doc');
+ const output = main.isSupported('HTML', '2.0');
+</script>
+```
+
+## 仕様書
+
+この機能は仕様書に含まれていません。標準化路線から外れました。
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.isEqualNode()")}}
diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md
index ff64604414..335eea5b85 100644
--- a/files/ja/web/api/node/removechild/index.md
+++ b/files/ja/web/api/node/removechild/index.md
@@ -1,124 +1,125 @@
 ---
-title: Node.removeChild
+title: Node.removeChild()
 slug: Web/API/Node/removeChild
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.removeChild
 translation_of: Web/API/Node/removeChild
 ---
-<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p>
+{{APIRef("DOM")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。
 
-<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>);
-<strong>または</strong>
-<em>node</em>.removeChild(<em>child</em>);
-</pre>
+> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。
+> 後のコードで再利用することができます。
+>
+> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。
 
-<ul>
- <li><code>child</code> は DOM から取り除く、子ノードです。</li>
- <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li>
- <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li>
-</ul>
+{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。
 
-<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p>
+## 構文
 
-<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p>
+```js
+removeChild(child);
+```
 
-<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p>
+### 引数
 
-<p>このメソッドでは、2つの異なる方法で例外が発生します。</p>
+- `child`
+  - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。
 
-<ol>
- <li>
-  <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p>
+### 例外
 
-  <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p>
- </li>
- <li>
-  <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br>
-   <br>
-   <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p>
- </li>
-</ol>
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `child` がこのノードの子ではない場合に発生します。
+- {{jsxref("TypeError")}}
+  - : `child` が `null` であった場合に発生します。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<pre class="brush: html">&lt;!-- 対象とする HTML のコード --&gt;
-&lt;div id="top" &gt; &lt;/div&gt;
+### 単純な例
 
-&lt;script type="text/javascript"&gt;
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+この HTML を使います。
 
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+```html
+<div id="top">
+  <div id="nested"></div>
+</div>
+```
 
-&lt;/script&gt;
+親ノードが分かる場合に、指定された要素を取り除きます。
 
-&lt;!--Sample HTML code--&gt;
-&lt;div id="top"&gt;
- &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;
+```js
+let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+```
 
-&lt;script type="text/javascript"&gt;
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+親ノードが分からないときに指定された要素を取り除きます。
 
-      var garbage = top.removeChild(nested); // This first call remove correctly the node
+```js
+let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+```
 
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+ある要素からすべての子を削除します。
 
-&lt;/script&gt;
+```js
+let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+```
 
-</pre>
+### TypeError が発生する例
 
-<pre class="brush: html">&lt;!--Sample HTML code--&gt;
+```html
+<!--HTML コードの例-->
+<div id="top"> </div>
+```
 
-&lt;div id="top"&gt;
-  &lt;div id="nested"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```js
+let top = document.getElementById("top");
+let nested = document.getElementById("nested");
 
-<pre class="brush:js">// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-</pre>
+// TypeError が発生
+let garbage = top.removeChild(nested);
+```
 
-<pre class="brush:js">// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-</pre>
+### NotFoundError が発生する例
 
-<pre class="brush:js">// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-</pre>
+```html
+<!--HTML コードの例-->
+<div id="top">
+  <div id="nested"></div>
+</div>
+```
+
+```js
+let top = document.getElementById("top");
+let nested = document.getElementById("nested");
+
+// 最初の呼び出しでは正しくノードを取り除く
+let garbage = top.removeChild(nested);
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+// NotFoundError が発生
+garbage = top.removeChild(nested);
+```
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li>
-</ul>
+## 仕様書
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+{{Specifications}}
 
-<p>{{Compat("api.Node.removeChild")}}</p>
+## ブラウザーの互換性
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+{{Compat}}
 
-<ul>
- <li>{{domxref("Node.replaceChild")}}</li>
- <li>{{domxref("Node.parentNode")}}</li>
- <li>{{domxref("ChildNode.remove")}}</li>
-</ul>
+## 関連情報
 
-<div>{{APIRef("DOM")}}</div>
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.parentNode")}}
+- {{domxref("Element.remove()")}}
+- {{domxref("Node.cloneNode()")}}
diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md
index 2c69ea2114..da96d01cf6 100644
--- a/files/ja/web/api/node/replacechild/index.md
+++ b/files/ja/web/api/node/replacechild/index.md
@@ -2,74 +2,95 @@
 title: Node.replaceChild
 slug: Web/API/Node/replaceChild
 tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.replaceChild
 translation_of: Web/API/Node/replaceChild
 ---
-<div>{{ApiRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p>
+**`replaceChild()`** は {{domxref("Node")}} 要素のメソッドで、この（親）ノードの中の子ノードを置き換えます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。
 
-<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>);
-</pre>
+## 構文
 
-<ul>
- <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li>
- <li><code>oldChild</code> : 置き換えられる既存ノード</li>
- <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li>
-</ul>
+```js
+replaceChild(newChild, oldChild);
+```
 
-<h2 id="Example" name="Example">例</h2>
+### 引数
 
-<pre class="brush:js">// &lt;div&gt;
-//  &lt;span id="childSpan"&gt;foo bar&lt;/span&gt;
-// &lt;/div&gt;
+- `newChild`
+  - : `oldChild` を置き換える新しいノードです。
+    > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
+- `oldChild`
+  - : 置き換えられる子ノードです。
+
+> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
+[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
+
+### 返値
+
+置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。
+
+### 例外
+
+- `HierarchyRequestError` {{domxref("DOMException")}}
+  - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
+    - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
+    - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。
+    - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
+    - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
+    - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
+    - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `oldChild` の親ノードが現在のノードではない場合に発生します。
+
+## 例
+
+```js
+// 前提:
+// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
 
 // ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
+const sp1 = document.createElement("span");
 
 // 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
+sp1.id = "newSpan";
 
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
+// 新しい要素にいくらかの内容を作成
+const sp1_content = document.createTextNode("新しい置換 span 要素");
 
-// 生成したテキストノードを先の空要素の子ノードとして配置
+// その内容を新しい要素に適用
 sp1.appendChild(sp1_content);
 
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+// 置き換えられる既存のノードの参照を作る
+const sp2 = document.getElementById("childSpan");
+const parentDiv = sp2.parentNode;
 
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+// 既存のノード sp2 を新しい span 要素 sp1 で置換
 parentDiv.replaceChild(sp1, sp2);
 
+// 結果:
+// <div>
+//   <span id="newSpan">新しい置換 span 要素</span>
+// </div>
+```
 
-// 上記コード実行後のノードは以下の様になります:
-// &lt;div&gt;
-//   &lt;span id="newSpan"&gt;新しい span 要素&lt;/span&gt;
-// &lt;/div&gt;
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
+## 仕様書
 
-<ul>
- <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li>
- <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li>
-</ul>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Node.replaceChild")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("Node.removeChild")}}</li>
-</ul>
+- {{domxref("Node.removeChild")}}
+- {{domxref("Element.replaceWith")}}
-- 
cgit v1.2.3-54-g00ecf


From a3335b2232582afc0a98d893b7e9f4987e968583 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 16:24:00 +0900
Subject: 2022/02/01 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/haschildnodes/index.md |  70 +++++----
 files/ja/web/api/node/insertbefore/index.md  | 209 +++++++++++----------------
 2 files changed, 130 insertions(+), 149 deletions(-)

diff --git a/files/ja/web/api/node/haschildnodes/index.md b/files/ja/web/api/node/haschildnodes/index.md
index b4ed1654d3..85717cb827 100644
--- a/files/ja/web/api/node/haschildnodes/index.md
+++ b/files/ja/web/api/node/haschildnodes/index.md
@@ -1,31 +1,49 @@
 ---
-title: Node.hasChildNodes
+title: Node.hasChildNodes()
 slug: Web/API/Node/hasChildNodes
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - メソッド
+
+  - リファレンス
+browser-compat: api.Node.hasChildNodes
 translation_of: Web/API/Node/hasChildNodes
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre>
-<h2 id="Example" name="Example">例</h2>
-<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p>
-<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo");
-
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
-}</pre>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("Node.childNodes")}}</li>
- <li>{{domxref("Node.hasAttributes")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`hasChildNodes()`** は {{domxref("Node")}} インターフェイスのメソッドで、この {{domxref("Node")}} に[子ノード](/ja/docs/Web/API/Node/childNodes)があるかどうかを示す論理値を返します。
+
+## 構文
+
+```js
+hasChildNodes();
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+論理値で、このノードに子ノードがあれば `true` を、そうでなければ `false` を返します。
+
+## 例
+
+```js
+let foo = document.getElementById('foo');
+
+if (foo.hasChildNodes()) {
+  // 'foo.childNodes' で何かを行う
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.childNodes")}}
diff --git a/files/ja/web/api/node/insertbefore/index.md b/files/ja/web/api/node/insertbefore/index.md
index 2bfea72cdf..36ae9e86ba 100644
--- a/files/ja/web/api/node/insertbefore/index.md
+++ b/files/ja/web/api/node/insertbefore/index.md
@@ -2,62 +2,57 @@
 title: Node.insertBefore()
 slug: Web/API/Node/insertBefore
 tags:
-  - API
-  - DOM
-  - Element
-  - Method
-  - Node
-  - Reference
   - メソッド
+  - リファレンス
+browser-compat: api.Node.insertBefore
 translation_of: Web/API/Node/insertBefore
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p>
+**`insertBefore()`** は {{domxref("Node")}} インターフェイスのメソッドで、*参照先ノード*の前にこの*親ノード*の子としてノードを挿入します。
 
-<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p>
+指定されたノードが既に文書中に存在した場合、  `insertBefore()` はこれを現在の位置から新しい位置に移動します。（つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。）
 
-<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p>
+これは、 1 つのノードが文書中に同時に 2 か所に存在できないことを意味します。
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p>
-</div>
+> **Note:** {{domxref("Node.cloneNode()")}} を使用すると、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 `cloneNode()` で作成された複製は自動的には同期されません。
 
-<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p>
+指定された子が {{domxref("DocumentFragment")}} である場合、 `DocumentFragment` の内容全体が指定された親ノードの子リストに移動されます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>)
-</pre>
+```js
+insertBefore(newNode, referenceNode);
+```
 
-<dl>
- <dt><code><var>insertedNode</var></code></dt>
- <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd>
- <dt><code><var>parentNode</var></code></dt>
- <dd>新しく挿入されるノードの親です。</dd>
- <dt><code><var>newNode</var></code></dt>
- <dd>挿入されるノードです。</dd>
- <dt><code><var>referenceNode</var></code></dt>
- <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd>
-</dl>
+### 引数
 
-<div class="note">
-<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p>
-</div>
+- `newNode`
+  - : 挿入するノードです。
+- `referenceNode`
+  - : `newNode` が挿入される位置の前にあるノードです。このノードが `null` である場合は、 `newNode` はこのノードの子ノードの末尾に挿入されます。
+    > **Note:** `referenceNode` は省略可能な引数では**ありません**。
+    > 明示的に {{domxref("Node")}} または `null` を渡す必要があります。
+    > 渡さなかった場合や無効な値を渡した場合の[動作](https://code.google.com/p/chromium/issues/detail?id=419780)は、ブラウザーのバージョンによって[異なる](https://bugzilla.mozilla.org/show_bug.cgi?id=119489)可能性があります。
+
+## 返値
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+追加された子ノードを返します（ただし `newNode` が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} を返します）。
 
-<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p>
+### 例外
 
-<h2 id="Example" name="Example">例</h2>
+挿入前の検証
 
-<h3 id="Example_1" name="Example_1">例 1</h3>
+## 例
 
-<pre class="brush: html">&lt;div id="parentElement"&gt;
-   &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
+### 例 1
+
+```html
+<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
 
-&lt;script&gt;
+<script>
 // 挿入する新しいノードを作成する
 let newNode = document.createElement("span")
 
@@ -78,17 +73,18 @@ parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
 let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
 parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
 // テストケース [ 3 ] 終了
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Example_2" name="Example_2">例 2</h3>
+### 例 2
 
-<pre class="brush:html">&lt;div id="parentElement"&gt;
-  &lt;span id="childElement"&gt;foo bar&lt;/span&gt;
-&lt;/div&gt;
+```html
+<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
 
-&lt;script&gt;
-// 新しい只の &lt;span&gt; 要素を作成
+<script>
+// 新しい只の <span> 要素を作成
 let sp1 = document.createElement("span")
 
 // 参照要素を取得
@@ -98,89 +94,56 @@ let parentDiv = sp2.parentNode
 
 // 新しい要素を sp2 の手前に挿入
 parentDiv.insertBefore(sp1, sp2)
-&lt;/script&gt;
-</pre>
+</script>
+```
+
+> **Note:** `insertAfter()` メソッドはありません。
+> これは `insertBefore` メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。
+>
+> 前の例では、 `sp1` は以下のようにして `sp2` の後に挿入することができます。
+>
+> ```js
+> parentDiv.insertBefore(sp1, sp2.nextSibling)
+> ```
+>
+> `sp2` に次の兄弟ノードがない場合、これが最後の子ノードです。 — `sp2.nextSibling` は `null` を返し、 `sp1` は子ノードリストの末尾（`sp2` の直後）に挿入されます。
+
+### 例 3
+
+要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。
+
+```js
+// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親ノードの最初の子ノードを取得
+let theFirstChild = parentElement.firstChild
 
-<div class="blockIndicator note">
-<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p>
-</div>
+// 新しい要素を取得
+let newElement = document.createElement("div")
 
-<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p>
+// 最初の子ノードの前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+```
 
-<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre>
+要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。
 
-<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p>
+親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。
 
-<h3 id="Example_3" name="Example_3">例 3</h3>
+## 仕様書
 
-<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p>
+{{Specifications}}
 
-<pre class="brush:js">// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
+## ブラウザーの互換性
 
-// 新しい要素を取得
-let newElement = document.createElement("div")
+{{Compat}}
 
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-</pre>
-
-<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p>
-
-<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="spectable 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-insertbefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>挿入アルゴリズムのエラーを修正</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM4')}}</td>
-   <td>より詳細にアルゴリズムを記述</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>目立った変更はなし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>目立った変更はなし</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>導入</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Node.insertBefore")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Node.removeChild()")}}</li>
- <li>{{domxref("Node.replaceChild()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("Node.hasChildNodes()")}}</li>
- <li>{{domxref("Element.insertAdjacentElement()")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
-</ul>
+## 関連情報
+
+- {{domxref("Node.removeChild()")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.hasChildNodes()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.prepend()")}}
+- {{domxref("Element.before()")}}
+- {{domxref("Element.after()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd4c3fd91ffcfdfbbe292e9c8fe826ae76cdbfed Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 17:17:47 +0900
Subject: 2022/02/09 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/issamenode/index.md | 112 +++++++++++++++++++++---------
 1 file changed, 78 insertions(+), 34 deletions(-)

diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md
index f94668cfd5..ffd47f8bf3 100644
--- a/files/ja/web/api/node/issamenode/index.md
+++ b/files/ja/web/api/node/issamenode/index.md
@@ -1,39 +1,83 @@
 ---
-title: Node.isSameNode
+title: Node.isSameNode()
 slug: Web/API/Node/isSameNode
 tags:
-  - DOM
-  - Gecko DOM Reference
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.isSameNode
 translation_of: Web/API/Node/isSameNode
 ---
-<div>
- {{ApiRef}}{{Obsolete_header}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p>
-<div class="warning">
- <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br>
- <pre class="brush:js">// 当メソッド
-node1.isSameNode(node2)
-
-// 代替策
-node1 === node2
-node1 == node2
-
-</pre>
-</div>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>);
-</pre>
-<ul>
- <li><var>arg</var> : 比較ノード</li>
-</ul>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li>
- <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("Node.isEqualNode")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`isSameNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 [`===` 厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)の古い別名です。
+すなわち、 2 つのノードが全く同じであるかどうか（言い換えれば、同じオブジェクトを指しているかどうか）を検査します。
+
+> **Note:** `isSameNode()` を使用する必要はありません。 `===` 厳密等価演算子を使用してください。
+
+## 構文
+
+```js
+isSameNode(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : 検査対象となる {{domxref("Node")}} です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、両ノードが厳密に等しい場合は `true`、そうでなければ `false` です。
+
+## 例
+
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isSameNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
+
+### HTML
+
+```html
+<div>最初の要素です。</div>
+<div>2 番目の要素です。</div>
+<div>最初の要素です。</div>
+
+<p id="output"></p>
+```
+
+```css hidden
+#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}
+```
+
+### JavaScript
+
+```js
+let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isSameNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isSameNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isSameNode(divList[2]) + "<br/>";
+```
+
+### 結果
+
+{{ EmbedLiveSample('Example', "100%", "205") }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.isEqualNode()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd0a249a5aca733d09f33a10b32e20e435a99da9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 27 Feb 2022 17:35:44 +0900
Subject: 2022/01/23 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/normalize/index.md | 79 +++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md
index 83026ac378..7432a8f979 100644
--- a/files/ja/web/api/node/normalize/index.md
+++ b/files/ja/web/api/node/normalize/index.md
@@ -1,48 +1,73 @@
 ---
-title: Node.normalize
+title: Node.normalize()
 slug: Web/API/Node/normalize
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.normalize
 translation_of: Web/API/Node/normalize
 ---
-<div>{{ApiRef}}</div>
+{{APIRef("DOM")}}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`normalize()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定されたノードとその下のツリーを*正規化された*形にします。
+正規化されたサブツリーでは、サブツリー内に空のテキストノードがなくなり、隣り合うテキストノードがなくなります。
 
-<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+normalize();
+```
 
-<pre class="syntaxbox"><em>element</em>.normalize();
-</pre>
+### 引数
 
-<h2 id="Example" name="Example">例</h2>
+なし。
 
-<pre class="brush:js;highlight:10;">var wrapper = document.createElement("div");
+### 返値
+
+なし。
+
+## 例
+
+```html
+<output id="result"></output>
+```
+
+```js
+let wrapper = document.createElement("div");
 
 wrapper.appendChild( document.createTextNode("Part 1 ") );
 wrapper.appendChild( document.createTextNode("Part 2 ") );
 
-// wrapper.childNodes[0].textContent === "Part 1 "
-// wrapper.childNodes[1].textContent === "Part 2 "
-// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
+let node = wrapper.firstChild;
+let result = "正規化前:<br/>";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "<br/>";
+  node = node.nextSibling;
+}
+
+wrapper.normalize();
+
+node = wrapper.firstChild;
+result += "<br/><br/>正規化後:<br/>";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "<br/>";
+  node = node.nextSibling;
+}
+
+const output = document.getElementById("result");
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", "170")}}
 
-wrapper.normalize(); // 正規化
+## 仕様書
 
-// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
-// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
-</pre>
+{{Specifications}}
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+## ブラウザーの互換性
 
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li>
-</ul>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li>
-</ul>
+- 逆の操作である {{domxref("Text.splitText()")}}
-- 
cgit v1.2.3-54-g00ecf


From 0e16fb2efa27c368c2b92b40773982ce3a335aff Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 28 Feb 2022 02:22:47 +0900
Subject: 2021/11/08 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/lookupprefix/index.md | 77 +++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 files/ja/web/api/node/lookupprefix/index.md

diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md
new file mode 100644
index 0000000000..30dcc549ac
--- /dev/null
+++ b/files/ja/web/api/node/lookupprefix/index.md
@@ -0,0 +1,77 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+tags:
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.lookupPrefix
+translation_of: Web/API/Node/lookupPrefix
+---
+{{APIRef("DOM")}}
+
+**`lookupPrefix()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された名前空間 URI に対応する接頭辞があれば、それを含む文字列を返します。ない場合は `null` を返します。
+複数の接頭辞の可能性があれば、最初の接頭辞を返します。
+
+## 構文
+
+```js
+lookupPrefix(namespace);
+```
+
+### 引数
+
+- `namespace`
+  - : 接頭辞を検索するための名前空間の入った文字列です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+対応する接頭辞の入った文字列です。見つからなかった場合は `null` になります。
+`namespace` が null または空文字列であった場合、 `lookupPrefix()` は `null` を返します。
+
+このノードが {{domxref("DocumentType")}} または {{domxref("DocumentFragment")}} であった場合は、　`lookupPrefix()` は常に `null` を返します。
+
+## 例
+
+```html
+Prefix for <code>http://www.w3.org/2000/svg</code> on &lt;output&gt;: <output>未検査</output><br/>
+Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on &lt;output&gt;: <output>未検査</output><br/>
+Prefix for <code>http://www.w3.org/TR/html4/</code> on &lt;output&gt;: <output>未検査</output><br/>
+Prefix for <code>https://www.w3.org/1999/xlink</code> on &lt;output&gt;: <output>未検査</output><br/>
+Prefix for <code>http://www.w3.org/2000/svg</code> on &lt;svg&gt;: <output>未検査</output><br/>
+Prefix for <code>https://www.w3.org/1999/xlink</code> on &lt;svg&gt;: <output>未検査</output><br/>
+Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on &lt;svg&gt;: <output>未検査</output><br/>
+<svg xmlns:t="http://www.w3.org/2000/svg" height="1"></svg>
+<button>結果を確認するにはクリック</button>
+```
+
+```js
+const button = document.getElementsByTagName('button')[0];
+button.addEventListener("click", function () {
+  const aHtmlElt = document.getElementsByTagName('output')[0];
+  const aSvgElt = document.getElementsByTagName('svg')[0];
+
+  const result = document.getElementsByTagName('output');
+  result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[1].value = aHtmlElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+  result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true
+  result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false
+  result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true
+  result[6].value = aSvgElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+});
+```
+
+{{ EmbedLiveSample('Example','100%',190) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix)
-- 
cgit v1.2.3-54-g00ecf


From 003c7bc1a3cf88b8aac03753d693703b720d16a0 Mon Sep 17 00:00:00 2001
From: Julien Wilhelm <49813904+AwebsomeFr@users.noreply.github.com>
Date: Sun, 6 Mar 2022 11:06:39 +0100
Subject: Update index.md (#4444)

Spell checking.
---
 files/fr/web/api/url/searchparams/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md
index 66cc2a85bf..64f622e47f 100644
--- a/files/fr/web/api/url/searchparams/index.md
+++ b/files/fr/web/api/url/searchparams/index.md
@@ -10,7 +10,7 @@ tags:
   - URLSearchParameters
 translation_of: Web/API/URL/searchParams
 ---
-{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourneun objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodésde la requête GET contenu dans l'URL.
+{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL.
 
 {{AvailableInWorkers}}
 
-- 
cgit v1.2.3-54-g00ecf


From 624700b023db2c112fcfcdbc1b7428e475692a41 Mon Sep 17 00:00:00 2001
From: Stéphane Wirtel <stephane@wirtel.be>
Date: Sun, 6 Mar 2022 11:07:10 +0100
Subject: Correct sentence structure (#4418)

---
 files/fr/web/accessibility/aria/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md
index 24b46f7564..3ca0044907 100644
--- a/files/fr/web/accessibility/aria/index.md
+++ b/files/fr/web/accessibility/aria/index.md
@@ -9,7 +9,7 @@ tags:
 translation_of: Web/Accessibility/ARIA
 original_slug: Accessibilité/ARIA
 ---
-_Accessible Rich Internet Applications_ **(ARIA)** (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.
+_Accessible Rich Internet Applications_ **(ARIA)** (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble d'attributs qui définissent comment rendre le contenu et les applications web accessibles.
 
 ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les _widgets_ JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.
 
-- 
cgit v1.2.3-54-g00ecf


From 4fe7aa576ab88f16958f38016e5587df6946171a Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Sun, 6 Mar 2022 16:30:06 +0100
Subject: MD037/38/39 fixes for remaining fr web files (#4403)

---
 files/fr/web/mathml/authoring/index.md                            | 2 +-
 files/fr/web/mathml/element/maction/index.md                      | 2 +-
 files/fr/web/mathml/element/math/index.md                         | 2 +-
 files/fr/web/mathml/element/mfenced/index.md                      | 2 +-
 files/fr/web/mathml/element/msub/index.md                         | 2 +-
 files/fr/web/performance/index.md                                 | 2 +-
 files/fr/web/progressive_web_apps/loading/index.md                | 2 +-
 .../fr/web/progressive_web_apps/offline_service_workers/index.md  | 2 +-
 .../re-engageable_notifications_push/index.md                     | 2 +-
 files/fr/web/security/same-origin_policy/index.md                 | 6 +++---
 files/fr/web/security/secure_contexts/index.md                    | 2 +-
 files/fr/web/svg/applying_svg_effects_to_html_content/index.md    | 2 +-
 files/fr/web/svg/attribute/seed/index.md                          | 2 +-
 files/fr/web/svg/attribute/stroke-dasharray/index.md              | 2 +-
 files/fr/web/svg/compatibility_sources/index.md                   | 2 +-
 files/fr/web/svg/element/altglyphitem/index.md                    | 2 +-
 files/fr/web/svg/element/ellipse/index.md                         | 8 ++++----
 files/fr/web/svg/element/line/index.md                            | 2 +-
 files/fr/web/svg/element/radialgradient/index.md                  | 4 +++-
 files/fr/web/svg/element/symbol/index.md                          | 2 +-
 files/fr/web/svg/element/use/index.md                             | 2 +-
 files/fr/web/svg/index.md                                         | 6 +++---
 files/fr/web/svg/tutorial/other_content_in_svg/index.md           | 2 +-
 files/fr/web/xpath/index.md                                       | 2 +-
 files/fr/web/xslt/element/stylesheet/index.md                     | 2 +-
 25 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/files/fr/web/mathml/authoring/index.md b/files/fr/web/mathml/authoring/index.md
index ad4463cea3..260d44bc3c 100644
--- a/files/fr/web/mathml/authoring/index.md
+++ b/files/fr/web/mathml/authoring/index.md
@@ -312,7 +312,7 @@ Si votre document LaTeX est volumineux, vous pouvez vouloir le diviser en plusie
 
 ### Boîte de saisie
 
-[TeXZilla](https://github.com/fred-wang/TeXZilla) possède plusieurs interfaces, notamment une [fiche CKEditor](https://ckeditor.com/addon/texzilla) utilisé sur MDN, une [démo en ligne](https://fred-wang.github.io/TeXZilla/), un [module de Firefox](https://addons.mozilla.org/en-US/firefox/addon/texzilla/) ou encore une [application web FirefoxOS](https://marketplace.firefox.com/app/texzilla-1/). Il est également intégré à [SeaMonkey](https://www.seamonkey-project.org/) depuis la version 2.28 et à [Thunderbird](https://www.mozilla.org/thunderbird/) depuis la version 31. [Abiword](http://abisource.org/) contient un petit éditeur d'équations, basé sur itex2MML. Enfin,[ Bluegriffon](http://www.bluegriffon.com/) possède un module complémentaire permettant d'insérer des formules MathML dans votre document, en utilisant une syntaxe de type ASCII/LaTeX.
+[TeXZilla](https://github.com/fred-wang/TeXZilla) possède plusieurs interfaces, notamment une [fiche CKEditor](https://ckeditor.com/addon/texzilla) utilisé sur MDN, une [démo en ligne](https://fred-wang.github.io/TeXZilla/), un [module de Firefox](https://addons.mozilla.org/en-US/firefox/addon/texzilla/) ou encore une [application web FirefoxOS](https://marketplace.firefox.com/app/texzilla-1/). Il est également intégré à [SeaMonkey](https://www.seamonkey-project.org/) depuis la version 2.28 et à [Thunderbird](https://www.mozilla.org/thunderbird/) depuis la version 31. [Abiword](http://abisource.org/) contient un petit éditeur d'équations, basé sur itex2MML. Enfin, [Bluegriffon](http://www.bluegriffon.com/) possède un module complémentaire permettant d'insérer des formules MathML dans votre document, en utilisant une syntaxe de type ASCII/LaTeX.
 
 ![BlueGriffon](mathml-shot1.png)
 
diff --git a/files/fr/web/mathml/element/maction/index.md b/files/fr/web/mathml/element/maction/index.md
index ac5dcfea6f..2635658f7e 100644
--- a/files/fr/web/mathml/element/maction/index.md
+++ b/files/fr/web/mathml/element/maction/index.md
@@ -20,7 +20,7 @@ L'action est définie par l'attribut `actiontype` qui peut prendre plusieurs val
     - `toggle` : Quand il y a un clic sur la sous-expression, la mise en forme des sous-expressions sélectionnées change. Ainsi chaque clic augmente la valeur de `selection`.
       La syntaxe est la suivante : `<maction actiontype="toggle" selection="entier-positif" > expression1 expression2 expressionN </maction>`.
     - `tooltip` : Lorsque la souris passe au-dessus de l'_expression_, une info-bulle est affichée à proximité de l'expression.
-      La syntaxe est la suivante :` <maction actiontype="tooltip"> expression message </maction>.`
+      La syntaxe est la suivante : `<maction actiontype="tooltip"> expression message </maction>.`
 
 - class, id, style
   - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS).
diff --git a/files/fr/web/mathml/element/math/index.md b/files/fr/web/mathml/element/math/index.md
index 99fda8ff97..b7deea058d 100644
--- a/files/fr/web/mathml/element/math/index.md
+++ b/files/fr/web/mathml/element/math/index.md
@@ -9,7 +9,7 @@ translation_of: Web/MathML/Element/math
 ---
 {{MathMLRef}}
 
-L'élément racine de MathML est` <math>`. Tout objet représenté en MathML doit être encadré de balises `<math>`. De plus, il est interdit d'imbriquer un autre élément `<math>` à l'intérieur d'un premier. Il est toutefois possible d'avoir un nombre arbitraire d'éléments fils à l'intérieur d'un élément `<math>`.
+L'élément racine de MathML est `<math>`. Tout objet représenté en MathML doit être encadré de balises `<math>`. De plus, il est interdit d'imbriquer un autre élément `<math>` à l'intérieur d'un premier. Il est toutefois possible d'avoir un nombre arbitraire d'éléments fils à l'intérieur d'un élément `<math>`.
 
 ## Attributs
 
diff --git a/files/fr/web/mathml/element/mfenced/index.md b/files/fr/web/mathml/element/mfenced/index.md
index 0762e953c8..24296cb7a5 100644
--- a/files/fr/web/mathml/element/mfenced/index.md
+++ b/files/fr/web/mathml/element/mfenced/index.md
@@ -20,7 +20,7 @@ translation_of: Web/MathML/Element/mfenced
 - class, id, style
   - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS).
 - close
-  - : Une chaîne de caractère pour le délimiteur fermant. La valeur par défaut est « `) `» et tous les blancs sont tronqués.
+  - : Une chaîne de caractère pour le délimiteur fermant. La valeur par défaut est «&nbsp;`)`&nbsp;» et tous les blancs sont tronqués.
 - href {{Deprecated_Inline()}}
   - : Un hyperlien pointant vers un URI donné.
 - mathbackground {{Deprecated_Inline()}}
diff --git a/files/fr/web/mathml/element/msub/index.md b/files/fr/web/mathml/element/msub/index.md
index 5647fb72ef..b53cdcafab 100644
--- a/files/fr/web/mathml/element/msub/index.md
+++ b/files/fr/web/mathml/element/msub/index.md
@@ -50,7 +50,7 @@ Rendu dans votre navigateur: <math><msub><mi>X</mi> <mn>1</mn></msub></math>
 
 ## Notes spécifiques à Gecko
 
-- À partir de Gecko 26.0 {{geckoRelease("26")}} il ne sera bientôt plus possible d'utiliser `<none/>` comme un élément enfant. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application ` of the ``superscriptshift` attribute has been fixed (see {{bug("827713")}} for details).
+- À partir de Gecko 26.0 {{geckoRelease("26")}} il ne sera bientôt plus possible d'utiliser `<none/>` comme un élément enfant. The rendering has been made more consistent with equivalent configurations of {{MathMLElement("msup")}} and {{MathMLElement("mmultiscripts")}} and a bug with an incorrect application of the `superscriptshift` attribute has been fixed (see {{bug("827713")}} for details).
 
 ## Voir aussi
 
diff --git a/files/fr/web/performance/index.md b/files/fr/web/performance/index.md
index b76ba4f995..78fa39206d 100644
--- a/files/fr/web/performance/index.md
+++ b/files/fr/web/performance/index.md
@@ -163,7 +163,7 @@ HTML
 
   - [Responsive images](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
 
-- [Preloading content with `rel="preload"`](/fr/docs/Web/HTML/Preloading_content) - [(https://w3c.github.io/preload/ ](https://w3c.github.io/preload/))
+- [Preloading content with `rel="preload"`](/fr/docs/Web/HTML/Preloading_content) - <https://w3c.github.io/preload/>
 
 CSS
 
diff --git a/files/fr/web/progressive_web_apps/loading/index.md b/files/fr/web/progressive_web_apps/loading/index.md
index afaf29335f..91b2a90e4b 100644
--- a/files/fr/web/progressive_web_apps/loading/index.md
+++ b/files/fr/web/progressive_web_apps/loading/index.md
@@ -154,7 +154,7 @@ Rappelez-vous de ce que nous avons dit concernant l'approche d'amélioration pro
 
 ## Dernières réflexions
 
-C'est fini pour ces séries de tutoriels — nous avons examiné le [code source code de l'exemple d'application js13kPWA](https://github.com/mdn/pwa-examples/tree/master/js13kpwa) et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une [Introduction](/fr/docs/Web/Progressive_web_apps/Introduction), [la structure des PWA, ](/fr/docs/Web/Progressive_web_apps/App_structure)[la disponibilité en mode déconnectégrâce aux Service Workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers), [les PWAs installable](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du [Service Worker Cookbook](https://serviceworke.rs/). Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'[API ntersection Observer](/fr/docs/Web/API/Intersection_Observer_API).
+C'est fini pour ces séries de tutoriels — nous avons examiné le [code source code de l'exemple d'application js13kPWA](https://github.com/mdn/pwa-examples/tree/master/js13kpwa) et nous avons appris à utiliser les fonctionnalités progressives des applications web en commençant par une [Introduction](/fr/docs/Web/Progressive_web_apps/Introduction), [la structure des PWA](/fr/docs/Web/Progressive_web_apps/App_structure), [la disponibilité en mode déconnectégrâce aux Service Workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers), [les PWAs installable](/fr/docs/Web/Progressive_web_apps/Installable_PWAs) et finalement les notifications. Nous avons également expliqué le mode push avec l'aide du [Service Worker Cookbook](https://serviceworke.rs/). Et dans cet article, nous avons abordé le concept de chargement progressif incluant un exemple intéressant utilisant l'[API ntersection Observer](/fr/docs/Web/API/Intersection_Observer_API).
 
 N'hésitez pas à faire des essais avec le code, à améliorer votre application existante avec des des fonctionnalités PWA ou à bâtir quelque chose d'entièrement nouveau de vous même. Les PWAs amènent un énorme avantage sur les applications web classiques.
 
diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.md b/files/fr/web/progressive_web_apps/offline_service_workers/index.md
index 6d04712c4a..e4a376c6cb 100644
--- a/files/fr/web/progressive_web_apps/offline_service_workers/index.md
+++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.md
@@ -221,7 +221,7 @@ Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Se
 
 Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez  la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux.
 
-Les Service Workers sont également utilisés pour gérer les [push notifications ](/fr/docs/Web/API/Push_API)[](/fr/docs//Web/API/Push_API)— ceci sera expliqué dans un prochain article.
+Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article.
 
 {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}}
 
diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md
index a7782be0e0..75752e6e9f 100644
--- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md
+++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md
@@ -90,7 +90,7 @@ Les données peuvent être récupérées puis affichées immédiatement à l'uti
 
 ### Exemple de Push
 
-Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le [Service Worker Cookbook](https://serviceworke.rs/) — voir la[ démonstration de charge utile poussée](https://serviceworke.rs/push-payload.html).
+Push requiert que la partie serveur fonctionne, donc nous ne pouvons pas l'inclure dans l'exemple js13kPWA hébergé dans les pages GitHub puisqu'elles ne permettent de servir que des fichiers statiques. C'est entièrement expliqué dans le [Service Worker Cookbook](https://serviceworke.rs/) — voir la [démonstration de charge utile poussée](https://serviceworke.rs/push-payload.html).
 
 Cette démonstration comporte trois fichiers:
 
diff --git a/files/fr/web/security/same-origin_policy/index.md b/files/fr/web/security/same-origin_policy/index.md
index fa7fc96871..ce2a713f38 100644
--- a/files/fr/web/security/same-origin_policy/index.md
+++ b/files/fr/web/security/same-origin_policy/index.md
@@ -24,7 +24,7 @@ Les cookies utilisent une définition de l'origine différente de celle qui vien
 
 ## Changer l'origine
 
-Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de `document.domain `vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page `http://store.company.com/dir/other.html` exécute le code suivant :
+Une page peut changer son origine dans une certaine mesure. Un script peut définir la valeur de `document.domain` vers un suffixe du domaine courant. S'il procéde ainsi, le domaine le plus court sera utilisé pour les prochaines vérifications d'origines. Par exemple, un script dans la page `http://store.company.com/dir/other.html` exécute le code suivant :
 
     document.domain = "company.com";
 
@@ -43,12 +43,12 @@ La same-origin policy contrôle les interactions entre deux origines différente
 Voici quelques exemples de ressources qui peuvent être embarqués malgré leur origine incompatible avec la same-origin policy :
 
 - JavaScript avec `<script src="..."></script>`. Les messages d'erreur de syntaxe ne sont disponibles que pour les scripts ayant la même origine.
-- CSS avec` <link rel="stylesheet" href="...">`. Étant donnée la [souplesse des règles de syntaxe](http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html) du CSS, les CSS d'origine différentes nécessitent une entête `Content-Type` correcte. Les restrictions varient selon les navigateurs : [IE](http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx), [Firefox](http://www.mozilla.org/security/announce/2010/mfsa2010-46.html), [Chrome](http://code.google.com/p/chromium/issues/detail?id=9877), [Safari](http://support.apple.com/kb/HT4070) et [Opera](http://www.opera.com/support/kb/view/943/).
+- CSS avec `<link rel="stylesheet" href="...">`. Étant donnée la [souplesse des règles de syntaxe](http://scarybeastsecurity.blogspot.dk/2009/12/generic-cross-browser-cross-domain.html) du CSS, les CSS d'origine différentes nécessitent une entête `Content-Type` correcte. Les restrictions varient selon les navigateurs : [IE](http://msdn.microsoft.com/en-us/library/ie/gg622939%28v=vs.85%29.aspx), [Firefox](http://www.mozilla.org/security/announce/2010/mfsa2010-46.html), [Chrome](http://code.google.com/p/chromium/issues/detail?id=9877), [Safari](http://support.apple.com/kb/HT4070) et [Opera](http://www.opera.com/support/kb/view/943/).
 - Images avec [`<img>`](/fr/docs/HTML/Element/Img). Les formats d'image supportés, comprenant PNG, JPEG, GIF, BMP, SVG...
 - Fichiers média avec [`<video>`](/fr/docs/HTML/Element/video) et [`<audio>`](/fr/docs/HTML/Element/audio).
 - Objets avec [`<object>`](/fr/docs/HTML/Element/object), [`<embed>`](/fr/docs/HTML/Element/embed) et [`<applet>`](/fr/docs/HTML/Element/applet).
 - Fontes de polices avec [`@font-face`](/fr/docs/CSS/@font-face). Certain navigateurs autorisent les fontes cross-origin, d'autres appliquent la same-origin policy.
-- N'importe quoi avec [`<frame>`](/fr/docs/HTML/Element/frame) et [`<iframe>`](/fr/docs/HTML/Element/iframe). Un site peut utiliser l'entête[` X-Frame-Options`](/fr/docs/HTTP/X-Frame-Options) pour interdire cela depuis une page n'ayant pas la même origine.
+- N'importe quoi avec [`<frame>`](/fr/docs/HTML/Element/frame) et [`<iframe>`](/fr/docs/HTML/Element/iframe). Un site peut utiliser l'entête [`X-Frame-Options`](/fr/docs/HTTP/X-Frame-Options) pour interdire cela depuis une page n'ayant pas la même origine.
 
 ### Autoriser l'accès cross-origin
 
diff --git a/files/fr/web/security/secure_contexts/index.md b/files/fr/web/security/secure_contexts/index.md
index cca5cc5c86..4a1174042c 100644
--- a/files/fr/web/security/secure_contexts/index.md
+++ b/files/fr/web/security/secure_contexts/index.md
@@ -25,7 +25,7 @@ Les contextes qui ne sont pas servis locallement doivent être servis avec *ht
 
 ## Détection des fonctionnalités
 
-Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si elles sont dans un context sécurisé ou non en utilisant le booléen `isSecureContext `qui est présent dans le scope global.
+Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si elles sont dans un context sécurisé ou non en utilisant le booléen `isSecureContext` qui est présent dans le scope global.
 
 ```js
 if (window.isSecureContext) {
diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md
index 443c129b0b..2cafc5a036 100644
--- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md
+++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md
@@ -106,7 +106,7 @@ p {
 }
 ```
 
-Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID` #clipping-path-1` qui est référencé dans le CSS. `clip-path` peut être associé à n'importe quel élément avec la classe `target`.
+Ce code crée une zone cliquable en forme de cercle et de rectangle associé à l'ID `#clipping-path-1` qui est référencé dans le CSS. `clip-path` peut être associé à n'importe quel élément avec la classe `target`.
 
 Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils affectent immédiatement le rendu HTML. Par exemple, vous pouvez redimensionner le cercle à l'aide du `clip-path` établi ci-dessus :
 
diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md
index 52b679461c..a1a659221d 100644
--- a/files/fr/web/svg/attribute/seed/index.md
+++ b/files/fr/web/svg/attribute/seed/index.md
@@ -49,6 +49,6 @@ Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**.
 
 ## Éléments
 
-Les éléments suivants peuvent être utilisés avec l'attribut `seed ` :
+Les éléments suivants peuvent être utilisés avec l'attribut `seed`&nbsp;:
 
 - {{ SVGElement("feTurbulence") }}
diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md
index b14d42ec70..104acab79c 100644
--- a/files/fr/web/svg/attribute/stroke-dasharray/index.md
+++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md
@@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/stroke-dasharray
 ---
 L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés.
 
-> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray `peut aussi être utilisé directement dans une feuille de style CSS.
+> **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray` peut aussi être utilisé directement dans une feuille de style CSS.
 
 Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}
 
diff --git a/files/fr/web/svg/compatibility_sources/index.md b/files/fr/web/svg/compatibility_sources/index.md
index 790df82f19..d3e5102356 100644
--- a/files/fr/web/svg/compatibility_sources/index.md
+++ b/files/fr/web/svg/compatibility_sources/index.md
@@ -15,4 +15,4 @@ Les sources suivantes sont utilisées pour les tableaux de compatibilités des 
 - <http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx> pour connaître l'état du support sur IE9
 - [Le graphique de support SVG sur Codedread.com](http://www.codedread.com/svg-support.php) pour les vérifications basiques par rapport à la suite de test W3C
 - [Wikipedia](http://en.wikipedia.org/wiki/SVG) pour des conseils basiques, non normatif
-- [Svground.fr/ ](svground.fr/)tuto assez complet sur le SVG
+- [SVGround.fr](https://svground.fr)&nbsp;: tuto assez complet sur le SVG
diff --git a/files/fr/web/svg/element/altglyphitem/index.md b/files/fr/web/svg/element/altglyphitem/index.md
index 56bed16b6f..dd331e1da6 100644
--- a/files/fr/web/svg/element/altglyphitem/index.md
+++ b/files/fr/web/svg/element/altglyphitem/index.md
@@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/altGlyphItem
 ---
 {{SVGRef}}{{deprecated_header}}
 
-L'élément `altGlyphItem fournit un ensemble de candidats pour la substitution de glyphes par l'élément `{{ SVGElement("altGlyph") }}.
+L'élément `altGlyphItem` fournit un ensemble de candidats pour la substitution de glyphes par l'élément {{ SVGElement("altGlyph") }}.
 
 ## Contexte d'utilisation
 
diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md
index 3a4da75a41..8f5721456c 100644
--- a/files/fr/web/svg/element/ellipse/index.md
+++ b/files/fr/web/svg/element/ellipse/index.md
@@ -25,16 +25,16 @@ L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipse
 
 - {{ SVGAttr("cx") }}
   - : La position x de l'ellipse.
-    Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**.
+    Type de valeur : [**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`0`; Animable : **oui**.
 - {{ SVGAttr("cy") }}
   - : La position y de l'ellipse.
-    Type de valeur : **[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `0`; Animable : **oui**.
+    Type de valeur : [**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`0`; Animable :**oui**.
 - {{ SVGAttr("rx") }}
   - : Le rayon de l'ellipse sur l'axe x.
-    Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**.
+    Type de valeur : `auto`|[**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`auto`; Animable : **oui**.
 - {{ SVGAttr("ry") }}
   - : Le rayon de l'ellipse sur l'axe y.
-    Type de valeur : `auto`|**[\<longueur>](/fr/docs/Web/SVG/Content_type#Length)**|[\<pourcentage>](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut : `auto`; Animable : **oui**.
+    Type de valeur : `auto`|[**`<longueur>`**](/fr/docs/Web/SVG/Content_type#Length)|[**`<pourcentage>`**](/fr/docs/Web/SVG/Content_type#Percentage); Valeur par défaut :`auto`; Animable : **oui**.
 - {{ SVGAttr("pathLength") }}
   - : Cet attribut permet de spécifier la longueur totale du tracé, en unités de l'utilisateur.
     Type de valeur : **[\<number>](/fr/docs/Web/SVG/Content_type#Number)**; Valeur par défaut : `auto`; Animable : **oui**.
diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md
index 505be73420..93360395cf 100644
--- a/files/fr/web/svg/element/line/index.md
+++ b/files/fr/web/svg/element/line/index.md
@@ -42,7 +42,7 @@ html,body,svg { height:100% }
 - [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ;
 - [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ;
 - [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ;
-- [Attributs de présentation ](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ;
+- [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation")&nbsp;;
 - {{ SVGAttr("class") }} ;
 - {{ SVGAttr("style") }} ;
 - {{ SVGAttr("externalResourcesRequired") }} ;
diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md
index 5cb5bbd0a6..baae55eed4 100644
--- a/files/fr/web/svg/element/radialgradient/index.md
+++ b/files/fr/web/svg/element/radialgradient/index.md
@@ -7,7 +7,9 @@ tags:
   - SVG Dégradé
 translation_of: Web/SVG/Element/radialGradient
 ---
-{{SVGRef}}L'élément [SVG ](/fr/docs/Web/SVG)**`<radialGradient>`** permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG.
+{{SVGRef}}
+
+L'élément [SVG](/fr/docs/Web/SVG) **`<radialGradient>`** permet de définir un dégradé radial afin de dessiner un contour, ou de remplir des éléments SVG.
 
 ## Contexte d'utilisation
 
diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md
index 74789fa1ef..58a230af5f 100644
--- a/files/fr/web/svg/element/symbol/index.md
+++ b/files/fr/web/svg/element/symbol/index.md
@@ -74,7 +74,7 @@ html,body,svg { height:100% }
 - [Attributs de style](/fr/docs/Web/SVG/Attribute/Styling)
   - : {{SVGAttr('class')}}, {{SVGAttr('style')}}
 - Attributs d'événement
-  - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document),[ Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques)
+  - : [Attributs d'événement globaux](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_globaux), [Attributs d'événement des éléments du document](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_des_éléments_du_document), [Attributs d'événement graphiques](/fr/docs/Web/SVG/Attribute/Events#Attributs_d'événement_graphiques)
 - [Atttributs de présentation](/fr/docs/Web/SVG/Attribute/Presentation)
   - : Notamment: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
 - Attributs Aria
diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md
index a1a0a1c747..6c3e975de4 100644
--- a/files/fr/web/svg/element/use/index.md
+++ b/files/fr/web/svg/element/use/index.md
@@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/use
 ---
 {{SVGRef}}
 
-L'élement **`<use> `**permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés"  là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5.
+L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés"  là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5.
 
 Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance").
 
diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md
index cd2d023cd7..c153279ae1 100644
--- a/files/fr/web/svg/index.md
+++ b/files/fr/web/svg/index.md
@@ -24,7 +24,7 @@ SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est ba
 
 SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap).
 
-SVG est une norme développée par le [World Wide Web Consortium (W3C) ](https://www.w3.org/)depuis 1999.
+SVG est une norme développée par le [World Wide Web Consortium (W3C)](https://www.w3.org/) depuis 1999.
 
 ## Documentation
 
@@ -78,13 +78,13 @@ Comme HTML, SVG dispose d'un modèle de document (DOM) et d'évènements, et est
 - [svg-wow.org](http://svg-wow.org/)
 - Extension Firefox ([Grafox](http://schepers.cc/grafox/)) pour ajouter la gestion d'un sous-ensemble des animations SMIL
 - Manipulation interactive de [photos](http://people.mozilla.com/~vladimir/demos/photos.svg)
-- [Transformations HTML ](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/)utilisant `foreignObject` de SVG
+- [Transformations HTML](http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/) utilisant `foreignObject` de SVG
 
 ### Cartes, graphiques, jeux et expérimentations 3D
 
 Bien qu'un peu de SVG puisse contribuer à améliorer le contenu du web, voici quelques exemples d'utilisation poussée du SVG.
 
-- Un[ Tetris en SVG](http://www.codedread.com/yastframe.php) et [Connect 4](http://www.treebuilder.de/svg/connect4.svg)
+- Un [Tetris en SVG](http://www.codedread.com/yastframe.php) et [Connect 4](http://www.treebuilder.de/svg/connect4.svg)
 - Jeu [Find the State](http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg)
 - [Boîte 3D](http://www.treebuilder.de/default.asp?file=441875.xml) et [boîtes 3D](http://www.treebuilder.de/default.asp?file=206524.xml)
 - [jVectorMap](http://jvectormap.com/) (pour représenter des cartes interactives avec des données) (en anglais)
diff --git a/files/fr/web/svg/tutorial/other_content_in_svg/index.md b/files/fr/web/svg/tutorial/other_content_in_svg/index.md
index 38baec6e28..2dd2b2d299 100644
--- a/files/fr/web/svg/tutorial/other_content_in_svg/index.md
+++ b/files/fr/web/svg/tutorial/other_content_in_svg/index.md
@@ -27,7 +27,7 @@ L'image embarquée devient un élément SVG normal. Cela implique que vous pouve
 
 ### Embarquer du contenu XML quelconque
 
-Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject, `son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la _largeur_ et la _hauteur_ de l'objet embarqué afin de définir la place que celui-ci occupera).
+Étant donné que le SVG est un document XML, il est toujours possible d'adjoindre un contenu XML quelconque n'importe où dans le document. Mais il n'y a évidemment aucun moyen de savoir comment l'élément SVG encadrant votre contenu réagira à ce qui aura été inséré. En fait, un lecteur SVG correct ne réagira d'aucune façon particulière et ignorera purement et simplement ce contenu. Si la spécification ajoute l'élément SVG `foreignObject`,son utilité est essentiellement d'être une coquille pour d'autres balises et de permettre d'adjoindre des attributs de style (comme par exemple la _largeur_ et la _hauteur_ de l'objet embarqué afin de définir la place que celui-ci occupera).
 
 L'élément **`foreignObject`** est donc la bonne méthode pour embarquer du **XHTML** dans du SVG. Si le SVG doit contenir du texte de longueur conséquente, la disposition HTML est bien plus pratique et utilisable que l'élément SVG `text`. Une autre utilisation bien pratique de cet élément est l'adjonction de formules avec MathML. Pour des applications scientifiques utilisant le SVG, c'est un bon moyen de permettre la communication entre ces deux univers.
 
diff --git a/files/fr/web/xpath/index.md b/files/fr/web/xpath/index.md
index 948a0993e5..7f7ffeaaaf 100644
--- a/files/fr/web/xpath/index.md
+++ b/files/fr/web/xpath/index.md
@@ -33,7 +33,7 @@ XPath utilise une notation en chemin (à l'instar des URL) pour naviguer dans la
 - [Transformer du XML avec XSLT](/fr/docs/Web/XSLT/Transforming_XML_with_XSLT)
   - : XSLT utilise XPath afin de cibler les segments d'un document XML pour ensuite les transformer.
 - [Fragments de code XPath](/fr/docs/Web/XPath/Snippets)
-  - : Un ensemble d'exemples de code réutilisables en JavaScript qui utilisent les API [DOM Level 3 XPath ](https://www.w3.org/TR/DOM-Level-3-XPath/).
+  - : Un ensemble d'exemples de code réutilisables en JavaScript qui utilisent les API [DOM Level 3 XPath](https://www.w3.org/TR/DOM-Level-3-XPath/).
 - [Qu'est-ce que XSLT ? (en anglais)](https://www.xml.com/pub/a/2000/08/holman/)
   - : Une introduction à XSLT et XPath sans besoin de connaissances préalables. Le contexte, la structure, les concepts ainsi qu'une terminologie introductive sont fournis au lecteur.
 
diff --git a/files/fr/web/xslt/element/stylesheet/index.md b/files/fr/web/xslt/element/stylesheet/index.md
index 2f47f3e8ed..038e5a681e 100644
--- a/files/fr/web/xslt/element/stylesheet/index.md
+++ b/files/fr/web/xslt/element/stylesheet/index.md
@@ -32,7 +32,7 @@ Un pseudo-attribut est nécessaire pour identifier le document comme étant une
 
 ### Attributs optionnels
 
-- `id `(Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée)
+- `id` (Supporté comme dans Netscape 7.0 uniquement s'il est explicitement appelé par une DTD intégrée)
   - : Définit un identifiant `id` pour cette feuille de style. Cet attribut est le plus souvent utilisé lorsque la feuille de style est incorporée dans un autre document XML.
 
 <!---->
-- 
cgit v1.2.3-54-g00ecf


From f19525aabd103f754c4c385c7bc0e2bea56d71ae Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Sun, 6 Mar 2022 16:32:09 +0100
Subject: Markdown fixes part 6 (fr/learn) (#4405)

* MD037/38 fixes, no spaces in code/emphasis

* Remaining MD037/38/39 fixes for fr/learn

* Missed markdown fixes
---
 .../accessibility/css_and_javascript/index.md      |  6 +++---
 files/fr/learn/accessibility/html/index.md         |  4 ++--
 files/fr/learn/accessibility/multimedia/index.md   |  2 +-
 .../accessibility/what_is_accessibility/index.md   |  4 ++--
 .../set_up_a_local_testing_server/index.md         |  2 +-
 .../common_questions/what_is_a_web_server/index.md |  2 +-
 .../what_software_do_i_need/index.md               |  4 ++--
 .../css/building_blocks/styling_tables/index.md    |  2 +-
 .../css/css_layout/legacy_layout_methods/index.md  |  2 +-
 .../css/css_layout/responsive_design/index.md      |  2 +-
 files/fr/learn/css/first_steps/index.md            |  2 +-
 files/fr/learn/css/howto/index.md                  |  2 +-
 .../learn/css/styling_text/fundamentals/index.md   |  2 +-
 .../forms/basic_native_form_controls/index.md      |  2 +-
 files/fr/learn/forms/form_validation/index.md      |  2 +-
 .../how_to_build_custom_form_controls/index.md     |  4 ++--
 .../forms/how_to_structure_a_web_form/index.md     |  2 +-
 .../forms/html_forms_in_legacy_browsers/index.md   |  4 ++--
 .../index.md                                       |  2 +-
 .../sending_and_retrieving_form_data/index.md      |  6 +++---
 .../sending_forms_through_javascript/index.md      |  2 +-
 files/fr/learn/forms/styling_web_forms/index.md    |  4 ++--
 files/fr/learn/forms/your_first_form/index.md      |  4 ++--
 .../dealing_with_files/index.md                    |  4 ++--
 .../fr/learn/getting_started_with_the_web/index.md |  2 +-
 .../installing_basic_software/index.md             |  6 +++---
 .../javascript_basics/index.md                     |  4 ++--
 .../publishing_your_website/index.md               |  2 +-
 .../howto/author_fast-loading_html_pages/index.md  |  2 +-
 .../learn/html/howto/use_data_attributes/index.md  |  2 +-
 files/fr/learn/html/index.md                       |  2 +-
 .../advanced_text_formatting/index.md              |  2 +-
 .../creating_hyperlinks/index.md                   |  4 ++--
 .../introduction_to_html/debugging_html/index.md   |  2 +-
 .../document_and_website_structure/index.md        |  4 ++--
 files/fr/learn/html/introduction_to_html/index.md  |  2 +-
 .../images_in_html/index.md                        |  6 +++---
 .../learn/html/multimedia_and_embedding/index.md   |  2 +-
 .../other_embedding_technologies/index.md          |  4 ++--
 .../responsive_images/index.md                     |  2 +-
 .../video_and_audio_content/index.md               | 12 ++++++------
 files/fr/learn/html/tables/basics/index.md         |  2 +-
 .../asynchronous/timeouts_and_intervals/index.md   |  2 +-
 .../build_your_own_function/index.md               |  2 +-
 .../building_blocks/conditionals/index.md          |  6 +++---
 .../javascript/building_blocks/events/index.md     | 10 +++++-----
 .../javascript/building_blocks/functions/index.md  |  4 ++--
 .../building_blocks/image_gallery/index.md         |  2 +-
 files/fr/learn/javascript/building_blocks/index.md |  2 +-
 .../building_blocks/looping_code/index.md          | 22 +++++++++++-----------
 .../building_blocks/return_values/index.md         |  2 +-
 .../client-side_web_apis/introduction/index.md     |  4 ++--
 .../javascript/first_steps/a_first_splash/index.md |  8 ++++----
 .../learn/javascript/first_steps/arrays/index.md   |  4 ++--
 .../first_steps/silly_story_generator/index.md     |  4 ++--
 .../learn/javascript/first_steps/strings/index.md  |  2 +-
 .../first_steps/useful_string_methods/index.md     |  2 +-
 .../first_steps/what_is_javascript/index.md        |  4 ++--
 files/fr/learn/javascript/objects/json/index.md    |  2 +-
 .../objects/object_building_practice/index.md      |  6 +++---
 .../javascript/objects/object_prototypes/index.md  |  6 +++---
 .../learn/server-side/django/admin_site/index.md   |  2 +-
 .../django/development_environment/index.md        |  6 +++---
 files/fr/learn/server-side/django/index.md         |  2 +-
 .../learn/server-side/django/introduction/index.md |  2 +-
 files/fr/learn/server-side/django/models/index.md  |  2 +-
 .../django/tutorial_local_library_website/index.md |  2 +-
 .../first_steps/client-server_overview/index.md    |  2 +-
 .../first_steps/website_security/index.md          |  4 ++--
 files/fr/learn/server-side/index.md                |  2 +-
 .../cross_browser_testing/accessibility/index.md   |  2 +-
 .../cross_browser_testing/html_and_css/index.md    |  6 +++---
 .../cross_browser_testing/javascript/index.md      |  4 ++--
 .../testing_strategies/index.md                    |  2 +-
 files/fr/learn/tools_and_testing/github/index.md   |  2 +-
 .../command_line/index.md                          |  4 ++--
 76 files changed, 136 insertions(+), 136 deletions(-)

diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md
index dacf718e80..3743469254 100644
--- a/files/fr/learn/accessibility/css_and_javascript/index.md
+++ b/files/fr/learn/accessibility/css_and_javascript/index.md
@@ -93,7 +93,7 @@ Vous devriez :
 - Vos listes devraient ressembler à des listes.
 - La couleur du texte doit présenter un contraste suffisant avec la couleur de fond.
 
-Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [ Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations.
+Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations.
 
 #### Texte mis en emphase
 
@@ -190,7 +190,7 @@ Tableaux pour la présentation des données tabulées.
 
 Vous pouvez voir un bon exemple simple de  [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)).
 
-En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n) `pour faciliter la lecture.
+En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture.
 
 ### Couleur et contraste de couleur
 
@@ -293,7 +293,7 @@ function validate(e) {
 
 La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`).
 
-Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de[ event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.
+Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs  (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation.
 
 Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste `errorList`.
 
diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md
index 7d23870cc5..80bab3a496 100644
--- a/files/fr/learn/accessibility/html/index.md
+++ b/files/fr/learn/accessibility/html/index.md
@@ -482,7 +482,7 @@ Cela met en évidence l’importance non seulement d’utiliser des noms de fich
 
 Une chose à considérer est de savoir si vos images ont une signification dans votre contenu, ou si elles sont purement décoratives, n’ont donc aucune signification. S'ils sont décoratifs, il est préférable de les inclure dans la page en tant qu'images d'arrière-plan CSS.
 
-> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et[ Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.
+> **Note :** Lisez [Les images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML) et [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web) pour plus d’informations sur la mise en œuvre des images et les meilleures pratiques.
 
 Si vous souhaitez fournir des informations contextuelles supplémentaires, vous devez les insérer dans le texte entourant l'image ou dans un attribut title, comme indiqué ci-dessus. Dans ce cas, la plupart des lecteurs d’écran liront le texte alternatif, l’attribut title et le nom du fichier. En outre, les navigateurs affichent le texte du titre sous forme d’infos lors du survol de la souris.
 
@@ -530,7 +530,7 @@ Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore assoc
 </h3>
 ```
 
-Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut  `alt `de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .
+Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) .
 
 La raison d'utiliser un vide `alt` au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun `alt` n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide `alt` sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif.
 
diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md
index 1f6b2ad8c0..3586388ef4 100644
--- a/files/fr/learn/accessibility/multimedia/index.md
+++ b/files/fr/learn/accessibility/multimedia/index.md
@@ -50,7 +50,7 @@ Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniqu
 
 ## Simple images
 
-Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article  [ HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML)  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.
+Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML&nbsp;: une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML)  —  vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs.
 
 Par exemple:
 
diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md
index a0bf7727ec..39f6cd5296 100644
--- a/files/fr/learn/accessibility/what_is_accessibility/index.md
+++ b/files/fr/learn/accessibility/what_is_accessibility/index.md
@@ -112,7 +112,7 @@ Contrairement à d’autres problèmes d’accessibilité web, il est impossible
 
 Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail.
 
-En termes de statistiques, encore une fois, les chiffres sont importants. Le  r[apport 2014 sur le statut d'invalidité ](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf)(PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .
+En termes de statistiques, encore une fois, les chiffres sont importants. Le [rapport 2014 sur le statut d'invalidité](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive .
 
 > **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue.
 
@@ -139,7 +139,7 @@ D'autre part, si vous travaillez sur un site web de galerie présentant des œuv
 
 Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème.
 
-> **Note :** Notre article [ Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
+> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail.
 
 Résumer :
 
diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
index 04f3d40be2..6f8b958dec 100644
--- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
+++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md
@@ -49,7 +49,7 @@ Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL
 
 Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :
 
-- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus).
+- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus).
 - **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.
 
 ## Créer un serveur HTTP local simple
diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md
index e3961daf4d..ab4cfd0cd1 100644
--- a/files/fr/learn/common_questions/what_is_a_web_server/index.md
+++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md
@@ -115,6 +115,6 @@ Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer u
 
 Maintenant que vous connaissez les serveurs web, vous pourriez :
 
-- continuer votre lecture avec[ combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte)
+- continuer votre lecture avec [combien ça coûte de faire quelque chose sur le Web](/fr/docs/Apprendre/Publier_sur_le_Web_combien_ça_coûte)
 - en savoir plus sur [les différents logiciels nécessaires à la création d'un site web](/fr/docs/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web)
 - poursuivre avec quelque chose de plus pratique comme [comment transférer des fichiers vers un serveur web](/fr/docs/Apprendre/Transférer_des_fichiers_vers_un_serveur_web).
diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md
index 8b3b46c806..bc77e82145 100644
--- a/files/fr/learn/common_questions/what_software_do_i_need/index.md
+++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md
@@ -167,7 +167,7 @@ Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé
 
 ### Transférer des fichiers vers un serveur web
 
-Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (_uploader_) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article[ combien ça coûte de publier quelque chose sur le Web ?](/fr/docs/Learn/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages).
+Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (_uploader_) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article [combien ça coûte de publier quelque chose sur le Web&nbsp;?](/fr/docs/Learn/How_much_does_it_cost)). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour _File Transfer Protocol_ ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme [RSync](https://en.wikipedia.org/wiki/Rsync) et [Git/Github](https://help.github.com/articles/using-a-custom-domain-with-github-pages).
 
 > **Note :** FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (_Secure_ FTP) ou via RSync avec SSH.
 
@@ -214,7 +214,7 @@ Comme vous le savez sans doute déjà, vous avez besoin d'un navigateur web pour
 - [Microsoft Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie)
 - [Apple Safari](http://www.apple.com/safari/)
 
-Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou[ UC Browser](http://www.ucweb.com/ucbrowser/).
+Si votre site s'adresse à un public particulier (par exemple un pays spécifique ou une plate-forme donnée), vous pourrez avoir à tester votre site sur des navigateurs supplémentaires comme [Opera](http://www.opera.com/), [Dolphin](http://dolphin.com/) ou [UC Browser](http://www.ucweb.com/ucbrowser/).
 
 Cela se complique quand on réalise que certains navigateurs ne fonctionnent que sur certains systèmes d'exploitation. Apple Safari ne fonctionne que sur iOS et Mac OS, Internet Explorer ne fonctionne que sur Windows, etc. Face à ce problème, mieux vaut tirer parti de services comme [Browsershots](http://browsershots.org/) ou [Browserstack](http://www.browserstack.com/). Browsershots fournit des captures d'écran de votre site, tel qu'il est rendu dans les différents navigateurs. Browserstack vous permet de complètement contrôler des machines virtuelles afin que vous puissiez tester votre site sur les environnements les plus fréquents. Sinon, vous pouvez mettre en place votre propre machine virtuelle mais cela demandera quelques connaissances (si vous choisissez cette option, Microsoft met à disposition, sur [modern.ie](https://modern.ie), une machine virtuelle prête à être utilisée).
 
diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md
index 253f8338c6..bfebc37bc0 100644
--- a/files/fr/learn/css/building_blocks/styling_tables/index.md
+++ b/files/fr/learn/css/building_blocks/styling_tables/index.md
@@ -252,7 +252,7 @@ table {
 }
 ```
 
-- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even `(pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)
+- Plus haut, nous avons vu comment on utilisait le sélecteur {{cssxref(":nth-child")}} pour sélectionner un élément enfant. Il est aussi possible de donner une formule en paramètre afin qu'il sélectionne une suite d'éléments. La formule 2n-1 sélectionne tous les enfants impairs (1, 3, 5, etc.) et la formule 2n sélectionne tous les enfants pairs (2, 4, 6, etc.). Nous avons utilisé les mots-clés `odd` (impair) et `even` (pair) dans notre code ; ils font exactement la même chose que les formules susmentionnées. Dans ce cas, nous donnons aux lignes paires et impaires des couleurs différentes (clinquantes)
 - Nous avons également ajouté un motif d'arrière-plan répétitif sur toutes les lignes ; il donne un peu de bruit (un `.png` semi-transparent avec un peu de distorsion visuelle) pour donner une certaine texture.
 - Finalement, nous avons donné à toute la table une couleur de fond unie de façon à ce que les navigateurs qui ne prennent pas en charge le sélecteur `:nth-child` disposent encore d'une teinte de fond pour les lignes du corps de tableau.
 
diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
index 7fd67d23b5..6d0e3d27ee 100644
--- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
+++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md
@@ -562,7 +562,7 @@ Regardez dans le fichier skeleton.css, vous verrez la  CSS appliquée quand on
 }
 ```
 
-Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content `et les véritables conteneurs `<div> `de contenu. Nous avons aussi déjà fait cela.
+Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieur d'une ligne, donc avec notre exemple précédent nous aurons besoin d'un `<div>` supplémentaire ou d'un autre élément de la classe `row` imbriqué entre le `<div>` de `content` et les véritables conteneurs `<div>` de contenu. Nous avons aussi déjà fait cela.
 
 Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne.
 
diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md
index 87fefdde89..9c4fafc963 100644
--- a/files/fr/learn/css/css_layout/responsive_design/index.md
+++ b/files/fr/learn/css/css_layout/responsive_design/index.md
@@ -280,7 +280,7 @@ Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à m
 
 Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive.
 
-Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px `par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.
+Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu.
 
 **Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.**
 
diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md
index 3861ea29db..be0e15cdfc 100644
--- a/files/fr/learn/css/first_steps/index.md
+++ b/files/fr/learn/css/first_steps/index.md
@@ -44,5 +44,5 @@ Ce module contient les articles suivants, qui vous présenteront les bases théo
 
 ## Voir aussi
 
-- Literacy[ Web intermédiaire 1 : Introduction au CSS](/fr/docs/)
+- Literacy [Web intermédiaire 1&nbsp;: Introduction au CSS](/fr/docs/)
   - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P
diff --git a/files/fr/learn/css/howto/index.md b/files/fr/learn/css/howto/index.md
index f613014a6c..c31fe1ece3 100644
--- a/files/fr/learn/css/howto/index.md
+++ b/files/fr/learn/css/howto/index.md
@@ -38,7 +38,7 @@ Les liens suivants pointent vers des solutions aux problèmes courants que vous
 - [Comment contrôler le contenu débordant](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_d%C3%A9passements)
 - [Comment contrôler la partie des boîtes CSS dessinées au-dessus de l'arrière-plan](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#L%27arri%C3%A8re-plan)
 - [Comment définir _"inline_", _"block"_ et _"inline-block"_ ?](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte)
-- [Comment créer des boîtes fantaisies ](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités).
+- [Comment créer des boîtes fantaisies](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes) (lire aussi le module [Styles pour boites](/fr/docs/Learn/CSS/Styling_boxes), généralités).
 - [Comment utiliser `background-clip` pour contrôler combien de boîtes sont impactées par l'image de fond-d'écran](/fr/Apprendre/CSS/Comment/Cr%C3%A9er_de_belles_bo%C3%AEtes#Les_arri%C3%A8re-plans)
 - [Comment changer complètement le modèle de boîte en utilisant `box-sizing`](/fr/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely)
 - [Comment contrôler l'arrière-plan](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds)
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md
index c56023c1f9..6b635b6014 100644
--- a/files/fr/learn/css/styling_text/fundamentals/index.md
+++ b/files/fr/learn/css/styling_text/fundamentals/index.md
@@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis
 - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) :
 
   - `normal` : fige le texte en police normale (suppression du style italique existant).
-  - `italic `: met le texte en  _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
+  - `italic`&nbsp;: met le texte en  _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place.
   - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_.
 
 - {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras):
diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md
index 5258dc363f..2d74518150 100644
--- a/files/fr/learn/forms/basic_native_form_controls/index.md
+++ b/files/fr/learn/forms/basic_native_form_controls/index.md
@@ -550,7 +550,7 @@ Attention : la prise en charge du widget `color` n'est pas très bonne actuellem
 
 Il existe d'autres types de widgets qui ne peuvent pas être classés facilement à cause de leur comportement très particulier, mais qui sont toujours très utiles.
 
-> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi[ directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)).
+> **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) (à voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)).
 
 ### Sélection de fichier
 
diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md
index 6709ff5102..351da31325 100644
--- a/files/fr/learn/forms/form_validation/index.md
+++ b/files/fr/learn/forms/form_validation/index.md
@@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s
 ```
 
 - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs.
-- Nous avons également contraint le champ `number` à un `min` de 1 et un `max `de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
+- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage.
 
 ```html hidden
 input:invalid {
diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
index 62c865a50b..80f5e7f772 100644
--- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md
@@ -773,11 +773,11 @@ Mais attendez, avons‑nous vraiment terminé ?
 
 Nous venons de faire quelque chose qui fonctionne, même si nous sommes loin d'avoir une boîte de sélection avec toutes les fonctionnalités, elle fonctionne parfaitement. Mais ce que nous avons fait n'est rien de plus que de jouer avec les DOM. Elle n'a pas de sémantique réelle, et même si elle ressemble à une boîte de sélection, du point de vue du navigateur, ce n'en est pas une, de sorte que les technologies d'assistance ne pourront pas comprendre que c'est une boîte de sélection. Bref, cette jolie nouvelle boîte de sélection n'est pas accessible !
 
-Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une[ norme W3C ](http://www.w3.org/TR/wai-aria/)spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.
+Heureusement, il existe une solution et elle s'appelle [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA"). ARIA signifie « Accessible Rich Internet Application » et c'est une [norme W3C](http://www.w3.org/TR/wai-aria/) spécialement conçue pour ce que nous faisons ici : rendre accessibles les applications web et les widgets personnalisés. Il s'agit essentiellement d'un ensemble d'attributs qui étendent le HTML afin que nous puissions mieux décrire les rôles, les états et les propriétés comme si l'élément que nous venons de concevoir était l'élément natif pour lequel il essaie de passer. L'utilisation de ces attributs est très simple, alors faisons-le.
 
 ### L'attribut `role`
 
-L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role `](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`).
+L'attribut clé utilisé par [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est l'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques"). L'attribut [`role`](/fr/docs/Accessibility/ARIA/ARIA_Techniques "/en-US/docs/Accessibility/ARIA/ARIA_Techniques") accepte une valeur qui définit à quoi sert un élément. Chaque rôle définit ses propres exigences et comportements. Dans notre exemple, nous utiliserons le rôle de [`listbox`](/fr/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). C'est un « rôle composite », ce qui signifie que les éléments ayant ce rôle s'attendent à avoir des enfants, chacun avec un rôle spécifique (dans ce cas, au moins un enfant avec le rôle `option`).
 
 Il faut aussi noter qu'ARIA définit les rôles appliqués par défaut aux balises HTML standard. Par exemple, l'élément {{HTMLElement("table")}} correspond au rôle `grid`, et l'élément {{HTMLElement("ul")}} correspond au rôle `list`. Comme nous utilisons un élément {{HTMLElement("ul")}}, nous voulons nous assurer que le rôle `listbox` de notre widget remplacera le rôle `list` de l'élément {{HTMLElement("ul")}}. À cette fin, nous utiliserons le rôle `presentation`. Ce rôle est conçu pour nous permettre d'indiquer qu'un élément n'a pas de signification particulière, et est utilisé uniquement pour présenter de l'information. Nous l'appliquerons à notre élément {{HTMLElement("ul")}}.
 
diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
index 2e3c1fd3fe..a0a7954b36 100644
--- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md
@@ -189,7 +189,7 @@ Chaque groupe de fonctionnalités séparées doit être contenu dans un élémen
 
 Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi.
 
-1.  Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement ](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css)dans un nouveau répertoire.
+1.  Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire.
 2.  Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML :
 
     ```html
diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
index e9380806b1..01405dcce2 100644
--- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
+++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md
@@ -22,7 +22,7 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan
 
   - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit.
   - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante.
-  - ainsi que le[ site web Apple .](https://developer.apple.com/technologies/safari/)
+  - ainsi que le [site web Apple](https://developer.apple.com/technologies/safari/).
 
 ### Documentation indépendante
 
@@ -200,7 +200,7 @@ Modernizr.load({
 
 L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin.
 
-> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [ la documentation de Modernizr](http://modernizr.com/docs/).
+> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/).
 
 ### Faites attention aux performances
 
diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
index e4193009bc..4834f1872d 100644
--- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
+++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md
@@ -1871,7 +1871,7 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor
 
 ### Widget `range`
 
-Il n'y a pas de méthode standard pour changer le style de la poignée de` range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`.
+Il n'y a pas de méthode standard pour changer le style de la poignée de `range` et Opera n'a aucun moyen de modifier le rendu par défaut du widget `range`.
 
 <table>
   <thead>
diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
index c530eaae7f..71ddd327e2 100644
--- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md
@@ -94,7 +94,7 @@ De nombreuses pages anciennes utilisent la notation suivante pour indiquer que l
 
 ### L'attribut method
 
-Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP ](/fr/docs/Web/HTTP)fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`.
+Cet attribut définit comment les données sont envoyées. Le [Protocole HTTP](/fr/docs/Web/HTTP) fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode `GET` et la méthode `POST`.
 
 Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.
 
@@ -167,7 +167,7 @@ Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajo
 
     say=Hi&to=Mom
 
-L'en-tête `Content-Length `indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.
+L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-Type` indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.
 
 > **Note :** Vous trouverez cet exemple sur GitHub — voyez [post-method.html](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
 
@@ -238,7 +238,7 @@ if __name__ == "__main__":
 
 Les deux prototypes référencés dans le code ci‑dessus sont les suivants :
 
-- [form.html ](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».)
+- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html)&nbsp;: Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».)
 - [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur.
 
 > **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur.
diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md
index 2a91434804..f0e64a4440 100644
--- a/files/fr/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md
@@ -28,7 +28,7 @@ L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signi
 
 
 
-Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,[ JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui.
+Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant, [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) a remplacé XML et est de plus en plus courant aujourd'hui.
 
 Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (`application/x-www-form-urlencoded`) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données `multipart/form‑data`.
 
diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md
index 1882911bf7..89c4f12824 100644
--- a/files/fr/learn/forms/styling_web_forms/index.md
+++ b/files/fr/learn/forms/styling_web_forms/index.md
@@ -169,7 +169,7 @@ Regardons sur un exemple concret la façon de composer un formulaire HTML. Cela
 
 ### HTML
 
-Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier[ article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre.
+Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [article de ce guide](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML "/en-US/docs/HTML/Forms/My_first_HTML_form") ; il ne comporte que quelques identifiants supplémentaires et un titre.
 
 ```html
 <form>
@@ -202,7 +202,7 @@ C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons be
 
 1.  L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail.
 2.  Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
-3.  Une police d'écriture manuelle : [ « Journal » de fontsquirrel.com ](http://www.fontsquirrel.com/fonts/Journal)— téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
+3.  Une police d'écriture manuelle : [«&nbsp;Journal&nbsp;» de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus.
 
 
 
diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md
index 6b6a1bd89f..bf49454b8c 100644
--- a/files/fr/learn/forms/your_first_form/index.md
+++ b/files/fr/learn/forms/your_first_form/index.md
@@ -151,7 +151,7 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n
 
 ![](form-no-style.png)
 
-> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) ([ ](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)ou[ également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
+> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez  [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)).
 
 Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable.
 
@@ -259,7 +259,7 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b
   ...
 ```
 
-Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email `» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST.
+Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », «&nbsp;`user_email`&nbsp;» et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST.
 
 Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires).
 
diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
index 9d836ccf25..888c4afd58 100644
--- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -38,8 +38,8 @@ La réponse la plus simple est d'utiliser le trait d'union (-) pour les noms de
 Cela dit, regardons la structure que le site de test devrait avoir. Les éléments retrouvés quasiment dans tout projet de site web sont un fichier HTML d'index, des dossiers pour les images, les scripts et les feuilles de style. Créons‑les maintenant :
 
 1.  **`index.html`** : ce fichier contiendra généralement le contenu de votre page d'accueil, c'est-à-dire le texte et les images que les gens verront lorsqu'ils arriveront sur votre site. Avec votre éditeur de texte, créez un fichier nommé `index.html` puis enregistrez‑le dans votre dossier `site-test`.
-2.  **un dossier` images`** : ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`.
-3.  **un dossier `styles` **: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`.
+2.  **un dossier `images`**&nbsp;: ce dossier contiendra toutes les images utilisées pour votre site. Créez un dossier nommé `images` dans votre dossier `site-test`.
+3.  **un dossier `styles`**&nbsp;: ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`.
 4.  **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`.
 
 > **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant   **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web !
diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md
index 311ec1a5d6..ab6e125564 100644
--- a/files/fr/learn/getting_started_with_the_web/index.md
+++ b/files/fr/learn/getting_started_with_the_web/index.md
@@ -58,4 +58,4 @@ Une succession d'opérations complexes, dont vous n'avez pas forcément à vous
 
 ## Voir aussi
 
-[Le Web démystifié ](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g): une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat).
+[Le Web démystifié](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g)&nbsp;: une grande série de vidéos expliquant les fondamentaux du Web, visant à parfaire des débutants dans le développement Web. Créée par [Jérémie Patonnier](https://twitter.com/JeremiePat).
diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
index a582609752..7b45872eec 100644
--- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -20,8 +20,8 @@ Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pou
 ## Quels outils utilisent les professionnels ?
 
 - **Un ordinateur**. Ça peut sembler évident, mais certains d'entre vous lisent cet article depuis leur téléphone ou un terminal de bibliothèque. Pour du développement web sérieux, il est préférable d'investir dans un ordinateur de bureau tournant sous Linux, Mac ou Windows.
-- **Un éditeur de texte**, pour y écrire du code. Cela peut être un éditeur gratuit (ex : [Visual Studio Code, ](https://code.visualstudio.com/)[Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.
-- **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer et ](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie)[Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
+- **Un éditeur de texte**, pour y écrire du code. Cela peut être un éditeur gratuit (ex : [Visual Studio Code](https://code.visualstudio.com/), [Atom,](https://atom.io/) [Sublime Text](https://www.sublimetext.com/) ou [Notepad++](https://notepad-plus-plus.org/)) ou un éditeur hybride ([Dreamweaver](http://www.adobe.com/products/dreamweaver.html)). Les éditeurs de documents Office ne sont pas adaptés à cette utilisation, car ils reposent sur des éléments cachés qui interfèrent avec les moteurs de rendu utilisés par les navigateurs web.
+- **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) et [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10).
 - **Un éditeur graphique**, comme [GIMP](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) pour réaliser les images de vos pages web.
 - **Un système de contrôle de versions**, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, [Git](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), fondé sur Git, est également très populaire**.**
 - **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs  ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/).
@@ -35,7 +35,7 @@ Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer
 
 ### Installer un éditeur de texte
 
-Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et[ ](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29)macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut.
+Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut.
 
 Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/),  qui est un éditeur libre offrant des aperçus en direct et des conseils de code.
 
diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
index c1cde8396b..c921163441 100644
--- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -111,7 +111,7 @@ let myVariable = 'Bob';
 myVariable = 'Étienne';
 ```
 
-Notez que les variables peuvent contenir des[ types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) :
+Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) :
 
 <table class="standard-table">
   <thead>
@@ -392,7 +392,7 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant
 
 5.  Sauvegardez tous les fichiers puis chargez `index.html` dans le navigateur. Maintenant, si vous cliquez sur l'image, elle doit changer pour l'autre !
 
-Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick `de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :
+Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick` de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué :
 
 1.  nous récupèrons la valeur de l'attribut `src` de l'image.
 2.  nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale :
diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
index d238ffeb25..3e684306e0 100644
--- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -87,7 +87,7 @@ Pour en savoir plus, voyez [GitHub Pages Help](https://docs.github.com/en/github
 - [Qu'est-ce qu'un serveur web](/fr/docs/Learn/Common_questions/What_is_a_web_server)
 - [Comprendre les noms de domaine](/fr/docs/Learn/Common_questions/What_is_a_domain_name)
 - [Combien ça coûte de faire quelque chose sur le Web ?](/fr/docs/Learn/Common_questions/How_much_does_it_cost)
-- [Deploy a Website ](https://www.codecademy.com/learn/deploy-a-website): un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires.
+- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website)&nbsp;: un bon tutoriel de Codecademy qui va plus un peu plus loin et qui montre quelques techniques supplémentaires.
 - [Hébergement de sites web statiques gratuit ou peu cher](http://alignedleft.com/resources/cheap-web-hosting), un billet en anglais par Scott Murray qui permet d'avoir une meilleure idée des services disponibles.
 
 {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_JavaScript", "Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web","Apprendre/Commencer_avec_le_web")}}
diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
index 68bdbac865..82dda020c3 100644
--- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -22,7 +22,7 @@ Téléchargez le html d'abords, puis le CSS et le JavaScript nécessaires à son
 
 ### Réduisez le nombre de fichiers
 
-Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP ](/en/HTTP "https://developer.mozilla.org/en/HTTP")nécessaire pour télécharger une page.
+Réduire le nombre de fichiers référencés dans une page web diminue le nombre de connexions [HTTP](/en/HTTP "https://developer.mozilla.org/en/HTTP") nécessaire pour télécharger une page.
 
 - Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/).
 - Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php).
diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md
index e4658b76de..4e494f5e2d 100644
--- a/files/fr/learn/html/howto/use_data_attributes/index.md
+++ b/files/fr/learn/html/howto/use_data_attributes/index.md
@@ -63,7 +63,7 @@ article[data-columns='4'] {
 }
 ```
 
-Tout cela est visible dans l'exemple[ JSBin](https://jsbin.com/ujiday/2/edit).
+Tout cela est visible dans l'exemple [JSBin](https://jsbin.com/ujiday/2/edit).
 
 Les attributs data peuvent aussi être stockés pour inclure des informations qui changent constamment, telles que les cores dans un jeu. L'utilisation des sélecteurs CSS et de l'accès par le JavaScript permettent ici de créer des effets sympas sans avoir à écrire vos propres routines d'affichage. Regardez cet exemple de [capture vidéo d'écran](https://www.youtube.com/watch?v=On_WyUB1gOk) où sont utilisés les contenus générés et les transitions CSS ([exemple JSBin](https://jsbin.com/atawaz/3/edit)).
 
diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md
index 9cb2a9e77e..fc00b9925e 100644
--- a/files/fr/learn/html/index.md
+++ b/files/fr/learn/html/index.md
@@ -20,7 +20,7 @@ original_slug: Apprendre/HTML
 L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :
 
 - les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels).
-- le[ JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).
+- le [JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore).
 
 Avant de commencer ce sujet, vous devriez avoir au moins une connaissance de base de l'utilisation des ordinateurs et de l'utilisation passive du Web (c'est-à-dire juste le regarder, de consommer le contenu). Vous devriez avoir un environnement de travail de base tel que précisé dans [Installer les outils de base](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software), et comprendre comment créer et gérer les fichiers,comme détaillé dans [Gérer les fichiers](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie de notre module [Commencer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) dédié aux débutants.
 
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 4640bbfe99..7882566979 100644
--- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -17,7 +17,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting
 ---
 {{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}
 
-Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
+Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
 
 <table class="standard-table">
   <tbody>
diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 0ec412de20..7883e57b89 100644
--- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -100,7 +100,7 @@ C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec u
 
 ### Liens de niveau bloc
 
-Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc ](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`.
+Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`.
 
 ```html
 <a href="https://www.mozilla.org/fr/">
@@ -201,7 +201,7 @@ Regardons un exemple particulier :
 </a></p>
 ```
 
-**Mauvais** texte de lien&nbsp;: [Cliquer ici ](https://firefox.com/)pour télécharger Firefox
+**Mauvais** texte de lien&nbsp;: [Cliquer ici](https://firefox.com/) pour télécharger Firefox
 
 ```html
 <p><a href="https://firefox.com/">
diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md
index 499393a774..f30e1ee88b 100644
--- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md
@@ -74,7 +74,7 @@ HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de ma
 
 Voici le moment venu d'étudier le caractère permissif du code HTML.
 
-1.  Primo, télécharchez notre démo [debug-example ](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html)et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**).
+1.  Primo, télécharchez notre démo [debug-example](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**).
 2.  Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :![Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. ](fr-html-errone.png)
 3.  Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) :
 
diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
index d320dd8741..47adb3bded 100644
--- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -78,7 +78,7 @@ L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaiteme
 
 C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?
 
-> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards ](https://fr.wikipedia.org/wiki/Population_mondiale)d'habitants).
+> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) d'habitants).
 
 Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure).
 
@@ -281,7 +281,7 @@ Vous devriez avoir maintenant une meilleure idée de la façon de structurer une
 
 ## Voir aussi
 
-- [Using HTML sections and outlines ](/fr/docs/Web/HTML/Element/Heading_Elements): Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.
+- [Using HTML sections and outlines](/fr/docs/Web/HTML/Element/Heading_Elements)&nbsp;: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.
 
 {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}
 
diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md
index e8f5daa255..dc05434973 100644
--- a/files/fr/learn/html/introduction_to_html/index.md
+++ b/files/fr/learn/html/introduction_to_html/index.md
@@ -37,7 +37,7 @@ Ce module contient les articles suivants vous permettant de parcourir toute la t
 - [Créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
   - : Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.
 - [La mise en forme avancée du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting)
-  - : Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
+  - : Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
 - [La structure d'un document et d'un site web](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
   - : De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.
 - [Déboguer du code HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML)
diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
index ef0939e769..ab1dce1e31 100644
--- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -92,7 +92,7 @@ Le code au-dessus vous donnera, à peu prés, le résultat suivant :
 
 > **Note :** Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même.
 
-> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le  [code source ](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).)
+> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).)
 
 ### Texte alternatif
 
@@ -120,7 +120,7 @@ Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend
 
 - **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire.
 - **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* `alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement `alt=""`.
-- **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas.
+- **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas.
 - **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple,  [utilisez CSS](/fr/docs/Web/CSS/text-shadow)  pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut  `alt` .
 
 Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile.
@@ -151,7 +151,7 @@ De toutes manières, vous ne devez pas altérer la taille de vos images avec les
 
 ### Titre d'images
 
-Comme décrit dans le chapitre  [Création d'hyperliens ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
+Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci :
 
 ```html
 <img src="images/dinosaur.jpg"
diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md
index f48a40fb08..62036f5f33 100644
--- a/files/fr/learn/html/multimedia_and_embedding/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/index.md
@@ -40,7 +40,7 @@ Ce module contient les articles suivants, qui vous guideront à travers les fond
   - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs,  enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens.
 - [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies)
   - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière.
-- [Ajouter des images vectorielles sur le Web ](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web)
+- [Ajouter des images vectorielles sur le Web](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web)
   - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web.
 - [Images adaptatives](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_à_une_page_web)
   - : Dans cet article, nous allons découvrir le concept d'images adaptatives — des images qui fonctionnent bien sur des appareils dont les tailles d'écran, les résolutions et autres caractéristiques sont très différentes — et examiner les outils fournis par HTML pour aider à les mettre en œuvre. Cela permet d'améliorer les performances des différents appareils. Les images adaptatives ne sont qu'une partie du [responsive design](/fr/docs/Apprendre/CSS/CSS_layout/Responsive_Design), un futur sujet CSS que vous pourrez apprendre.
diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index c0b0014f29..b2cc02ff0a 100644
--- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -268,7 +268,7 @@ L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être
 
 #### Toujours utiliser l'attribut  `sandbox`
 
-Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox ](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>)(_bac à sable_).
+Pour minimiser la possibilité que des attaquants commettent des actions néfastes  sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il  fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_).
 
 Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent.
 
@@ -336,7 +336,7 @@ Il était une fois des greffons qui s'étaient rendus indispensables sur le Web.
 **Mettez‑vous à portée de tout le monde**. Tout le monde a un navigateur, mais les greffons sont de plus en plus rares, surtout chez les utilisateurs mobiles. Puisque le Web est largement utilisable sans greffons, les gens préfèront aller sur les sites de vos concurrents plutôt que d'installer un greffon.
 
 - **Offrez-vous un répit avec les [migraines d'accessibilités supplémentaires](http://webaim.org/techniques/flash/) qui proviennent de Flash et des autres greffons.**
-- **Restez à l'écart des risques supplémentaires en matière de sécurité.** Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)[ Flash.](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso)
+- **Restez à l'écart des risques supplémentaires en matière de sécurité.** Adobe Flash est [notoirement](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) non‑sûr[,](http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53) même avec ses innombrables rustines. En 2015, Alex Stamos, chef de la sécurité chez Facebook, a même [demandé qu'Adobe arrête](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso) [Flash](http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso):
 
 Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("JavaScript")}} peuvent facilement faire le travail pour vous sans besoin d'applets Java ou d'une technologie ActiveX/BHO dépassée. Au lieu de compter sur Adobe Flash, utilisez la [vidéo HTML5](/fr/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage) pour vos besoins en médias, [SVG](/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage) pour les graphiques vectoriels et [Canvas](/fr/docs/Web/API/Canvas_API/Tutorial) pour les images et animations complexes. [Peter Elst écrivait déjà il y a quelques années](https://plus.google.com/+PeterElst/posts/P5t4pFhptvp) qu'Adobe Flash est rarement le bon outil pour le travail, sauf pour les jeux spécialisés et les applications d'affaires. Quant à ActiveX, même le navigateur{{glossary("Microsoft Edge", "Edge")}} de Microsoft ne le prend plus en charge.
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
index 1729cdf87b..42f69234e8 100644
--- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -73,7 +73,7 @@ Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'a
 
 ## Comment créer des images adaptatives ?
 
-Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils ](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/)que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.
+Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir.
 
 ### Commutations de résolution : tailles différentes
 
diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 98fc50817c..8d4e4c5fdf 100644
--- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -75,7 +75,7 @@ Les fonctionnalités de ce code sont :
 - {{htmlattrxref("src","video")}}
   - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer.  Cela fonctionne de la même manière.
 - {{htmlattrxref("controls","video")}}
-  - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut  `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript ](/fr/docs/Web/API/HTMLMediaElement)adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
+  - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut  `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume.
 - Le paragraphe dans la balise `<video>`
   - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>` , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise.
 
@@ -165,7 +165,7 @@ Voici les nouvelles fonctionnalités :
     - `"auto"` : mettre le fichier média dans un tampon
     - `"metadata"` : ne mettre que les métadonnées dans le tampon
 
-Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [ code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !
+Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster !
 
 ### L'élément  \<audio>
 
@@ -183,7 +183,7 @@ Vous verrez quelque chose de ce genre dans un navigateur :
 
 ![A simple audio player with a play button, timer, volume control, and progress bar](audio-player.png)
 
-> **Note :** Vous pouver [lancer la démo de l'audio en direct ](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html)sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
+> **Note :** Vous pouver [lancer la démo de l'audio en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
 
 Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 :
 
@@ -254,7 +254,7 @@ Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vid
 
 Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo,  MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez !
 
-Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos  [échantillons audio et vidéo ](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content)pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.
+Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence.
 
 Il vous faudra :
 
@@ -276,8 +276,8 @@ Emballez, c'est pesé ! Nous espérons que vous avez pris plaisir avec ces pages
 - {{htmlelement("video")}}
 - {{htmlelement("source")}}
 - {{htmlelement("track")}}
-- [ Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)
-- [Intégration Audio et Vidéo ](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
+- [Ajouter des légendes et sous-titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)
+- [Intégration Audio et Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery)&nbsp;: de nombreux détails sur la manière de mettre de la vidéo et audio sur le web avec HTML et JavaScript.
 - [Manipuler l'Audio et la Vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): de nombreux détails pour manipuler l'audio et la vidéo avec JavaScript (par ex. en ajoutant des filtres).
 - Options automatisées pour la [traduction multimédia](http://www.inwhatlanguage.com/blog/translate-video-audio/).
 
diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md
index 5d8b0ecc45..afdc832c15 100644
--- a/files/fr/learn/html/tables/basics/index.md
+++ b/files/fr/learn/html/tables/basics/index.md
@@ -545,7 +545,7 @@ Recréez le tableau en suivant les étapes ci-dessous.
 7.  Ajoutez une couleur de fond différente et une bordure pour la sixième colonne, pour signifier que c'est une journée spéciale et qu'elle enseigne à une nouvelle classe. Les valeurs de votre attribut `style` sont `background-color:#DCC48E; border:4px solid #C1437A;`
 8.  Les deux derniers jours sont libres, alors pas de couleur de fond mais une largeur à spécifier ; la valeur de votre attribut `style` est `width: 42px;`
 
-Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à[ voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub .
+Voyez comment vous lisez avec l'exemple. Si vous êtes coincé ou souhaitez vérifier votre travail, vous pouvez trouver notre version [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) (à [voir aussi](http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html) directement) sur GitHub .
 
 ## Résumé
 
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
index c179da9e18..890896be61 100644
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
+++ b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
@@ -373,7 +373,7 @@ Assez avec la théorie ! Construisons votre propre exemple personnel de `request
     ```
 
 4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
-5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div> ; `à l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
+5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
 
     ```js
     const spinner = document.querySelector('div');
diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
index 96c62c5ff3..3fdd18cb03 100644
--- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -64,7 +64,7 @@ Pour commencer, mettons en place une fonction de base.
 > **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables.
 
 1.  Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript.
-2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script> `:
+2.  Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>`&nbsp;:
 
     ```js
     function displayMessage() {
diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md
index cfa97937f9..433c2c816b 100644
--- a/files/fr/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md
@@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) {
 }
 ```
 
-Dans ce cas, la condition dans le `if(...) `sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
+Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR :
 
 ```js
 if (x === 5 || x === 7 || x === 10 ||x === 20) {
@@ -360,7 +360,7 @@ function setWeather() {
 
 {{ EmbedLiveSample('Un_exemple_de_switch', '100%', 100) }}
 
-> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html)ici aussi.)
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html) ici aussi.)
 
 ## Opérateur ternaire
 
@@ -411,7 +411,7 @@ Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir
 
 Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées.
 
-> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution ](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html)ici aussi.)
+> **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.)
 
 ## Apprentissage actif : un calendrier simple
 
diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md
index 1853289307..c2037818c7 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.md
+++ b/files/fr/learn/javascript/building_blocks/events/index.md
@@ -156,7 +156,7 @@ function bgChange() {
 }
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
 
 La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
 
@@ -195,7 +195,7 @@ function bgChange() {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
 Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci:
 
@@ -271,7 +271,7 @@ function bgChange(e) {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
+> **Note :** Vous trouverez le [code source complet](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
 Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
 
@@ -396,7 +396,7 @@ form.onsubmit = function(e) {
 
 ### Le bouillonnement et la capture
 
-Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous.
+Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) dans un autre). C'est également disponible en live ci-dessous.
 
 ```html hidden
 <!DOCTYPE html>
@@ -543,7 +543,7 @@ video.onclick = function(e) {
 };
 ```
 
-Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
+Vous pouvez faire une copie locale du [code source show-video-box.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
 
 > **Note :** Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
 
diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index afd792fac3..5a5deddae4 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -30,7 +30,7 @@ Les **fonctions** sont un autre concept essentiel de la programmation, qui perme
 
 En JavaScript, vous trouverez des fonctions partout. En fait, nous avons utilisé des fonctions depuis le début du cours ; nous n'en avons simplement pas beaucoup parlé. Toutefois, il est maintenant temps de parler des fonctions de manière explicite et d'explorer réellement leur syntaxe.
 
-Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)ou[ do...while ](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else ](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction.
+Presque à chaque fois que vous utilisez une structure de JavaScript qui utilise une paire de parenthèses — `()` — et que vous n'utilisez **pas** une structure usuelle et intégrée du langage telle que les boucles [for](/fr/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while) ou [do...while](/fr/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), ou une déclaration [if...else](/fr/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), vous utilisez une fonction.
 
 ## Les fonctions intégrées du navigateur
 
@@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc
 
 ## Fonctions personnalisées
 
-Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html ](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html)tiré de l'article [les boucles dans le code ](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)(voir aussi le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
+Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça :
 
 ```js
 function draw() {
diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
index 78d6530000..e95ecbc4a2 100644
--- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md
@@ -40,7 +40,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav
 
 ## Point de départ
 
-Pour réaliser cette évaluation, vous devez récupérer le fichier[ ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
+Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur.
 
 Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou  [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML.
 
diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md
index bb9e1f50da..ddf8519680 100644
--- a/files/fr/learn/javascript/building_blocks/index.md
+++ b/files/fr/learn/javascript/building_blocks/index.md
@@ -19,7 +19,7 @@ Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités cle
 
 ## Prérequis
 
-Avant de commencer ce module, vous devriez connaître les bases du [HTML ](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML)et du [CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps)
+Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et du [CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) et avoir suivi le module précédent, [JavaScript Premiers Pas.](/fr/docs/Learn/JavaScript/First_steps)
 
 > **Note :** Si vous travaillez depuis un ordinateur, une tablette ou depuis un autre appareil sur lequel vous ne pouvez pas créer vos propres fichiers, ce n'est pas un problème, vous pourrez essayer la plupart des exemples en lignes grâce à des outils comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) .
 
diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 9a367672be..7adab40ec3 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -240,7 +240,7 @@ Cela nous donne la sortie suivante :
 
 {{ EmbedLiveSample('Sortie', '100%', 60) }}
 
-> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et[ le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
+> **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
 Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
@@ -280,7 +280,7 @@ for (let i = 0; i < cats.length; i++) {
 
 ## Quitter une boucle avec break
 
-Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch ](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch): lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
+Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch)&nbsp;: lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle.
 
 C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit.
 
@@ -370,7 +370,7 @@ bouton.addEventListener('click', function() {
 
     1.  Nous commençons le compteur à `0`, exécutons la boucle jusqu'à ce que le compteur ne soit plus inférieur à `contacts.length`, et incrémentons `i` par 1 après chaque itération de la boucle.
     2.  À l'intérieur de la boucle, nous divisons d'abord le contact actuel (`contacts[i]`) au caractère deux-points et stockons les deux valeurs résultantes dans un tableau appelé `splitContact`.
-    3.  Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0] `(le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle.
+    3.  Nous utilisons ensuite une instruction conditionnelle pour tester si `splitContact[0]` (le nom du contact) est égal au `searchName` entré. Si c'est le cas, nous introduisons une `string / chaîne de caractère` dans le paragraphe pour indiquer quel est le numéro du contact et utiliser `break` pour terminer la boucle.
 
 5.  Si le nom du contact ne correspond pas à la recherche entrée, le texte du paragraphe est défini sur "Contact not found." et la boucle continue son itération.
 
@@ -440,9 +440,9 @@ Ici la sortie :
 {{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
 
 1.  Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois.
-2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i), ](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt)[, ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt)puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor() ](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor)fait au nombre auquel il est passé).
+2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt0, puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor) fait au nombre auquel il est passé).
 3.  Si la racine carrée et la racine carrée arrondie ne sont pas égales les unes aux autres (`! ==`), cela signifie que la racine carrée n'est pas un entier, donc cela ne nous intéresse pas. Dans un tel cas, nous utilisons l'instruction `continue` pour passer à l'itération de la boucle suivante sans enregistrer le numéro n'importe où.
-4.  Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i `actuelle plus un espace sur la fin du contenu du paragraphe.
+4.  Si la racine carrée est un entier, nous passons complètement le bloc if pour que l'instruction `continue` ne soit pas exécutée; à la place, nous concaténons la valeur `i` actuelle plus un espace sur la fin du contenu du paragraphe.
 
 > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (aussi [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
@@ -459,7 +459,7 @@ D'abord, regardons la boucle [while](/fr/docs/Web/JavaScript/Reference/Instructi
       final-expression
     }
 
-Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while `au lieu de `for`.
+Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter — plutôt que ces deux éléments soient inclus dans les parenthèses. La condition de sortie est incluse dans les parenthèses, précédées du mot-clé `while` au lieu de `for`.
 
 Les mêmes trois éléments sont toujours présents, et ils sont toujours définis dans le même ordre que dans la boucle for - cela est logique, car vous devez toujours définir un initialiseur avant de pouvoir vérifier s'il a atteint la condition de sortie ; la condition finale est ensuite exécutée après l'exécution du code à l'intérieur de la boucle (une itération a été effectuée), ce qui ne se produira que si la condition de sortie n'a pas encore été atteinte.
 
@@ -481,7 +481,7 @@ while (i < cats.length) {
 
 > **Note :** Cela fonctionne toujours comme prévu regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/while.html) le code complet).
 
-La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
+La boucle [do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while) est très similaire, mais dénote une variation par rapport à la structure de la boucle while :
 
     initializer
     do {
@@ -490,11 +490,11 @@ La boucle[ do...while](/fr/docs/Web/JavaScript/Reference/Instructions/do...while
       final-expression
     } while (exit-condition)
 
-Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do `précède directement les accolades contenant le code à exécuter et l'expression finale.
+Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé `do` précède directement les accolades contenant le code à exécuter et l'expression finale.
 
 Le différentiateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé `while`. Dans une boucle `do ... while`, le code à l'intérieur des accolades est toujours exécuté une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté ).
 
-Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while `:
+Réécrivons notre exemple de listing de chat pour utiliser une boucle `do ... while`&nbsp;:
 
 ```js
 let i = 0;
@@ -657,7 +657,7 @@ Nous vous avons déjà fourni les éléments suivants :
 - `refused.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `refused.textContent`.
 - `admitted.textContent +=` — le début de la ligne qui va concaténer un élément à la fin du `admitted.textContent`.
 
-Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères ](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile)pour obtenir de l'aide.
+Question bonus — après avoir accompli les tâches ci-dessus, il vous restera deux listes de noms séparées par des virgules, mais elles seront mal présentées— il y aura des virgules à la fin de chacune d'elles. Pouvez-vous faire en sorte d'écrire des lignes de code qui coupent les dernières virgules dans chacune d'elles, et ajoute un arrêt total à la fin ? Jetez un oeil à l'article [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile) pour obtenir de l'aide.
 
 Si vous faites une erreur, vous pourrez toujours ré-initialiser l'exemple avec le bouton "Reset". Si vous êtes vraiment bloqué, appuyez sur le bouton "Show solution" pour voir une solution.
 
@@ -830,7 +830,7 @@ Nous recommandons `for`, au moins pour commencer, car elle est probablement la p
 
 Cet article vous a révélé les concepts basiques et les différentes options disponibles pour créer des boucles en JavaScript. Vous devriez à présent être en mesure de comprendre en quoi les boucles constituent un bon mécanisme lorsqu'il s'agit de répéter une action dans le code, et vous devez être impatient de les utiliser dans vos propres exemples !
 
-S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter ](/fr/Apprendre#Nous_contacter)pour demander de l'aide.
+S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article ou à [nous contacter](/fr/Apprendre#Nous_contacter) pour demander de l'aide.
 
 ## Voir aussi
 
diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md
index c93c4c94a6..f801f4c918 100644
--- a/files/fr/learn/javascript/building_blocks/return_values/index.md
+++ b/files/fr/learn/javascript/building_blocks/return_values/index.md
@@ -58,7 +58,7 @@ Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous
 
 Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible.
 
-Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [displayMessage() ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
+Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout !
 
 Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme.
 
diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
index b547ca5265..9dd6990199 100644
--- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md
@@ -87,8 +87,8 @@ Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permet
 En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) :
 
 - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
-- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest ](/fr/docs/Web/API/XMLHttpRequest)et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
-- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas ](/fr/docs/Web/API/Canvas_API)et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
+- **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics).
 - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs).
 - **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)).
 - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage).
diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
index 4964b628aa..8d609a1857 100644
--- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md
@@ -266,7 +266,7 @@ Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une
 
 Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses.
 
-Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les[ outils de développement et la console JavaScript ](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs)et entrez la ligne suivante :
+Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante :
 
 ```js
 checkGuess();
@@ -280,7 +280,7 @@ Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir
 
 Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre.
 
-Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les[ outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
+Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous :
 
 ```html hidden
 <!DOCTYPE html>
@@ -612,7 +612,7 @@ Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui
 let guessField = document.querySelector('.guessField');
 ```
 
-Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS ](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs)qui sélectionne l'élément auquel vous voulez faire référence.
+Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence.
 
 Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte :
 
@@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e
 
 ## C'est fini pour le moment...
 
-Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou[ jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
+Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html)
 
 {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md
index e92f6f357f..38cb54ddef 100644
--- a/files/fr/learn/javascript/first_steps/arrays/index.md
+++ b/files/fr/learn/javascript/first_steps/arrays/index.md
@@ -226,7 +226,7 @@ Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résu
 
 1.  Commencer la boucle à l'élément 0 du tableau.
 2.  Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément  7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6).
-3.  Afficher chaque élément sur la console de l'explorateur avec` console.log()`.
+3.  Afficher chaque élément sur la console de l'explorateur avec `console.log()`.
 
 ## Quelques méthodes utiles pour les tableaux
 
@@ -337,7 +337,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous
 Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici :
 
 1.  Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`.
-2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [ boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
+2.  Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui  n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`.
 3.  Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article.
 4.  En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings).
 5.  Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant  à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-).
diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
index e8d8789c62..c24a27df3d 100644
--- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md
@@ -66,7 +66,7 @@ Installation basique :
 
 Variables initiales et fonctions :
 
-1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray() `qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
+1.  Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient.
 2.  Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`:
 
     1.  Stockez la première longue chaîne de caractères (string) dans la variable `storyText`.
@@ -92,7 +92,7 @@ Compléter la fonction `result()` :
 
     1.  Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades.
     2.  Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`.
-    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez` 'centigrade'`.
+    3.  Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`.
     4.  Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`.
 
 6.  Enfin, dans l'antépénultième ligne de la fonction, faites en sorte que la propriété `textContent` de la variable `story` (qui référence le paragraphe) soit égale à `newStory`.
diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md
index beaac08ec1..7ee4808221 100644
--- a/files/fr/learn/javascript/first_steps/strings/index.md
+++ b/files/fr/learn/javascript/first_steps/strings/index.md
@@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p
 
 ## Chaînes de caractères — les bases
 
-À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur, ](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools)comme vous préférez).
+À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez  [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez).
 
 ```html hidden
 <!DOCTYPE html>
diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 0ff7cd44d7..8575a06e76 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -254,7 +254,7 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l
 browserType.replace('moz','van');
 ```
 
-À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire :` browserType = browserType.replace('moz','van');`
+À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`.
 
 ## Apprendre en pratiquant
 
diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
index 072084dc21..a57bb397aa 100644
--- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md
@@ -108,7 +108,7 @@ Elles se divisent généralement en deux catégories :
 - l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM.
 - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte.
 - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/).
-- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo ](http://chrisdavidmills.github.io/snapshot/)pour vous faire une idée).
+- [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée).
 
 > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs.
 
@@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan
 
 Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**.
 
-Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article[ Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
+Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side).
 
 ### Code dynamique contre code statique
 
diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md
index 3204451a86..78b6610785 100644
--- a/files/fr/learn/javascript/objects/json/index.md
+++ b/files/fr/learn/javascript/objects/json/index.md
@@ -356,7 +356,7 @@ Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON da
 - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON)
 - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest)
 - [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
-- [Les méthodes de requêtes HTTP ](/fr/docs/Web/HTTP/Methods)
+- [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods)
 - [Le site web officiel  avec un lien vers les normes de l' ECMA](http://json.org)
 
 {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md
index 858880b11b..423894d001 100644
--- a/files/fr/learn/javascript/objects/object_building_practice/index.md
+++ b/files/fr/learn/javascript/objects/object_building_practice/index.md
@@ -53,7 +53,7 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p
 
 ![](bouncing-balls.png)
 
-Cet exemple utilise l'[API Canvas ](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
+Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame)  pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**).
 
 Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement :
 
@@ -132,9 +132,9 @@ En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur
 - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle.
 - Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont :
 
-  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y `de notre balle.
+  - Les positions `x` et `y` du centre de l'arc — nous specifions donc les propriétés `x` et `y` de notre balle.
   - Le rayon de l'arc — nous specifions la propriété `size` de notre balle.
-  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI `qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
+  - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degrés et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement  vous êtes obligés  de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement  `1 * PI`, vous auriez eu un demi-cercle (180 degrés).
 
 - En dernière position nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`.
 
diff --git a/files/fr/learn/javascript/objects/object_prototypes/index.md b/files/fr/learn/javascript/objects/object_prototypes/index.md
index 0db0e6d420..5b8080de3c 100644
--- a/files/fr/learn/javascript/objects/object_prototypes/index.md
+++ b/files/fr/learn/javascript/objects/object_prototypes/index.md
@@ -107,15 +107,15 @@ Ainsi [`Object.prototype.toString()`](/fr/docs/Web/JavaScript/Reference/Global_O
 
 On observe que plusieurs méthodes sont définies au niveau de l'attribut `prototype` d'`Object`, qui seront alors disponibles pour les objets qui héritent d'`Object`, comme nous l'avons vu plus haut.
 
-Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et ` Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
+Vous verrez qu'il existe plein d'exemples de chaine de prototypage dans JavaScript. Vous pouvez essayer de trouver les méthodes et les attributs définis dans les attributs `prototype` des objets globaux comme [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number), et `Array`. Chacun de ces objets possède des éléments au sein de leur attribut prototype. Dès lors que l'on crée une chaine de caractères, comme celle-ci&nbsp;:
 
 ```js
 let maChaine = 'Ceci est ma chaine de caractères.';
 ```
 
-`maChaine `possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
+`maChaine ` possède aussitôt plusieurs méthodes utiles pour manipuler les chaines de caractères telles que [`split()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace)…
 
-> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype `est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
+> **Attention :** L'attribut `prototype` est un des éléments JavaScript qui peut le plus prêter à confusion. On pourrait penser qu'il s'agit du prototype objet de l'objet courant mais ça ne l'est pas (on peut y accéder via `__proto__`). L'attribut `prototype` est un attribut qui contient un objet où l'on définit les éléments dont on va pouvoir hériter.
 
 ## Revenons sur create()
 
diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md
index 94df39bf08..6752286d3d 100644
--- a/files/fr/learn/server-side/django/admin_site/index.md
+++ b/files/fr/learn/server-side/django/admin_site/index.md
@@ -132,7 +132,7 @@ Nous avons terminé cette étape ! Vous savez comment configurer et utiliser le
 
 La cadriciel Django réalise une excellente assistance avec la création d'un site d'administration de base en utilisant les données des enregistrements effectués :
 
-- Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode` __str__()`, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements.
+- Pour chaque modèle, les enregistrements sont identifiés par le résultat de la méthode `__str__()`, et les détails sont accessibles par des vues dédiées. Par défaut, ces vues et formulaires disposent d'un menu en haut et vous pouvez opérer des opérations de suppressions en bloc en sélectionnant les enregistrements.
 - Le détail de chaque modèle est contenu dans un formulaire où chaque champ est affiché verticalement dans l'ordre de déclaration de ces derniers dans le modèle d'objet.
 
 mais vous avez la possibilité de personnaliser le comportement du site d'administration. Vous allez pouvoir notamment faire :
diff --git a/files/fr/learn/server-side/django/development_environment/index.md b/files/fr/learn/server-side/django/development_environment/index.md
index e412441822..4332c52303 100644
--- a/files/fr/learn/server-side/django/development_environment/index.md
+++ b/files/fr/learn/server-side/django/development_environment/index.md
@@ -152,7 +152,7 @@ pip3 list
 
 ### Windows 10
 
-Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil _pip3_) sur[ python.org](https://www.python.org/):
+Windows n'inclut pas Python par défaut, mais vous pouvez facilement l'installer (ainsi que l'outil _pip3_) sur [python.org](https://www.python.org/)&nbsp;:
 
 1.  Téléchargez l'installeur requis :
 
@@ -203,7 +203,7 @@ export PROJECT_HOME=$HOME/Devel
 source /usr/local/bin/virtualenvwrapper.sh
 ```
 
-> **Note :** Les variables `VIRTUALENVWRAPPER_PYTHON` et `VIRTUALENVWRAPPER_VIRTUALENV_ARGS `pointent vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
+> **Note :** Les variables `VIRTUALENVWRAPPER_PYTHON` et `VIRTUALENVWRAPPER_VIRTUALENV_ARGS` pointent vers l'emplacement d'installation par défaut de Python3, et `source /usr/local/bin/virtualenvwrapper.sh` pointe vers l'emplacement par défaut du script `virtualenvwrapper.sh`. Si le _virtualenv_ ne fonctionne pas quand vous le testez, vérifiez que Python et le script sont bien aux emplacements attendus (puis modifiez le fichier de configuration en conséquence).
 >
 > Vous pourrez trouver les bons emplacements de votre système en utilisant les commandes `which virtualenvwrapper.sh` et `which python3`.
 
@@ -338,7 +338,7 @@ py -3 -m django --version
 > py -m django --version
 > ```
 >
-> Dans Windows, les scripts _Python 3_ sont exécutés en préfixant la commande avec `py -3`, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur `-3 `si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est `python3.`
+> Dans Windows, les scripts _Python 3_ sont exécutés en préfixant la commande avec `py -3`, bien que ceci puisse varier suivant votre installation. Essayer en enlevant le modificateur `-3` si vous rencontrez un problème avec la commande. Dans Linux/macOS, la commande est `python3.`
 
 > **Attention :** Le reste de ce **module** utilise les commandes _Linux_ pour invoquer Python 3 (`python3`) . . Si vous travaillez sous _Windows_ , remplacez simplement ce préfixe avec : `py -3`
 
diff --git a/files/fr/learn/server-side/django/index.md b/files/fr/learn/server-side/django/index.md
index 12d5ec6fe8..2a3273d3b3 100644
--- a/files/fr/learn/server-side/django/index.md
+++ b/files/fr/learn/server-side/django/index.md
@@ -18,7 +18,7 @@ Aucune connaissance sur ce framework n'est requise. Il vous faudra seulement com
 
 Une connaissance générale en programmation et plus précisement en [Python](/fr/docs/Glossaire/Python) est recommandée, mais pas nécessaire pour comprendre la majeure partie de ce module.
 
-> **Note :** Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du[ Python pour les non-programmeurs](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) dans la documentation sur le site officiel de Python: python.org).
+> **Note :** Python est un des languages les plus faciles à apprendre, lire et comprendre pour les novices. Ceci dit, si vous voulez mieux comprendre ce module, il existe beaucoup de livres gratuits et de tutoriaux sur internet (les nouveaux programmeurs pourraient être intéressés par la page du [Python pour les non-programmeurs](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) dans la documentation sur le site officiel de Python: python.org).
 
 ## Guides
 
diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md
index 57196c0c2c..d5005c4b8e 100644
--- a/files/fr/learn/server-side/django/introduction/index.md
+++ b/files/fr/learn/server-side/django/introduction/index.md
@@ -45,7 +45,7 @@ Django est un framework Python de haut niveau, permettant un développement rapi
 Django vous aide à écrire une application qui est:
 
 - Complète
-  - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète ](https://docs.djangoproject.com/en/2.0/)et à jour.
+  - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète](https://docs.djangoproject.com/en/2.0/) et à jour.
 - Polyvalent
 
   - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django!
diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md
index ee078309c4..97aefd906c 100644
--- a/files/fr/learn/server-side/django/models/index.md
+++ b/files/fr/learn/server-side/django/models/index.md
@@ -319,7 +319,7 @@ class Book(models.Model):
 
 Le genre littéraire est une relation n à n (`ManyToManyField`) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère `(ForeignKey`) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres.
 
-La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option` on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.
+La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données.
 
 Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom  `book-detail`, et nous aurons à définir une vue et un gabarit.
 
diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
index f2bb2995a8..9a02d03bdd 100644
--- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md
@@ -71,7 +71,7 @@ Même s'il s'agit d'un sujet extensible, son sujet de *Bibliothèque **locale***
 
 Au fur et à mesure, les codes et commandes à écrire seront fournis. Ils peuvent être copiés et collés à chaque étapes. Il y aura aussi des codes que vous pourrez compléter avec quelques conseils.
 
-Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur[ Github](https://github.com/mdn/django-locallibrary-tutorial) (**Anglais**).
+Si vous êtes coincé, vous pourrez trouver une version totalement développée du site sur [GitHub](https://github.com/mdn/django-locallibrary-tutorial) (**Anglais**).
 
 ## Résumé
 
diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md
index 0c85bdbd06..9cf9f2b4e0 100644
--- a/files/fr/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md
@@ -53,7 +53,7 @@ Cette requête inclut :
 - `POST` data.  Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête.
 - Cookies côté Client.  Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources.
 
-Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response ](/fr/docs/Web/HTTP/Status)indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  `GET` contiendrait la ressource demandée.
+Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête  `GET` contiendrait la ressource demandée.
 
 Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers.
 
diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md
index 4829e2466b..5ea6284730 100644
--- a/files/fr/learn/server-side/first_steps/website_security/index.md
+++ b/files/fr/learn/server-side/first_steps/website_security/index.md
@@ -75,7 +75,7 @@ Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmi
 statement = "SELECT * FROM users WHERE name = '" + userName + "';"
 ```
 
-Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  (`'a';`) qui va complèter la requête d'origine (`' `est le symbole pour délimiter une chaine de texte en SQL).
+Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté  (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL).
 
 ```sql
 SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
@@ -134,7 +134,7 @@ Quelques autres points que vous pouvez mettre en place :
 - Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS).
 - Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant.
 - Tenez vous informé des dernières menaces ([la liste actuelle d'OWASP est ici](/fr/docs/)) et préoccupez vous toujours des vulnerabilités les plus courantes en premier.
-- Utilisez [des outils de recherche de vulnérabilités ](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)).
+- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)).
 - Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire.
 
 Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes.
diff --git a/files/fr/learn/server-side/index.md b/files/fr/learn/server-side/index.md
index c2d8af0aa4..abeb362938 100644
--- a/files/fr/learn/server-side/index.md
+++ b/files/fr/learn/server-side/index.md
@@ -17,7 +17,7 @@ translation_of: Learn/Server-side
 
 Le sujet abordant les sites **web dynamiques / la programmation coté serveur** est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.
 
-La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le [HTML](/fr/docs/Learn/HTML), le [CSS ](/fr/docs/Learn/CSS)et le [JavaScript](/fr/docs/Learn/JavaScript) dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).
+La plupart des sites web utilisent une technologie (frameworks, serveurs, languages, etc.) côté serveur afin d'afficher dynamiquement les différentes informations requises. Par exemple, imaginez combien de produits sont disponibles sur Amazon, et imaginez combien de post ont été publiés sur Facebook depuis son commencement ? Afficher tout ceci en utilisant uniquement des pages 'statiques' aurait été absolument inutile et complétement infernal, au lieu de ça les sites dynamiques utilisent des templates (sorte de page statique servant de 'modèle', programmé en utilisant le [HTML](/fr/docs/Learn/HTML), le [CSS](/fr/docs/Learn/CSS) et le [JavaScript](/fr/docs/Learn/JavaScript) dans lequel on viendra y insérer les informations voulues ; par exemple, chaque page d'article amazon est la même, il s'agit juste d'un template dans lequel viennent se placer les informations du produit sélectionné).
 
 De nos jours, dans le monde du web, apprendre la programmation côté serveur est indispensable.
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
index 2d4e767327..b4830fc154 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md
@@ -285,7 +285,7 @@ Maintenant que nous avons couvers les considérations de l'accessibilité pour l
 
 Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages web, lesquels les examinerons et retournerons une liste de problèmes d'accessibilité présents sur la page. A titre d'exemple :
 
-- [Tenon ](https://tenon.io): une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions.
+- [Tenon](https://tenon.io)&nbsp;: une assez bonne appli en ligne qui traverse le code à une URL fournie et qui retourne les résultats sur les erreurs d'acessibilité comprenant les indicateurs, ds erreurs spécifiques accompagnés des critères WCAG qu'elles affectent, et des suggestion de résolutions.
 - [tota11y](http://khan.github.io/tota11y/) : Un outil d'accessibilité de la Khan Academy qui prend la forme d'une librairie JavaScript que vous attachez à votre page pour apporter plusieurs outils d'accessibilité.
 - [Wave](http://wave.webaim.org/): Un autre outil en ligne de test d'accessibilité qui accepte une adresse web et retourne une utile vue annotée de la page avec les problèmes d'accessibilité surlignés.
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 633912f9a9..d746f9ca35 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -313,7 +313,7 @@ form > #date
 Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme  [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/).
 
 1.  Afin de tester cet exemple, faites une copie locale de [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec `p:first-child`, qui ne fonctionne pas sur les anciennes versions d'IE.
-2.  Maintenant télécharger [MooTools ](http://mootools.net/)et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML.
+2.  Maintenant télécharger [MooTools](http://mootools.net/) et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML.
 3.  Placer le code suivant dans la têtière de votre document HTML, juste avant la balise ouvrante `<style>` :
 
     ```html
@@ -392,11 +392,11 @@ Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut deve
 
 La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site.
 
-Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options ](https://github.com/postcss/autoprefixer#options); pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.
+Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options)&nbsp;; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE  supérieure à la 9.
 
     last 2 versions, ie > 9
 
-Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme [Gulp ](http://gulpjs.com/)ou [Webpack ](https://webpack.github.io/)pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).
+Autoprefixer peut aussi être utilisé dans d'autres cas, plus pratiques — voir [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). Par exemple vous pouvez l'utiliser avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour ajouter automatiquement les préfixes une fois que le développement a été fait. (Expliquer comment cela fonctionne est plutôt au-delà de la portée de cet article).
 
 Vous pouvez également utiliser un plugin pour éditeur de texte comme Atom ou Sublime text. Par exemple, dans Atom :
 
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
index ab222b654f..807f81d444 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md
@@ -248,7 +248,7 @@ Il y a plusieurs fonctionnalités modernes du langage JavaScript décrites dans
 Par exemple :
 
 - Les [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) sont une super nouvelle fonctionnalité pour réaliser des opérations asynchrones et s'assurer que c'est opérations sont complètes avant que le code qui s'appuie sur eux ne soit utiliser pour autre chose. A titre d'exemple, l'[API Fetch](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) (un équivalent moderne de [XMLHTTPRequest](/fr/docs/Web/API/XMLHttpRequest)) utilise les promises pour rapporter les ressources à travers le réseau et s'assurer que la réponse a été retournée avant qu'elles ne soient utilisées (par exemple afficher une image dans un élément {{htmlelement("img")}} ). Elles ne sont pas du tout supportées par IE mais sont supportées par tous les navigateurs modernes.
-- Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des [anonymous functions](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions), ce qui a aussi d'autres avantages (voir [Fonctions Fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). Comme exemple rapide, voir [arrow-function.html ](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html)(voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.
+- Les fonctions fléchées apportent une syntaxe courte, plus convenable pour écrire des [anonymous functions](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions), ce qui a aussi d'autres avantages (voir [Fonctions Fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). Comme exemple rapide, voir [arrow-function.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)). Les fonctions fléchées sont supportées par tous les navigateurs modernes, excepté par IE et Safari.
 - Déclarer [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) en haut de votre code JavaScript l'amène à être décomposé en une liste de règles plus strictes, impliquant que plus d'avertissements et d'erreurs seront retournés, et certaines choses seront rejetées qui auraient normalement été acceptées. C'est probablement une bonne idée d'utiliser le mode stricte, comme il permet une amélioration et une meilleur efficacité du code, bien qu'il ait un support limité/incomplet selon les navigateurs (voir [Le mode strict dans les navigateurs](/fr/docs/Web/JavaScript/Reference/Strict_mode#Le_mode_strict_dans_les_navigateurs)).
 - [Les tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typ%C3%A9s) permettent au code JavaScript d'accéder et de manipuler des données binaires brutes, ce qui est indispensable pour les APIs navigateur par exemple qui commencent à manipuler les streams des données vidéo et audio brutes.
 
@@ -294,7 +294,7 @@ Les librairies JavaScript sont essentiellement une partie externe d'unités de c
 Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) :
 
 - Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. [jQuery](http://jquery.com/) par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs.
-- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et  se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker ](/fr/docs/Web/API/Service_Worker_API)est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles).
+- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et  se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles).
 - Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à [JavaScripting.com/animation](https://www.javascripting.com/animation/).
 - Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI.
 - Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données,  que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery.
diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
index c6846a30ca..8f2e474df0 100644
--- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
+++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md
@@ -197,7 +197,7 @@ Nous couvrirons chacune des autres options plus bas.
 
 Les émulateurs sont essentiellement des programmes qui s'exécutent à l'intérieur de votre ordinateur et simulent des appareils ou des conditions particulières d'appareil d'un certain type, ils vous permettent de faire certains tests plus aisément qu'en ayant à trouver une combinaison de matériels/logiciels à tester.
 
-Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le[ Mode Design Responsive](/fr/docs/Tools/Responsive_Design_Mode) de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans _Safari_ > _Préférences_, et en cochant _Show Develop menu_, puis en choisissant _Develop > Enter Responsive Design Mode_. Chrome propose également quelque chose de similaire : Device mode (voir [Simuler un Appareil Mobile avec le Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/)).
+Un émulateur peut être aussi simple à tester qu'une condition d'appareil. Par exemple, si vous voulez faire quelques tests rapides et sales de la largeur/hauteur de vos media queries pour le responsive design, vous pouvez utiliser le [Mode Design Responsive](/fr/docs/Tools/Responsive_Design_Mode) de Firefox. Safari possède également un mode similaire, qui peut être activé en allant dans _Safari_ > _Préférences_, et en cochant _Show Develop menu_, puis en choisissant _Develop > Enter Responsive Design Mode_. Chrome propose également quelque chose de similaire : Device mode (voir [Simuler un Appareil Mobile avec le Device Mode](https://developers.google.com/web/tools/chrome-devtools/device-mode/)).
 
 Le plus souvent, vous allez devoir installer un émulateur. Les appareils/navigateurs les plus courants que vous allez devoir tester sont les suivants :
 
diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md
index 263030b674..813f0afe66 100644
--- a/files/fr/learn/tools_and_testing/github/index.md
+++ b/files/fr/learn/tools_and_testing/github/index.md
@@ -66,7 +66,7 @@ Notez que les liens ci-après vous amènent à des ressources sur des sites exte
 - [Mastering issues (de GitHub)](https://guides.github.com/features/issues/)
   - : Les _issues_ (problèmes) sont comme un forum pour votre projet GitHub, où chacun peut venir poser des questions et rapporter des problèmes, et vous pouvez gérer les mises à jour (par exemple assigner certaines personnes à la résolution de problèmes, à la clarification de problèmes ou à l'information de la correction de problèmes). Cet article vous donne ce dont vous avez besoin de savoir à propos des _issues_.
 
-> **Note :** Il existe **beaucoup d'autres** choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) et[ Dangit, git!](https://dangitgit.com/)
+> **Note :** Il existe **beaucoup d'autres** choses que vous pouvez faire avec Git et GitHub, mais nous pensons que ce qui précède représente le minimum dont vous aurez besoin pour commencer à utiliser Git efficacement. Au fur et à mesure de votre progression avec Git, vous comprendrez de plus en plus qu'il est facile de faire des erreurs quand on commence à utiliser des commandes plus complexes. Ne vous inquiétez pas, même les développeurs web aguerris pensent que Git est parfois déroutant, et résolvent souvent des problèmes en cherchant des solutions sur internet ou en consultat des sites comme [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) et [Dangit, git!](https://dangitgit.com/)
 
 ## Voir aussi
 
diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
index b52f11de84..5c7a47de2a 100644
--- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
+++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.md
@@ -176,7 +176,7 @@ cd Bureau/projet/src
 
 Notez que si vous commencez le chemin par un slash, vous le rendez absolu, par exemple `/Utilisateurs/votre-nom/Bureau`. Omettre le premier slash comme nous l'avons fait ci-dessus construit un chemin relatif à votre répertoire de travail actuel. C'est exactement la même chose qu'une URL dans un navigateur. Un slash au début signifie "à la racine du site web", alors qu'omettre le slash signifie "l'URL est relative à ma page courante".
 
-> **Note :** Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. `cd Bureau\projet\src` — cela peut vous paraître vraiment étrange, mais si la question vous intéresse,[ regardez cette vidéo YouTube](https://www.youtube.com/watch?v=5T3IJfBfBmI) (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
+> **Note :** Sur windows vous devez utiliser des backslashes et non des slashes, p. ex. `cd Bureau\projet\src` — cela peut vous paraître vraiment étrange, mais si la question vous intéresse, [regardez cette vidéo YouTube](https://www.youtube.com/watch?v=5T3IJfBfBmI) (en anglais) qui présente une explication par l'un des ingénieurs principaux de Microsoft.
 
 ### Lister le contenu d'un répertoire
 
@@ -225,7 +225,7 @@ Jouez avec elles dans un répertoire que vous aurez créé quelque part de faço
 - `cp` — d'un usage similaire à `mv`, `cp` copie le fichier à l'emplacement spécifié en premier vers celui spécifié en second. Par exemple, `cp mdn-exemple.txt mdn-exemple.txt.bak` crée une copie de `mdn-exemple.txt` nommée `mdn-exemple.txt.bak` (bien entendu vous pouvez la nommer comme vous voulez).
 - `rm` — supprimer le fichier spécifié. Par exemple, `rm mdn-exemple.txt` efface un fichier unique nommé `mdn-exemple.txt`. Notez que cet effacement est permanent et ne peut pas être annulé comme lorsque vous placez un fichier dans la corbeille de votre Bureau dans votre interface utilisateur.
 
-> **Note :** Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, `rm mdn-*` va effacer tous les fichiers qui commencent par `mdn-`. `rm mdn-*.bak` va effacer tous les fichiers qui commencent par `mdn- `et finissent par `.bak`.
+> **Note :** Beaucoup de commandes de terminal autorisent l'emploi d'astérisques comme caractère "joker", dont le sens est "une séquence de caractères quelconque". Cela vous permet d'exécuter une commande en une seule fois sur un nombre potentiellement important de fichiers qui correspondent au modèle donné. À titre d'exemple, `rm mdn-*` va effacer tous les fichiers qui commencent par `mdn-`. `rm mdn-*.bak` va effacer tous les fichiers qui commencent par `mdn-` et finissent par `.bak`.
 
 ## Le terminal — une pratique à risque ?
 
-- 
cgit v1.2.3-54-g00ecf


From d72d6dee0aeeaa010b09cc5de81cb27366e5ba62 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Sun, 6 Mar 2022 16:47:28 +0100
Subject: Fixes #4399 - update file.name vs en-US (#4400)

* fixes #4399 - update file.name vs en-US

* apply review suggestions
---
 files/fr/web/api/file/name/index.md | 70 ++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 20 deletions(-)

diff --git a/files/fr/web/api/file/name/index.md b/files/fr/web/api/file/name/index.md
index bf3e5a69ff..45f8d8ff51 100644
--- a/files/fr/web/api/file/name/index.md
+++ b/files/fr/web/api/file/name/index.md
@@ -1,37 +1,67 @@
 ---
-title: File.fileName
+title: File.name
 slug: Web/API/File/name
-tags:
-  - API
-  - DOM
-  - Fichier
-  - Nom
-  - Propriétés
-translation_of: Web/API/File/fileName
+translation_of: Web/API/File/name
 original_slug: Web/API/File/fileName
+browser-compat: api.File.name
 ---
-{{APIRef("File API")}}{{non-standard_header}}
+{{APIRef("File API")}}
 
-{{obsolete_header(7.0)}}
+Cette propriété renvoie le nom du fichier représenté par l'objet [`File`](/fr/docs/Web/API/File) courant. Pour des raisons de sécurité, le chemin du fichier est exclu de cette propriété.
 
-## Résumé
+## Syntaxe
 
-Renvoie le nom du fichier. Pour des raisons de sécurité, le chemin est exclu de la propriété.
+```js
+let name = file.name;
+```
 
-> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("File.name")}} à la place.
+## Valeur
 
-## Syntaxe
+Une chaîne de caractères qui contient le nom du fichier sans le chemin, par exemple `"Mon compte-rendu.md"`.
 
-    var name = instanceOfFile.fileName
+## Exemple
 
-## Valeur
+### HTML
+
+```html
+<input type="file" multiple onchange="processSelectedFiles(this)">
+
+<div id="output"></div>
+```
+
+### JavaScript
+
+```js
+const output = document.querySelector("#output");
+function processSelectedFiles(fileInput) {
+  let files = fileInput.files;
+  output.textContent = "Liste des fichiers sélectionnés :";
+
+  for (let i = 0; i < files.length; i++) {
+    output.textContent += `\nNom du fichier : ${files[i].name}`;
+  }
+}
+```
+
+```css hidden
+#output{
+  padding: 0.5em 0;
+  white-space: pre;
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('', 300, 150)}}
+
+## Spécifications
 
-Une chaîne de caractères.
+{{Specifications}}
 
-## Specification
+## Compatibilité des navigateurs
 
-Ne fait partie d'aucune spécification.
+{{Compat}}
 
 ## Voir aussi
 
-- {{domxref("File.name")}}
+- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
-- 
cgit v1.2.3-54-g00ecf


From e84e2fc4af59ad902c5b684a73eb4ad09d9bd9e8 Mon Sep 17 00:00:00 2001
From: "Charles Emmanuel S. Ndiaye" <manusquall@outlook.com>
Date: Sun, 6 Mar 2022 16:42:53 +0000
Subject: fr-suggest french translation for id:4258 (#4435)

* suggest french translation for id:4258

* Implement @sphinxKnight suggestions

Implement @sphinxKnight suggestions to improve translation
---
 .../web/api/htmlmediaelement/audiotracks/index.md  | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 files/fr/web/api/htmlmediaelement/audiotracks/index.md

diff --git a/files/fr/web/api/htmlmediaelement/audiotracks/index.md b/files/fr/web/api/htmlmediaelement/audiotracks/index.md
new file mode 100644
index 0000000000..9d1984f505
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/audiotracks/index.md
@@ -0,0 +1,63 @@
+---
+title: HTMLMediaElement.audioTracks
+slug: Web/API/HTMLMediaElement/audioTracks
+browser-compat: api.HTMLMediaElement.audioTracks
+translation_of: Web/API/HTMLMediaElement/audioTracks
+---
+{{APIRef("HTML DOM")}}
+
+La propriété **`audioTracks`** est une propriété en lecture seule rattachée à l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) qui renvoie un objet [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) répertoriant tous les objets [`AudioTrack`](/fr/docs/Web/API/AudioTrack) représentant les pistes audio de l'élément multimédia.
+
+L'élément multimédia peut être soit un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou un élément [`<video>`](/fr/docs/Web/HTML/Element/video).
+
+La liste renvoyée est dynamique&nbsp;; c'est-à-dire que lorsque des pistes sont ajoutées et supprimées de l'élément multimédia, le contenu de la liste change dynamiquement. Une fois que vous avez une référence à la liste, vous pouvez surveiller les modifications pour détecter l'ajout de nouvelles pistes audio ou la suppression de pistes existantes. Vous pouvez consulter les [gestionnaires d'évènements](/fr/docs/Web/API/AudioTrackList#évènements) associés à [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) pour en savoir plus sur les modifications apportées à la liste des pistes d'un élément multimédia.
+
+## Syntaxe
+
+```js
+let audioTracks = mediaElement.audioTracks;
+```
+
+### Valeur
+
+Un objet [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) représente la liste des pistes audio incluses dans l'élément multimédia. La liste des pistes est accessible en notation matricielle ou en utilisant la méthode [`getTrackById()`](/fr/docs/Web/API/AudioTrackList/getTrackById) de l'objet.
+
+Chaque piste est représentée par un objet [`AudioTrack`](/fr/docs/Web/API/AudioTrack) qui fournit des informations sur la piste.
+
+## Exemples
+
+Dans cet exemple, toutes les pistes audio d'un élément donné sont coupées.
+
+### HTML
+
+Le fragment HTML contient l'élément média en question.
+
+```html
+<video id="video" src="somevideo.mp4"></video>
+```
+
+### JavaScript
+
+Le code JavaScript gère la mise en sourdine des pistes audio de l'élément vidéo.
+
+```js
+let video = document.getElementById("video");
+
+for (let i = 0; i < video.audioTracks.length; i += 1) {
+  video.audioTracks[i].enabled = false;
+}
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- L'interface qui porte cette propriété, [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement).
+- [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video)
+- [`AudioTrack`](/fr/docs/Web/API/AudioTrack) et [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList)
-- 
cgit v1.2.3-54-g00ecf


From beff76e80538728c83865aa5d1af2f073fd83831 Mon Sep 17 00:00:00 2001
From: Atsuto Yamashita <nyxht500@yahoo.co.jp>
Date: Mon, 7 Mar 2022 01:52:45 +0900
Subject: user_input_methods の推奨事項の日本語訳追加 (#4423)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 推奨事項の日本語訳追加

* 一部文言を修正

* 「-er」で終わる単語を「ー」で終わるように修正

* 不要な行を削除
---
 files/ja/web/guide/user_input_methods/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 04d36acba9..5e5390d10f 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -27,16 +27,16 @@ translation_of: Web/Guide/User_input_methods
 
 <h2 id="Recommendations" name="Recommendations">推奨事項</h2>
 
-<p>Available input mechanisms depend on the capabilities of the device running the application:</p>
+<p>利用できる入力の仕組みはアプリを動かしているデバイスの性能に依存します。</p>
 
 <ul>
- <li>Some devices provide touchscreen displays: the Web Platform offers <a href="/ja/docs/Web/Guide/Events/Touch_events">touch events</a> to interpret finger activity on touch-based user interfaces.</li>
- <li>For devices providing a mouse/touchpad as a pointing method, the <a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> helps you in implementing a first person 3D game or other applications requiring full control of the pointing device. And the <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> helps you in displaying your app in fullscreen mode.</li>
- <li>Using features such as <a href="/ja/docs/Web/Guide/HTML/Content_Editable">contentEditable</a> elements you can implement fast rich-text editors and with <a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">Drag&amp;Drop</a> let users moving elements inside your app. When screen orientation matters for your application, through the <a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a> you can read the screen orientation state and perform other actions.</li>
- <li>You should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web sites and apps, and locking them out of your functionality is a bad idea.</li>
+ <li>デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するための<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>を提供します。</li>
+ <li>ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。</li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の向きを制御する API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
+ <li>キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。</li>
 </ul>
 
-<p>The following is a set of recommendations and best practices for using such tools in Open Web Apps.</p>
+<p>以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。</p>
 
 <h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3>
 
-- 
cgit v1.2.3-54-g00ecf


From 18d5a07d2905d9c253cb08c1d4c52c18633a35ce Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Mon, 7 Mar 2022 08:01:15 +0100
Subject: Markdown fixes part 7 (games, glossary, mozilla, mdn) (#4449)

* Markdown fixes for fr/games

* Markdown fixes for fr/glossary

* Markdown fixes for fr/mdn

* Markdown fixes for fr/mozilla
---
 files/fr/games/index.md                            | 22 +++++++++++-----------
 files/fr/games/publishing_games/index.md           |  2 +-
 .../techniques/3d_on_the_web/basic_theory/index.md |  2 +-
 files/fr/games/techniques/3d_on_the_web/index.md   |  4 ++--
 files/fr/games/techniques/index.md                 |  2 +-
 .../bounce_off_the_walls/index.md                  |  2 +-
 .../build_the_brick_field/index.md                 |  4 ++--
 .../collision_detection/index.md                   |  2 +-
 .../index.md                                       |  8 ++++----
 files/fr/glossary/accessibility/index.md           |  4 ++--
 files/fr/glossary/adobe_flash/index.md             |  2 +-
 files/fr/glossary/api/index.md                     |  6 +++---
 files/fr/glossary/aria/index.md                    |  2 +-
 files/fr/glossary/base64/index.md                  |  2 +-
 files/fr/glossary/caret/index.md                   |  2 +-
 files/fr/glossary/character_encoding/index.md      |  2 +-
 files/fr/glossary/css_selector/index.md            |  6 +++---
 files/fr/glossary/entity/index.md                  |  2 +-
 files/fr/glossary/forbidden_header_name/index.md   |  2 +-
 files/fr/glossary/iife/index.md                    |  2 +-
 files/fr/glossary/mime/index.md                    |  2 +-
 files/fr/glossary/png/index.md                     |  2 +-
 files/fr/glossary/progressive_web_apps/index.md    |  2 +-
 files/fr/glossary/rendering_engine/index.md        |  2 +-
 files/fr/glossary/sql_injection/index.md           |  2 +-
 files/fr/glossary/symbol/index.md                  |  2 +-
 files/fr/glossary/tofu/index.md                    |  2 +-
 files/fr/glossary/ui/index.md                      |  2 +-
 files/fr/glossary/vendor_prefix/index.md           | 10 +++++-----
 files/fr/glossary/webm/index.md                    |  2 +-
 files/fr/glossary/webp/index.md                    |  2 +-
 .../write_a_new_entry_in_the_glossary/index.md     |  4 ++--
 .../guidelines/conventions_definitions/index.md    |  2 +-
 .../macros/commonly-used_macros/index.md           | 12 ++++++------
 files/fr/mdn/structures/macros/index.md            |  2 +-
 files/fr/mozilla/add-ons/index.md                  |  2 +-
 .../anatomy_of_a_webextension/index.md             |  2 +-
 .../webnotificationsdisabled/index.md              |  2 +-
 .../api/browsersettings/zoomsitespecific/index.md  |  2 +-
 .../api/browsingdata/removecache/index.md          |  2 +-
 .../add-ons/webextensions/api/cookies/get/index.md |  2 +-
 .../webextensions/api/cookies/remove/index.md      |  2 +-
 .../api/devtools/inspectedwindow/eval/index.md     |  2 +-
 .../api/devtools/inspectedwindow/index.md          |  2 +-
 .../webextensions/api/events/urlfilter/index.md    |  2 +-
 .../add-ons/webextensions/api/i18n/index.md        |  2 +-
 .../locale-specific_message_reference/index.md     |  2 +-
 .../add-ons/webextensions/api/identity/index.md    |  2 +-
 .../api/management/onenabled/index.md              |  2 +-
 .../api/management/oninstalled/index.md            |  2 +-
 .../api/management/onuninstalled/index.md          |  2 +-
 .../webextensions/api/menus/onclickdata/index.md   |  4 ++--
 .../api/menus/overridecontext/index.md             |  6 +++---
 .../webextensions/api/notifications/clear/index.md |  2 +-
 .../add-ons/webextensions/api/pageaction/index.md  |  2 +-
 .../api/permissions/permissions/index.md           |  2 +-
 .../webextensions/api/proxy/proxyinfo/index.md     |  2 +-
 .../api/storage/storagearea/clear/index.md         |  2 +-
 .../webextensions/api/tabs/detectlanguage/index.md |  4 ++--
 .../webextensions/api/tabs/executescript/index.md  |  4 ++--
 .../api/tabs/moveinsuccession/index.md             |  2 +-
 .../webextensions/api/tabs/pagesettings/index.md   | 20 ++++++++++----------
 .../webextensions/api/tabs/sendmessage/index.md    |  2 +-
 .../webextensions/api/theme/onupdated/index.md     |  2 +-
 64 files changed, 108 insertions(+), 108 deletions(-)

diff --git a/files/fr/games/index.md b/files/fr/games/index.md
index 3677ee611b..075f879758 100644
--- a/files/fr/games/index.md
+++ b/files/fr/games/index.md
@@ -38,25 +38,25 @@ Pour une liste d'exemples de jeux, voir notre [page exemples](/fr/docs/Games/Exa
 
 ## Voir aussi
 
-- [Build New Games ](http://buildnewgames.com/)(en)
+- [Build New Games (en anglais)](http://buildnewgames.com/)
   - : Un site collaboratif avec de nombreux tutoriels concernant le développement de jeux vidéo sur le Web. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-- [Creative JS ](http://creativejs.com/)(en)
+- [Creative JS (en anglais)](http://creativejs.com/)
   - : Un ensemble de techniques et d'expérimentations JavaScript, pas nécessairement liées au domaine vidéo-ludique mais qui se révèlent plutôt utiles et impressionnantes. N'a pas été très actif récemment, mais détient toujours de belles ressources.
-- [Game programming patterns ](http://gameprogrammingpatterns.com/)(en)
+- [Game programming patterns (en anglais)](http://gameprogrammingpatterns.com/)
   - : Un livre en ligne, écrit par Bob Nystrom, qui traite des modèles de programmation dans le contexte du développement de jeux, dans le but d'aider les développeurs de jeux à produire un code plus réussi et plus opérationnel.
-- [Gamedev.js Weekly ](http://gamedevjsweekly/games.com/)(en)
+- [Gamedev.js Weekly (en anglais)](http://gamedevjsweekly/games.com/)
   - : Bulletin hebdomadaire sur le développement de jeux HTML5, envoyé tous les vendredis. Contient les derniers articles, didacticiels, outils et ressources.
-- [HTML5 Game Devs Forum ](http://www.html5gamedevs.com/)(en)
+- [HTML5 Game Devs Forum (en anglais)](http://www.html5gamedevs.com/)
   - : Forums pour développeurs, créateurs de "framework" et éditeurs. Posez des questions, obtenez des commentaires, aidez les autres.
-- [HTML5 Game Engine ](http://html5gameengine.com/)(en)
+- [HTML5 Game Engine (en anglais)](http://html5gameengine.com/)
   - : Liste des architectures de jeux HTML5 les plus populaires ainsi que leurs classement, fonctionnalités et exemples.
-- [JSBreakouts](http://www.jsbreakouts.org/) (en)
+- [JSBreakouts (en anglais)](http://www.jsbreakouts.org/)
   - : Comparez les clones JavaScript Breakout dans différents systèmes pour vous aider à choisir le bon pour vous.
-- [Tuts+ Game Development ](http://gamedevelopment.tutsplus.com/)(en)
+- [Tuts+ Game Development (en anglais)](http://gamedevelopment.tutsplus.com/)
   - : Tutoriels et articles sur le developpement de jeux en général.
-- [HTML5 Gamedev Starter ](http://html5devstarter.enclavegames.com/)(en)
+- [HTML5 Gamedev Starter (en anglais)](http://html5devstarter.enclavegames.com/)
   - : De quoi démarrer pour les nouveaux développeurs de jeux, une liste organisée de liens vers diverses ressources utiles sur le web.
-- [js13kGames ](http://js13kgames.com/)(en)
+- [js13kGames (en anglais)](http://js13kgames.com/)
   - : Concours de codage JavaScript pour les développeurs de jeux HTML5 avec une limite de taille de fichier fixée à 13 kilo-octets. Tous les jeux soumis sont disponibles sous forme lisible sur GitHub.
-- [Mozilla Hacks blog ](https://hacks.mozilla.org/category/games/)(en)
+- [Mozilla Hacks blog (en anglais)](https://hacks.mozilla.org/category/games/)
   - : Catégorie Jeux sur le blog "Hacks" de Mozilla contenant des articles connexes intéressants.
diff --git a/files/fr/games/publishing_games/index.md b/files/fr/games/publishing_games/index.md
index d95350c1e0..bebb0c271e 100644
--- a/files/fr/games/publishing_games/index.md
+++ b/files/fr/games/publishing_games/index.md
@@ -26,4 +26,4 @@ Développer et finaliser un jeu ne suffit pas. Vous devez informer le monde que
 
 ## Monétiser votre jeu
 
-Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. [Monétiser son jeu ](/fr/docs/Games/Publishing_games/Game_monetization)est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.
+Après avoir passé beaucoup de temps à coder, publier et promouvoir votre jeu, vous penserez sans doute à un moyen de rémunérer votre travail. [Monétiser son jeu](/fr/docs/Games/Publishing_games/Game_monetization) est essentiel à quiconque considère que le travail qu'il a réalisé pour créer son jeu est fait sérieusement par un développeur de jeux indépendant désormais capable de vivre de ses créations. Découvrez quelles sont vos options. La technologie est suffisamment avancée, la question est de savoir quelle approche sera la meilleure pour vous.
diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
index a90a0ff795..e4074f5f75 100644
--- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md
@@ -112,6 +112,6 @@ Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D
 - [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)
 - [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js)
 - [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas)
-- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
+- [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
 
 Allez-y et faites quelques expémentations 3D sympas par vous-même !
diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md
index e921ad5af4..7d294a7a53 100644
--- a/files/fr/games/techniques/3d_on_the_web/index.md
+++ b/files/fr/games/techniques/3d_on_the_web/index.md
@@ -55,7 +55,7 @@ La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.o
 
 ### Construction d'une démo de base avec A-Frame
 
-A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo .
+A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo .
 
 ### Construction d'une démo de base avec Babylon.js
 
@@ -102,4 +102,4 @@ Vous pouvez trouver tous les codes source de cette série de [démos sur GitHub]
 - [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js)
 - [Construction d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas)
 - [Construction d'une démo de base avec Babylon.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js)
-- [Construction d'une démo de base avec](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)[ A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
+- [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame)
diff --git a/files/fr/games/techniques/index.md b/files/fr/games/techniques/index.md
index 0a46bbdb6e..d5493a42f2 100644
--- a/files/fr/games/techniques/index.md
+++ b/files/fr/games/techniques/index.md
@@ -25,5 +25,5 @@ Cette page liste un ensemble de techniques utiles à toute personne qui voudrait
   - : L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.
 - [Détection de collisions en 2D](/fr/docs/Games/Techniques/2D_collision_detection "/fr/docs/Games/Techniques/2D_collision_detection")
   - : Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.
-- [Carrelage ](/fr/docs/Games/Techniques/Tilemaps)[ ](/fr/docs/Games/Techniques/Tilemaps)
+- [Carrelage](/fr/docs/Games/Techniques/Tilemaps)
   - : Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
index b28c6c8b26..e0a0d0f3e4 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md
@@ -119,4 +119,4 @@ Vérifions encore une fois le code fini pour cette partie par rapport à ce que
 
 ## Dans le prochain chapitre
 
-Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir[ Raquette et contrôle au clavier](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}
+Nous sommes maintenant arrivés au stade où notre balle se déplace et reste sur le plateau de jeu. Dans le quatrième chapitre, nous examinerons la mise en place d'une raquette contrôlable - voir [Raquette et contrôle au clavier](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Paddle_and_keyboard_controls). {PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
index 1c89ff4260..ab190b5bfc 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md
@@ -71,7 +71,7 @@ function drawBricks() {
 }
 ```
 
-Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y `à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight`  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle :
+Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight`  — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle :
 
 ```js
 var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
@@ -119,6 +119,6 @@ Exercice : essayez de changer le nombre de briques dans une colonne ou dans une
 ## Prochaines étapes
 
 Nous avons donc maintenant des briques !  
-Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions ](/fr/docs/)
+Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions](/fr/docs/)
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}}
diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
index 4f2db9ffc5..f1d656f550 100644
--- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
+++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md
@@ -134,6 +134,6 @@ Exercice: changez la couleur de la balle lorsqu'elle frappe une brique.
 
 ## Prochaine étape
 
-Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment[ Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win).
+Nous ne sommes plus très loin de la fin ;  poursuivons ! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win).
 
 {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}
diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
index 272bb78632..d5c7702d58 100644
--- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
+++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md
@@ -8,7 +8,7 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR
 
 {{IncludeSubnav("/fr/docs/Jeux")}}
 
-Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes)  et [Vibration](/fr/docs/Web/API/Vibration_API)   pour améliorer le "gameplay" et est construit avec le "framework" [Phaser ](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.
+Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API  [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes)  et [Vibration](/fr/docs/Web/API/Vibration_API)   pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel.
 
 ## Exemple de jeu
 
@@ -18,7 +18,7 @@ A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu
 
 ## Le framework Phaser
 
-[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont[ sur Github](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.
+[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement.  Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un  jeu.
 
 ## Mise en place du projet
 
@@ -34,7 +34,7 @@ Vous pouvez l'ouvir avec votre navigateur préféré pour essayer le jeu. Il y a
 
 ## Mettre en place le canevas
 
-Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier` index.html` avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :
+Nous voulons un rendu de notre jeu sur un canevas, mais nous ne le ferons pas manuellement - cela sera pris en charge par le framework. Disons-le : notre point de départ est le fichier `index.html` avec le contenu suivant. Vous pouvez créer vous-même si vous voulez suivre :
 
 ```html
 <!DOCTYPE html>
@@ -92,7 +92,7 @@ La première valeur est le nom de l'état et la seconde est l'objet que nous vou
 
 ## Gestion des états du jeu
 
-Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal), ` `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.
+Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de  jouer. Passons rapidement au contenu de ces états.
 
 ### Boot.js _(démarrage)_
 
diff --git a/files/fr/glossary/accessibility/index.md b/files/fr/glossary/accessibility/index.md
index f6b1153583..43e08e5087 100644
--- a/files/fr/glossary/accessibility/index.md
+++ b/files/fr/glossary/accessibility/index.md
@@ -18,6 +18,6 @@ _L'Accessibilité du web_ (**A11Y**) correspond aux bonnes pratiques assurant qu
 
 ### Informations techniques
 
-- [La Documentation ARIA ](/fr/docs/Accessibilité/ARIA)sur MDN
-- [La page d'accueil de la Web Accessibility Initiative ](http://www.w3.org/WAI/)sur le site du W3C (en)
+- [La Documentation ARIA](/fr/docs/Accessibilité/ARIA) sur MDN
+- [La page d'accueil de la Web Accessibility Initiative](http://www.w3.org/WAI/) sur le site du W3C (en)
 - [La recommandation WAI-ARIA](http://www.w3.org/TR/wai-aria/) sur le site du W3C (en).
diff --git a/files/fr/glossary/adobe_flash/index.md b/files/fr/glossary/adobe_flash/index.md
index d9614b09ba..e2942a7548 100644
--- a/files/fr/glossary/adobe_flash/index.md
+++ b/files/fr/glossary/adobe_flash/index.md
@@ -16,4 +16,4 @@ _Adobe Flash_ est une technologie obsolescente, développée par Adobe Systems,
 
 - [Site officiel d'Adobe](http://www.adobe.com/fr)
 - [Shumway](https://mozilla.github.io/shumway/), une implémentation libre par Mozilla
-- [Présentation du projet Gnash ](http://gnashdev.org/)sur Sourceforge, une implémentation libre par GNU.
+- [Présentation du projet Gnash](http://gnashdev.org/) sur Sourceforge, une implémentation libre par GNU.
diff --git a/files/fr/glossary/api/index.md b/files/fr/glossary/api/index.md
index 320392db06..f64d3ef82f 100644
--- a/files/fr/glossary/api/index.md
+++ b/files/fr/glossary/api/index.md
@@ -16,11 +16,11 @@ Par exemple :
 
 L'API [getUserMedia](/fr/docs/Web/API/MediaDevices/getUserMedia) peut être utilisée pour capturer l'audio et la vidéo de la webcam d'un utilisateur, pour ensuite en faire ce que le développeur souhaite comme par exemple les enregistrer, les diffuser à un autre utilisateur lors d'une conférence téléphonique ou capturer des clichés à partir de la vidéo.
 
-L' [API Geolocation ](/fr/docs/Web/API/Geolocation)peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API [Google Maps](https://developers.google.com/maps/) pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui.
+L'[API Geolocation](/fr/docs/Web/API/Geolocation) peut être utilisée pour récupérer des informations de localisation à partir de n'importe quel service disponible sur les appareils d'un utilisateur (GPS par exemple), qui peuvent ensuite être utilisées conjointement avec l'API [Google Maps](https://developers.google.com/maps/) pour par exemple tracer la position géographique de l'utilisateur sur une carte personnalisée et lui montrer les attractions touristiques proches de lui.
 
-L' [API Twitter ](https://dev.twitter.com/overview/api)peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web.
+L'[API Twitter](https://dev.twitter.com/overview/api) peut être utilisée pour récupérer les données d'un compte utilisateur Twitter, par exemple pour afficher ses derniers tweets sur une page web.
 
-L' [API Web Animations ](/fr/docs/Web/API/Web_Animations_API)peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images.
+L'[API Web Animations](/fr/docs/Web/API/Web_Animations_API) peut être utilisée pour animer des parties d'une page web, par exemple pour faire bouger ou pivoter des images.
 
 ## Pour approfondir
 
diff --git a/files/fr/glossary/aria/index.md b/files/fr/glossary/aria/index.md
index 09694c3559..dd293ade7a 100644
--- a/files/fr/glossary/aria/index.md
+++ b/files/fr/glossary/aria/index.md
@@ -13,4 +13,4 @@ Par exemple, vous pouvez ajouter l'attribut  `role="alert"` à un élément {{H
 
 ## Pour approfondir
 
-- [ARIA ](/fr/docs/Accessibilit%C3%A9/ARIA)sur MDN
+- [ARIA](/fr/docs/Accessibilit%C3%A9/ARIA) sur MDN
diff --git a/files/fr/glossary/base64/index.md b/files/fr/glossary/base64/index.md
index c8c8d6b7e0..d66a830181 100644
--- a/files/fr/glossary/base64/index.md
+++ b/files/fr/glossary/base64/index.md
@@ -46,7 +46,7 @@ Les deux méthodes, `atob()` et `btoa()`, fonctionnent sur des chaînes de carac
 
   - : Dans cet article, nous publions une bibliothèque dont les buts sont :
 
-    - de créer une interface pour les chaînes de caractères à la façon du langage [C](https://fr.wikipedia.org/wiki/C_%28langage%29) (i.e. un tableau de code de caractères —[ `ArrayBufferView`](/fr/docs/Web/API/ArrayBufferView) en JavaScript) basée sur l'interface JavaScript [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer),
+    - de créer une interface pour les chaînes de caractères à la façon du langage [C](https://fr.wikipedia.org/wiki/C_%28langage%29) (i.e. un tableau de code de caractères — [`ArrayBufferView`](/fr/docs/Web/API/ArrayBufferView) en JavaScript) basée sur l'interface JavaScript [`ArrayBuffer`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer),
     - de créer un ensemble de méthodes pour ces objets qui fonctionnent **sur des tableaux de nombres** plutôt que sur chaînes de caractères JavaScript immuables,
     - de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les [`DOMString`](/fr/docs/Web/API/DOMString).
 
diff --git a/files/fr/glossary/caret/index.md b/files/fr/glossary/caret/index.md
index a5fa8ae27c..d58e6668b3 100644
--- a/files/fr/glossary/caret/index.md
+++ b/files/fr/glossary/caret/index.md
@@ -30,7 +30,7 @@ Ces éléments fournissent des champs ou des zones de saisie de texte et utilise
 - [`<input type="password">`](/fr/docs/Web/HTML/Element/input/password)
 - [`<input type="search">`](/fr/docs/Web/HTML/Element/input/search)
 - [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), [`<input type="datetime">`](/fr/docs/Web/HTML/Element/input/datetime) et [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local)
-- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number)[, ](/fr/docs/Web/HTML/Element/input/number)[`<input type="range">`](/fr/docs/Web/HTML/Element/input/range)
+- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number), [`<input type="range">`](/fr/docs/Web/HTML/Element/input/range)
 - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email), [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/%3Cinput_type=_tel_%3E) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url)
 - {{HTMLElement("textarea")}}
 - Tout élément avec son attribut défini {{htmlattrxref("contenteditable")}}
diff --git a/files/fr/glossary/character_encoding/index.md b/files/fr/glossary/character_encoding/index.md
index fe8a602681..4c13827748 100644
--- a/files/fr/glossary/character_encoding/index.md
+++ b/files/fr/glossary/character_encoding/index.md
@@ -23,5 +23,5 @@ Ceci nous permet de nous assurer que nous pouvons utiliser des caractères issus
 
 ### Culture générale
 
-- [Character encoding on W3C ](https://www.w3.org/International/articles/definitions-characters/)(en)
+- [Character encoding on W3C (en anglais)](https://www.w3.org/International/articles/definitions-characters/)
 - Le [Codage des Caractères](https://fr.wikipedia.org/wiki/Codage_des_caract%C3%A8res) sur Wikipédia
diff --git a/files/fr/glossary/css_selector/index.md b/files/fr/glossary/css_selector/index.md
index e7c3376392..daf25029b1 100644
--- a/files/fr/glossary/css_selector/index.md
+++ b/files/fr/glossary/css_selector/index.md
@@ -66,11 +66,11 @@ Le contenu de la page résultant ressemble à ceci:
 - [Apprendre sur les sélecteurs CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Les_s%C3%A9lecteurs) dans notre introduction à CSS.
 - Sélecteurs de base
 
-  - [Sélecteurs de type](/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type)` elementname`
+  - [Sélecteurs de type](/fr/docs/Web/CSS/S%C3%A9lecteurs_de_type) `elementname`
   - [Sélecteurs de classe](/fr/docs/Web/CSS/Sélecteurs_de_classe) `.classname`
   - [Sélecteurs d'ID](/fr/docs/Web/CSS/Reference/Sélecteurs_d'ID) `#idname`
-  - [Sélecteurs universels](/fr/docs/Web/CSS/Sélecteurs_universels)` * ns|* *|*`
-  - [Sélecteurs d'attribut](/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut)` [attr=value]`
+  - [Sélecteurs universels](/fr/docs/Web/CSS/Sélecteurs_universels) `* ns|* *|*`
+  - [Sélecteurs d'attribut](/fr/docs/Web/CSS/Reference/Sélecteurs_d'attribut) `[attr=value]`
   - [`Sélecteurs d'état`](/fr/docs/Web/CSS/Pseudo-classes) `a:active, a:visited`
 
 - Combinaisons
diff --git a/files/fr/glossary/entity/index.md b/files/fr/glossary/entity/index.md
index a16bc0fa3d..7667368963 100644
--- a/files/fr/glossary/entity/index.md
+++ b/files/fr/glossary/entity/index.md
@@ -11,7 +11,7 @@ original_slug: Glossaire/Entity
 ---
 Une **entité** {{glossary("HTML")}} est une chaîne de texte _(string)_ qui commence par (`&)` et se termine avec `(;)`. Les entités sont fréquemment utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard.
 
-De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `&copy;`. Pour les caractères non mémorisables, comme `&#8212; ou ` `&#x2014;` , vous pouvez utiliser un  [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities).
+De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `&copy;`. Pour les caractères non mémorisables, comme `&#8212;` ou `&#x2014;`, vous pouvez utiliser un  [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities).
 
 ## Caractères réservés
 
diff --git a/files/fr/glossary/forbidden_header_name/index.md b/files/fr/glossary/forbidden_header_name/index.md
index d87df6a034..e872451fb7 100644
--- a/files/fr/glossary/forbidden_header_name/index.md
+++ b/files/fr/glossary/forbidden_header_name/index.md
@@ -10,7 +10,7 @@ tags:
 translation_of: Glossary/Forbidden_header_name
 original_slug: Glossaire/Forbidden_header_name
 ---
-*Un nom d'en-tête interdit est un *nom d'[en-tête HTTP](/fr/docs/HTTP/Headers) qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de **requête** HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}).
+**Un nom d'en-tête interdit** est un nom d'[en-tête HTTP](/fr/docs/HTTP/Headers) qui ne peut être modifié par programmation, spécifiquement, un nom d'en-tête de **requête** HTTP (contraste avec {{Glossary("Forbidden response header name","Nom d'en-tête de réponse interdit")}}).
 
 Les modifications de ces en-têtes sont interdites pour que l'agent utilisateur garde un total contrôle sur eux. Les noms commençant par \``Sec-`\` sont réservés à la création de nouveaux en-têtes à l'abri des {{glossary("API","API")}} utilisant [Fetch](/fr/docs/Web/API/Fetch_API) qui accordent aux développeurs le contrôle des en-têtes, tels que {{domxref("XMLHttpRequest")}}.
 
diff --git a/files/fr/glossary/iife/index.md b/files/fr/glossary/iife/index.md
index 016a66ba75..fda1e1d151 100644
--- a/files/fr/glossary/iife/index.md
+++ b/files/fr/glossary/iife/index.md
@@ -12,7 +12,7 @@ original_slug: Glossaire/IIFE
 
 C'est un modèle de conception qui est également connu sous le nom de {{glossary("Self-Executing Anonymous Function","Fonction anonyme auto-exécutable")}} et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le {{jsxref("Operators/Grouping", "groupement opérateur")}}`()`. Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la pollution de la portée globale.
 
-La deuxième partie crée la fonction immédiatement exécutable` ()`, à travers laquelle le moteur JavaScript interprétera directement la fonction.
+La deuxième partie crée la fonction immédiatement exécutable `()`, à travers laquelle le moteur JavaScript interprétera directement la fonction.
 
 ## Exemples
 
diff --git a/files/fr/glossary/mime/index.md b/files/fr/glossary/mime/index.md
index f07a8cda84..554bdb06fc 100644
--- a/files/fr/glossary/mime/index.md
+++ b/files/fr/glossary/mime/index.md
@@ -17,4 +17,4 @@ Voir aussi [Type Mime](/fr/docs/Glossary/MIME_type)
 
 ### Culture générale
 
-- [MIME ](https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions)sur Wikipédia
+- [MIME](https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions) sur Wikipédia
diff --git a/files/fr/glossary/png/index.md b/files/fr/glossary/png/index.md
index 32e1d33806..6cd6df7556 100644
--- a/files/fr/glossary/png/index.md
+++ b/files/fr/glossary/png/index.md
@@ -16,4 +16,4 @@ original_slug: Glossaire/PNG
 
 ### Culture générale
 
-- [PNG ](https://fr.wikipedia.org/wiki/Portable_Network_Graphics)sur Wikipédia
+- [PNG](https://fr.wikipedia.org/wiki/Portable_Network_Graphics) sur Wikipédia
diff --git a/files/fr/glossary/progressive_web_apps/index.md b/files/fr/glossary/progressive_web_apps/index.md
index 9c45050b6b..c9bc8d815f 100644
--- a/files/fr/glossary/progressive_web_apps/index.md
+++ b/files/fr/glossary/progressive_web_apps/index.md
@@ -13,5 +13,5 @@ Ces fonctionnalités incluent : la possibilité d'installer l'application, de fo
 
 ## Pour approfondir
 
-- Les [Applications ](/fr/Apps)sur MDN
+- Les [Applications](/fr/Apps) sur MDN
 - [Progressive web apps](https://developers.google.com/web/progressive-web-apps) sur Google Developers.
diff --git a/files/fr/glossary/rendering_engine/index.md b/files/fr/glossary/rendering_engine/index.md
index 338d02d57f..14469155f5 100644
--- a/files/fr/glossary/rendering_engine/index.md
+++ b/files/fr/glossary/rendering_engine/index.md
@@ -20,4 +20,4 @@ Un **moteur de rendu** est un logiciel qui trace du texte et des images à l'éc
 ### Référence technique
 
 - [Documentation Gecko](/fr/docs/Gecko)
-- [Venkatraman.R - Behind Browsers (Part 1, Basics) ](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6)
+- [Venkatraman.R - Behind Browsers (Part 1, Basics)](https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6)
diff --git a/files/fr/glossary/sql_injection/index.md b/files/fr/glossary/sql_injection/index.md
index efcb86f554..112a61f119 100644
--- a/files/fr/glossary/sql_injection/index.md
+++ b/files/fr/glossary/sql_injection/index.md
@@ -66,4 +66,4 @@ Ainsi, en raison de (1) chaque guillemet simple (') dans la chaîne d'entrée es
 ### Culture générale
 
 - {{Interwiki("wikipedia","Injection_SQL","Injection SQL")}} sur Wikipedia
-- [Explication de l'injection SQL ](https://www.owasp.org/index.php/SQL_Injection)sur OWASP (Open Web Application Security Project) (en)
+- [Explication de l'injection SQL](https://www.owasp.org/index.php/SQL_Injection) sur OWASP (Open Web Application Security Project) (en)
diff --git a/files/fr/glossary/symbol/index.md b/files/fr/glossary/symbol/index.md
index 2bdab78e5c..2202be5034 100644
--- a/files/fr/glossary/symbol/index.md
+++ b/files/fr/glossary/symbol/index.md
@@ -21,7 +21,7 @@ this[myPrivateMethod] = function() {...};
 
 Lorsqu'une valeur de symbole est utilisée comme identifiant dans une affectation de propriété, la propriété (comme le symbole) est anonyme; et est également non dénombrable. Comme la propriété n'est pas énumérable, elle n'apparaîtra pas en tant que membre dans la construction de la boucle "`for (... in ...)`", et parce que la propriété est anonyme, elle n'apparaîtra pas dans le tableau des résultats de "`Object.getOwnPropertyNames()`". Vous pouvez accéder à la propriété en utilisant la valeur de symbole d'origine qui l'a créée ou en itérant sur le tableau de résultats de "`Object.getOwnPropertySymbols()`". Dans l'exemple de code précédent, l'accès à la propriété se fera via la valeur qui a été stockée dans la variable `myPrivateMethod`.
 
-La fonction intégrée "{{jsxref("Symbol")}}`()`" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe "` new ``Symbol()` ", qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction `Symbol()` a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de `Symbol()` en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "`Symbol.for()`" et "`Symbol.keyFor()`" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode `Symbol.for("tokenString")` retourne une valeur de symbole du registre et `Symbol.keyFor(symbolValue)` renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai :
+La fonction intégrée "{{jsxref("Symbol")}}`()`" est une classe incomplète qui renvoie une valeur de symbole lorsqu'elle est appelée en tant que fonction, qui génère une erreur lors de tentatives d'utilisation en tant que constructeur avec la syntaxe `new Symbol()`, qui a des méthodes statiques pour accéder à la table globale de symboles de JavaScript, et qui a des propriétés statiques pour adresser certains symboles qui sont présents dans les objets couramment utilisés. La création de valeurs de symboles par la fonction `Symbol()` a été expliquée ci-dessus. Le lancement d'une erreur sur les tentatives d'utilisation de `Symbol()` en tant que constructeur est expliqué comme une précaution contre la création accidentelle d'un objet qui pourrait provoquer une confusion. Les méthodes qui accèdent au registre global de symboles sont "`Symbol.for()`" et "`Symbol.keyFor()`" ; celles-ci servent de médiateur entre la table globale de symboles (ou "registre") et l'environnement d'exécution. Le registre de symboles est principalement construit par l'infrastructure du compilateur JavaScript, et le contenu du registre de symboles n'est pas disponible pour l'infrastructure d'exécution de JavaScript, à l'exception de ces méthodes de réflexion. La méthode `Symbol.for("tokenString")` retourne une valeur de symbole du registre et `Symbol.keyFor(symbolValue)` renvoie une chaîne de signes du registre ; chacun est l'inverse de l'autre, donc ce qui suit est vrai :
 
 ```js
 Symbol.keyFor(Symbol.for("tokenString"))=="tokenString";  // vrai
diff --git a/files/fr/glossary/tofu/index.md b/files/fr/glossary/tofu/index.md
index e88fd92b75..54e18960ae 100644
--- a/files/fr/glossary/tofu/index.md
+++ b/files/fr/glossary/tofu/index.md
@@ -16,4 +16,4 @@ TOFU est utilisé dans le protocole SSH, dans [HTTP Public Key Pinning](/fr/docs
 
 - [HTTP Public Key Pinning](/fr/docs/Web/HTTP/Public_Key_Pinning) ({{Glossary("HPKP")}})
 - {{HTTPHeader("Public-Key-Pins")}}
-- Wikipedia : [TOFU ](https://en.wikipedia.org/wiki/Trust_on_first_use)(en)
+- Wikipedia : [TOFU (en anglais)](https://en.wikipedia.org/wiki/Trust_on_first_use)
diff --git a/files/fr/glossary/ui/index.md b/files/fr/glossary/ui/index.md
index d6e060c7f3..4525df8db1 100644
--- a/files/fr/glossary/ui/index.md
+++ b/files/fr/glossary/ui/index.md
@@ -13,4 +13,4 @@ L'_interface utilisateur_ (ou UI pour _User Interface_ en anglais) est tout ce q
 ### Culture générale
 
 - [Interface utilisateur](https://fr.wikipedia.org/wiki/Interface_utilisateur) sur Wikipédia
-- [Développement front end ](https://en.wikipedia.org/wiki/Front_end_development)sur Wikipédia (en anglais)
+- [Développement front end](https://en.wikipedia.org/wiki/Front_end_development) sur Wikipédia (en anglais)
diff --git a/files/fr/glossary/vendor_prefix/index.md b/files/fr/glossary/vendor_prefix/index.md
index 02cabfa3c7..43196ec68f 100644
--- a/files/fr/glossary/vendor_prefix/index.md
+++ b/files/fr/glossary/vendor_prefix/index.md
@@ -20,7 +20,7 @@ Les vendeurs de navigateurs ajoutent parfois des préfixes aux propriétés CSS
 En général, les principaux navigateurs utilisent ces préfixes :
 
 - `-webkit- (`Chrome, nouvelles versions d'Opera.)
-- `-moz- `(Firefox)
+- `-moz-` (Firefox)
 - `-o-` (Anciennes versions d'Opera)
 - `-ms-` (Internet Explorer et Edge)
 
@@ -32,8 +32,8 @@ Historiquement, les fournisseurs ont également utilisé des préfixes pour les
 
 Les préfixes pour les noms d'interface sont en majuscules:
 
-- `Webkit `(Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit).
-- `Moz `(Firefox)
+- `Webkit` (Chrome, Safari, versions d'Opera récentes, presque tous les navigateurs iOS (y compris Firefox pour iOS) ; fondamentalement, tout navigateur basé sur WebKit).
+- `Moz` (Firefox)
 - `O` (anciennes versions d'Opera)
 - `MS` (Internet Explorer et Edge)
 
@@ -42,8 +42,8 @@ Les préfixes pour les noms d'interface sont en majuscules:
 Quant aux propriétés et aux méthodes, sont généralement utilisés :
 
 - `webkit (`Chrome, Safari, nouvelles versions d'Opera, presque tous les navigateurs IOS (y compris Firefox pour IOS), fondamentalement, tout navigateur basé sur WebKit).
-- `moz `(Firefox)
-- `o `(anciennes versions d'Opera)
+- `moz` (Firefox)
+- `o` (anciennes versions d'Opera)
 - `ms` (Internet Explorer et Edge)
 
 ## Pour approfondir
diff --git a/files/fr/glossary/webm/index.md b/files/fr/glossary/webm/index.md
index 76311c75b6..2f66281b24 100644
--- a/files/fr/glossary/webm/index.md
+++ b/files/fr/glossary/webm/index.md
@@ -15,4 +15,4 @@ original_slug: Glossaire/webm
 
 ### Culture générale
 
-- [WebM ](https://fr.wikipedia.org/wiki/WebM)sur Wikipédia
+- [WebM](https://fr.wikipedia.org/wiki/WebM) sur Wikipédia
diff --git a/files/fr/glossary/webp/index.md b/files/fr/glossary/webp/index.md
index 6f4816dcd0..db27af71e2 100644
--- a/files/fr/glossary/webp/index.md
+++ b/files/fr/glossary/webp/index.md
@@ -16,4 +16,4 @@ original_slug: Glossaire/webp
 
 ### Culture générale
 
-- [WebP ](https://fr.wikipedia.org/wiki/WebP)sur Wikipédia
+- [WebP](https://fr.wikipedia.org/wiki/WebP) sur Wikipédia
diff --git a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md
index d518794b83..acb069fce8 100644
--- a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md
+++ b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md
@@ -14,7 +14,7 @@ Le [glossaire](/fr/docs/Glossary) MDN est le lieu privilégié où nous définis
 
 ## Comment créer une entrée
 
-Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la [liste des termes à documenter ](/fr/docs/Glossary#Contribute_to_the_glossary)à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous.
+Pour trouver des sujets ayant besoin d'entrées de glossaire, consultez la [liste des termes à documenter](/fr/docs/Glossary#Contribute_to_the_glossary) à la fin de la page concernant le sujet en question ; cliquez n'importe lequel de ses liens pour commencer une nouvelle page de glossaire, puis suivez les étapes ci-dessous.
 
 ### Étape 1: écrire un résumé
 
@@ -67,7 +67,7 @@ Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les d
 | ---------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | \\{{Glossary("browser")}}                         | {{Glossary("browser")}}                     | Quand un terme correspond à un terme à définir, utilisez simplement la macro telle quelle (notez qu'elle est sensible à la casse — minuscule/majuscule) |
 | \\{{Glossary("browser", "Web browser")}}     | {{Glossary("browser","Web browser")}}     | Fournissez en deuxième argument un texte alternatif à afficher.                                                                                         |
-| \\{{Glossary("browser", "Web browser", 1)}} | {{Glossary("browser","Web browser",1)}} | Optionnellement, entrez le chiffre` 1` comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile.  |
+| \\{{Glossary("browser", "Web browser", 1)}} | {{Glossary("browser","Web browser",1)}} | Optionnellement, entrez le chiffre `1` comme troisième argument pour afficher le lien de façon classique plutôt que comme une mise en exergue subtile.  |
 
 Les liens créés avec la macro \\{{Glossary}} affichent toujours un texte au survol de la souris, qui contient le résumé de l'entrée du glossaire (cf. ci-dessus).
 
diff --git a/files/fr/mdn/guidelines/conventions_definitions/index.md b/files/fr/mdn/guidelines/conventions_definitions/index.md
index d2c896299d..a091d9fc90 100644
--- a/files/fr/mdn/guidelines/conventions_definitions/index.md
+++ b/files/fr/mdn/guidelines/conventions_definitions/index.md
@@ -126,7 +126,7 @@ Il arrive parfois, pendant le développement d'une spécification et au fur à e
   - On fera de même pour toute mention dans les guides et tutoriels qui mentionnent cet élément.
   - On fera de même pour toute mention autre part sur MDN.
   - Il est très peu probable que ces mentions soient retirées de la documentation. Toutefois, il est possible que certaines de ces pages soient déplacées dans les [Archives](/fr/docs/Archive).
-  - On mettra à jour les éléments concernés [dans le dépôt de données de compatibilité des navigateurs ](https://github.com/mdn/browser-compat-data)afin d'indiquer la dépréciation de l'élément.
+  - On mettra à jour les éléments concernés [dans le dépôt de données de compatibilité des navigateurs](https://github.com/mdn/browser-compat-data) afin d'indiquer la dépréciation de l'élément.
 
 Les formulations exactes des avertissements et autres messages doivent être adaptées si besoin. En cas de doute sur la formulation, n'hésitez pas à vous rendre sur [le canal MDN](https://chat.mozilla.org/#/room/#mdn:mozilla.org) sur [Matrix](https://wiki.mozilla.org/Matrix) ou sur le forum de discussion [Discourse](https://discourse.mozilla.org/c/mdn).
 
diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md
index bc8158e7df..54876223e2 100644
--- a/files/fr/mdn/structures/macros/commonly-used_macros/index.md
+++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md
@@ -5,9 +5,9 @@ translation_of: MDN/Structures/Macros/Commonly-used_macros
 ---
 {{MDNSidebar}}
 
-Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros ](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros")et [Utiliser les liens macros ](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros ](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other")pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates").
+Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros") et [Utiliser les liens macros](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other") pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates").
 
-Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide")pour l'utilisation des styles disponibles.
+Voir aussi le [Guide style CSS](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide") pour l'utilisation des styles disponibles.
 
 ## Linking
 
@@ -15,7 +15,7 @@ Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_gu
 
 En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le **Lien** dans l'interface de l'éditeur pour créer des liens.
 
-- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du[ glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels:
+- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du [glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels:
 
   1.  Le nom d'un terme (comme "HTML").
   2.  Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}}
@@ -35,7 +35,7 @@ Il existe différentes macros pour des liens vers des pages dans les zones de r
 - {{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \\{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while `\{\{domxref("Node")\}\}` results in {{ domxref("Node") }}.
 - {{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \\{{event("change")}} results in {{event("change")}}.
 - {{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference.
-- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\} `will create this link: {{htmlattrxref("lang")}}.` ` `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}.
+- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\}` will create this link: {{htmlattrxref("lang")}}. `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}.
 - {{TemplateLink("jsxref")}} links to a page in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference "en-US/docs/Web/JavaScript/Reference").
 - {{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, `\{\{SVGAttr("d")\}\}` creates this link: {{SVGAttr("d")}}.
 - {{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference.
@@ -126,7 +126,7 @@ Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
 
 ##### Syntax
 
-`\{{deprecated_inline}}` or` \{{deprecated_inline("gecko5")}}`
+`\{{deprecated_inline}}` or `\{{deprecated_inline("gecko5")}}`
 
 ##### Examples
 
@@ -141,7 +141,7 @@ Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
 
 ##### Syntax
 
-`\{{obsolete_inline}}` or` \{{obsolete_inline("js1.8.5")}}`
+`\{{obsolete_inline}}` or `\{{obsolete_inline("js1.8.5")}}`
 
 ##### Examples
 
diff --git a/files/fr/mdn/structures/macros/index.md b/files/fr/mdn/structures/macros/index.md
index 2b2710c8a5..10237e2c4a 100644
--- a/files/fr/mdn/structures/macros/index.md
+++ b/files/fr/mdn/structures/macros/index.md
@@ -23,7 +23,7 @@ Quelques notes sur les appels de macro:
 
 - Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule.
 - Les paramètres sont séparés par des virgules.
-- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}} `et `\{{macroname}}` sont identiques.
+- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}}` et `\{{macroname}}` sont identiques.
 - Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets).
 - Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir [Dépannage des erreurs KumaScript](/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors).
 
diff --git a/files/fr/mozilla/add-ons/index.md b/files/fr/mozilla/add-ons/index.md
index ccbec96142..98b2fbca3e 100644
--- a/files/fr/mozilla/add-ons/index.md
+++ b/files/fr/mozilla/add-ons/index.md
@@ -53,7 +53,7 @@ En 2020, Mozilla sortira une nouvelle expérience Firefox pour Android. Le nouve
 
 Si vous maintenez un module complémentaire historique utilisant XUL ou le SDK Add-on, nous vous recommandons de le porter vers une extension WebExtensions. [Voici quelques ressources MDN à propos du portage d'extension](/fr/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on).
 
-Nous avons rassemblé [un ensemble de ressources](https://wiki.mozilla.org/Add-ons/developer/communication) sur un page wiki afin d'aider les développeurs pendant cette phase de transition. Pour commencer, vous pouvez utiliser l'outil [Lookup ](https://compatibility-lookup.services.mozilla.com/)afin de détecter si votre module complémentaire est impacté.
+Nous avons rassemblé [un ensemble de ressources](https://wiki.mozilla.org/Add-ons/developer/communication) sur un page wiki afin d'aider les développeurs pendant cette phase de transition. Pour commencer, vous pouvez utiliser l'outil [Lookup](https://compatibility-lookup.services.mozilla.com/) afin de détecter si votre module complémentaire est impacté.
 
 ## Publier des modules
 
diff --git a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
index 1b01eec2c4..21844a46c1 100644
--- a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md
@@ -15,7 +15,7 @@ Il s'agit du seul fichier qui doit être présent dans chaque extension. Il cont
 
 Ce manifeste peut également contenir des pointeurs vers plusieurs autres types de fichiers :
 
-- [page d'arrière-plan ](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts): implémentez une logique à longue durée.
+- [page d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts)&nbsp;: implémentez une logique à longue durée.
 - Icônes pour l'extension et tous les boutons qu'elle peut définir.
 - [Sidebars, popups, et options pages](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Sidebars_popups_options_pages): Documents HTML qui fournissent du contenu pour divers composants de l'interface utilisateur.
 - [Script de contenu](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts) : interagissez avec les pages Web (Notez que ce n'est pas le même que javaScript dans un élément {{HTMLElement("script")}} au sein d'une page).
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md
index 24413ee57e..1b15d223c6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/webnotificationsdisabled/index.md
@@ -20,7 +20,7 @@ L'API `Notifications` est utilisée pour afficher les notifications de bureau à
 
 Définir `browserSettings.webNotificationsDisabled` à `true` change l'autorisation globale à _refuser_.
 
-Notez que cela n'affectera pas les sites pour lesquels l'utilisateur a défini une préférence par site. Par exemple, si l'utilisateur définit <https://example.org> pour _autoriser_, et une extension place ensuite `browserSettings.webNotificationsDisabled` à `true`, alors les pages sous [https://example.org ](https://example.org)seront toujours autorisées à afficher des notifications..
+Notez que cela n'affectera pas les sites pour lesquels l'utilisateur a défini une préférence par site. Par exemple, si l'utilisateur définit <https://example.org> pour _autoriser_, et une extension place ensuite `browserSettings.webNotificationsDisabled` à `true`, alors les pages sous [https://example.org](https://example.org) seront toujours autorisées à afficher des notifications..
 
 Si vous définissez `browserSettings.webNotificationsDisabled` à `false` la valeur par défaut globale est rétablie.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md
index fcaae13ff8..431a4fc7eb 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/zoomsitespecific/index.md
@@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/zoomSiteSpecif
 
 Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} dont la valeur sous-jaccente est un booléen.
 
-Cette propriété contrôle le [réglage de configuration](https://support.mozilla.org/fr/kb/editeur-configuration-firefox)` browser.zoom.siteSpecific`, qui règle comment le zoom est appliqué aux sites et onglets.
+Cette propriété contrôle le [réglage de configuration](https://support.mozilla.org/fr/kb/editeur-configuration-firefox) `browser.zoom.siteSpecific`, qui règle comment le zoom est appliqué aux sites et onglets.
 
 Si `browser.zoom.siteSpecific` est à vrai, les opérations de zoom s'appliquent à toutes les pages du même site selon les règles :
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
index 3d7bcb7fe0..3e99e5f7f6 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md
@@ -30,7 +30,7 @@ var removing = browser.browsingData.removeCache(
 
 ### Paramètres
 
-- `removalOptions `{{optional_inline}}
+- `removalOptions` {{optional_inline}}
   - : `object`. Un objet {{WebExtAPIRef("browsingData.RemovalOptions")}}. Ce paramètre n'a aucun effet
 
 ### Valeur retournée
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
index cb8596d8e2..5fd142822f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md
@@ -42,7 +42,7 @@ var getting = browser.cookies.get(
     - `storeId`{{optional_inline}}
       - : Une `chaîne` représentant l'ID du {{WebExtAPIRef("cookies.CookieStore", "cookie store")}} dans lequel rechercher le cookie (tel que renvoyé par  {{WebExtAPIRef("cookies.getAllCookieStores()")}}). Par défault, le cookie store du contexte d'exécution actuel sera utilisé.
     - `url`
-      - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les  [ permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera.
+      - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera.
 
 ### Valeur retournée
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
index 3b721356ca..01d599e69b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md
@@ -40,7 +40,7 @@ var removing = browser.cookies.remove(
     - `name`
       - : Une `chaîne` représenant le nom du cookie à supprimer.
     - `storeId`{{optional_inline}}
-      - : Une` chaîne` représentant l'ID du cookie store pour trouver le cookie. Si elle n'est pas spécifiée, le cookie est recherché par défaut dans le cookie store du contexte d'exécution actuel.
+      - : Une `chaîne` représentant l'ID du cookie store pour trouver le cookie. Si elle n'est pas spécifiée, le cookie est recherché par défaut dans le cookie store du contexte d'exécution actuel.
     - `url`
       - : Une `chaîne` représentant l'URL associée au cookie. Si l'extension n'a pas de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour cette URL, l'appel de l'API échouera.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
index e8b8329c9e..49c0dafa02 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md
@@ -18,7 +18,7 @@ Exécute JavaScript dans la fenêtre à laquelle les devtools sont attachés.
 
 C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour joindre un script de contenu, mais avec deux différences principales:
 
-Tout d'abord, le JavaScript peut utiliser un ensemble de [commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools ](#Helpers): par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.
+Tout d'abord, le JavaScript peut utiliser un ensemble de [commandes spéciales que les navigateurs fournissent généralement dans leur implémentation de console devtools](#Helpers)&nbsp;: par exemple, en utilisant "$0" pour designer l'élément actuellement sélectionné dans l'inspecteur.
 
 Deuxièmement, le JavaScript que vous exécutez peut voir les modifications apportées à la page par des scripts que la page a chargés. Cela contraste avec les scripts de contenu, qui voient la page [telle qu'elle existerait si aucun script de page n'était pas chargé](/fr/Add-ons/WebExtensions/Content_scripts#DOM_access). Cependant, notez que l'isolement fourni par les scripts de contenu est une fonction de sécurité délibérée, destinée à rendre plus difficile la confusion ou la subversion des WebExtensions par des pages web malveillantes ou simplement non coopératives en redéfinissant les fonctions et les propriétés du DOM. Cela signifie que vous devez être très prudent si vous renoncez à cette protection en utilisant eval(), et devrait utiliser les scripts de contenu, sauf si vous devez utiliser eval().
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
index 9109f49f92..a34bf0aec4 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md
@@ -17,7 +17,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow
 
 L'API `devtools.inspectedWindow` permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés.
 
-Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé [devtools_page](/fr/Add-ons/WebExtensions/manifest.json/devtools_page) du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir [Extension des outils de développement ](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) pour plus d'informations.
+Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécuter le code dans le document défini dans la clé [devtools_page](/fr/Add-ons/WebExtensions/manifest.json/devtools_page) du manifest.json, où dans d'autres documents devtools créés par l'extension (tels que le document hébergé par un panneau, l'extension créée). Voir [Extension des outils de développement](/fr/Add-ons/WebExtensions/Extending_the_developer_tools) pour plus d'informations.
 
 ## Propriétés
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md
index 0e1bd90db9..322ebb321a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md
@@ -88,7 +88,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier
 
 - `ports`{{optional_inline}}
 
-  - : `array` de `(integer `ou` array of integer`). Un tableau qui peut contenir des entiers et des tableaux d'entiers. Les entiers sont interprétés comme des numéros de port, tandis que les tableaux d'entiers sont interprétés comme des plages de ports. Correspond si le port de l'URL correspond à un numéro de port ou est contenu dans des plages.
+  - : `array` de (`integer` ou `array of integer`). Un tableau qui peut contenir des entiers et des tableaux d'entiers. Les entiers sont interprétés comme des numéros de port, tandis que les tableaux d'entiers sont interprétés comme des plages de ports. Correspond si le port de l'URL correspond à un numéro de port ou est contenu dans des plages.
 
     - Par exemple: `[80, 443, [1000, 1200]]` correspond à toutes les demandes sur les ports 80, 443, et dans la plage 1000-1200.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md
index fc09e6bb30..6ef39f9e2b 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md
@@ -19,7 +19,7 @@ Fonctions permettant d'internationaliser votre extension. Vous pouvez utiliser c
 Pour plus de détails sur l'utilisation de i18n pour votre extension, voir :
 
 - [Internationalization](/fr/Add-ons/WebExtensions/Internationalization): un guide d'utilisation du système WebExtension i18n.
-- [Référence de message spécifique aux paramètres régionaux ](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference): Les extensions fournissent des chaînes de caractères locales dans des fichiers appelés `messages.json`. Cette page décrit le format de `messages.json`.
+- [Référence de message spécifique aux paramètres régionaux](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference)&nbsp;: Les extensions fournissent des chaînes de caractères locales dans des fichiers appelés `messages.json`. Cette page décrit le format de `messages.json`.
 
 ## Types
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
index 27e5b4b439..059205a76f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md
@@ -80,7 +80,7 @@ Le nom peut inclure les caractères suivants :
 Au moins, cette propriété doit être définie pour chaque chaîne. Le membre `"message"` contient une chaîne localisée qui peut contenir {{anch("placeholders")}}. Vous pouvez utiliser :
 
 - _$placeholder_name$_ (case insensitive) pour insérer un espace réservé particulier (par exemple $URL$ dans l'exemple ci-dessus) dans votre chaîne.
-- `$1`, `$2`,` $3`, etc. pour insérer directement les valeurs obtenues à partir d'un {{WebExtAPIRef("i18n.getMessage()")}} appel dans votre chaîne.
+- `$1`, `$2`, `$3`, etc. pour insérer directement les valeurs obtenues à partir d'un {{WebExtAPIRef("i18n.getMessage()")}} appel dans votre chaîne.
 
 Autres points à noter :
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md
index 50004009a9..8d7f8fd95f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md
@@ -23,7 +23,7 @@ L'API d'identité fournit la fonction {{WebExtAPIRef("identity.launchWebAuthFlow
 
 L'extension termine alors le flux OAuth2 pour obtenir un jeton d'accès validé, et peut ensuite l'utiliser dans les requêtes HTTP pour accéder aux données de l'utilisateur en fonction de l'autorisation donnée par l'utilisateur.
 
-Pour utiliser cette API, vous devez posséder la [permission de l'API ](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions)"identity"
+Pour utiliser cette API, vous devez posséder la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "identity"
 
 ## Installer
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md
index 76fba1d6f4..c5d905bb39 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md
@@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onEnabled
 
 L'auditeur de l'événement appelé lorsque l'événement `enabled` est déclenché, indiquant qu'un add-on est maintenant activé.
 
-L'API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management"
+L'API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management"
 
 ## Syntaxe
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md
index ff33122d6a..85443e4e59 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md
@@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onInstalled
 
 Action quand une extension est installée.
 
-Cette API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management".
+Cette API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management".
 
 ## Syntaxe
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md
index 058dd43540..bb406dc585 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md
@@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/onUninstalled
 
 Action quand une extension est désinstallée.
 
-L'API requière l'[API de permission ](/fr/Add-ons/WebExtensions/manifest.json/permissions)"management".
+L'API requière l'[API de permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management".
 
 ## Syntaxe
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md
index baf352a860..eb09634e5f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md
@@ -35,7 +35,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
   - : `string`. L'URL du cadre de l'élément sur lequel le menu contextuel a été cliqué, s'il était dans un cadre
 - `linkText` {{optional_inline}}
   - : `string`. Si l'élément est un lien, le texte du lien. Si le lien ne contient aucun texte, l'URL elle-même est donnée ici.
-- `linkUrl `{{optional_inline}}
+- `linkUrl` {{optional_inline}}
   - : `string`. Si l'élément est un lien, l'URL vers laquelle il pointe.
 - `mediaType` {{optional_inline}}
   - : `string`. Une de "image", "video", ou "audio" si le menu contextuel a été activé sur l'un de ces types d'éléments.
@@ -47,7 +47,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
   - : `string`. L'URL de la page sur laquelle l'élément de menu a été cliqué. Cette propriété n'est pas présente si le clic s'est produit dans un contexte où il n'y a pas de page en cours, comme dans le cas d'une action du navigateur.
 - `parentMenuItemId` {{optional_inline}}
   - : `integer` ou `string`. L'ID parent, le cas échéant, pour l'élément cliqué.
-- `selectionText `{{optional_inline}}
+- `selectionText` {{optional_inline}}
   - : `string`. Si du texte a été sélectionné dans la page, il contient le texte sélectionné.
 - `srcUrl` {{optional_inline}}
   - : `string`. Sera présent pour les éléments avec une URL "src".
diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md
index c879a6f45f..619753ac6a 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md
@@ -35,9 +35,9 @@ browser.menus.overrideContext(
 
     - `showDefaults` {{optional_inline}}
       - : `boolean`. S'il faut également inclure les éléments de menu par défaut dans le menu.
-    - `context `{{optional_inline}}
+    - `context` {{optional_inline}}
       - : `string`. Le ContextType à surcharger, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls `'bookmark'` et `'tab'` sont supportés. `showDefaults` ne peut pas être utilisé avec cette option.
-    - `bookmarkId `{{optional_inline}}
+    - `bookmarkId` {{optional_inline}}
       - : `string`. Requis lorsque le contexte est  `'bookmark'`. Nécessite la permission  'bookmark'.
-    - `tabId `{{optional_inline}}
+    - `tabId` {{optional_inline}}
       - : `integer`. Requis lorsque le contexte est `'tab'`. Nécessite la permission 'tabs'.
diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md
index ae28407604..53acf79895 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/clear/index.md
@@ -34,7 +34,7 @@ var clearing = browser.notifications.clear(
 
 ### Valeur retournée
 
-Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un booléen : `true` la notification a été effacée, ou `false` si ce n'est pas le cas (par exemple, parce que la notification référencée par `id ` n'existe pas).
+Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un booléen : `true` la notification a été effacée, ou `false` si ce n'est pas le cas (par exemple, parce que la notification référencée par `id` n'existe pas).
 
 ## Compatibilité du navigateur
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md
index 74b556d77d..01477d446f 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md
@@ -18,7 +18,7 @@ Une [action de page](/fr/Add-ons/WebExtensions/Page_actions) est une icône cliq
 
 ![](page-action.png)
 
-Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle ](/fr/Add-ons/WebExtensions/Popups)qui s'ouvre  lorsque l'icone est cliquée.
+Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle](/fr/Add-ons/WebExtensions/Popups) qui s'ouvre  lorsque l'icone est cliquée.
 
 Si vous spécifiez une fenêtre contextuelle, vous pouvez définir son contenu et son comportement en utilisant HTML, CSS et JavaScript, tout comme une page Web normale. Le JavaScript s'exécutant dans la fenêtre contextuelle accède à toutes les mêmes API WebExtension que vos scripts d'arrière-plan.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md
index fa69b9fd40..4d92f10cda 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/permissions/index.md
@@ -21,7 +21,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes :
 - `origins`{{optional_inline}}
   - : Un tableau de [modèles de correspondance](/fr/Add-ons/WebExtensions/Match_patterns), représentant les [permissions de l'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions).
 - `permissions`{{optional_inline}}
-  - : Un tableau de permissions nommées, y compris les [permissions d'API ](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) et les [permissions du presse-papiers](/fr/Add-ons/WebExtensions/manifest.json/permissions#Clipboard_access).
+  - : Un tableau de permissions nommées, y compris les [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) et les [permissions du presse-papiers](/fr/Add-ons/WebExtensions/manifest.json/permissions#Clipboard_access).
 
 ## Compatibilité du navigateur
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md
index 42a8cf4a5d..394907b1e5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md
@@ -49,7 +49,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
 
     Par exemple, si vous voulez envoyer "nom d'utilisateur" et "mot de passe" pour l'authentification "basique", vous pouvez définir la propriété `proxyAuthorizationHeader` à `Basic dXNlcm5hbWU6cGFzc3dvcmQ=`
 
-- `connectionIsolationKey `{{optional_inline}}
+- `connectionIsolationKey` {{optional_inline}}
   - : `string.` Une clé optionnelle utilisée pour l'isolation supplémentaire de cette connexion proxy.
 
 ## Compatibilité du navigateur
diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
index fee6c19907..a4c19be5d5 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/clear/index.md
@@ -26,7 +26,7 @@ C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScrip
 var clearing = browser.storage.<storageType>.clear()
 ```
 
-`<storageType> `sera l'un des types de stockage accessibles en écriture — {{WebExtAPIRef("storage.sync")}} or {{WebExtAPIRef("storage.local")}}.
+`<storageType>` sera l'un des types de stockage accessibles en écriture — {{WebExtAPIRef("storage.sync")}} or {{WebExtAPIRef("storage.local")}}.
 
 ### Paramètres
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
index c6b6c409c3..ace90d2a9c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md
@@ -30,9 +30,9 @@ var detecting = browser.tabs.detectLanguage(
 
 ### Paramètres
 
-- `tabId `{{optional_inline}}
+- `tabId` {{optional_inline}}
   - : `integer`. Par défaut à l'onglet actif de la fenêtre en cours.
-- `callback `{{optional_inline}}
+- `callback` {{optional_inline}}
   - : `function`. Actuellement, si un `tabId` est spécifié, cette méthode utilise ce rappel pour renvoyer les résultats au lieu de renvoyer une promesse. Le rappel reçoit comme seul paramètre d'entrée une chaîne de caractères contenant le code de langue détecté `en` ou `fr`.
 
 ### Valeur retournée
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
index cf707654b2..bdc985eba3 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md
@@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/executeScript
 
 Injecte du code JavaScript dans une page.
 
-Vous pouvez injecter du code dans des pages dont l'URL peut être exprimée à l'aide d'un [modèle de correspondance ](/fr/Add-ons/WebExtensions/Match_patterns): son schéma doit être "http", "https", "file", "ftp". Pour ce faire, vous devez disposer de la permission pour l'URL de la page, soit explicitement en tant que [permission d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou via la [permission activeTab](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission).
+Vous pouvez injecter du code dans des pages dont l'URL peut être exprimée à l'aide d'un [modèle de correspondance](/fr/Add-ons/WebExtensions/Match_patterns)&nbsp;: son schéma doit être "http", "https", "file", "ftp". Pour ce faire, vous devez disposer de la permission pour l'URL de la page, soit explicitement en tant que [permission d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou via la [permission activeTab](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission).
 
 Vous pouvez également injecter du code dans des pages empaquetées avec votre propre extension :
 
@@ -57,7 +57,7 @@ var executing = browser.tabs.executeScript(
 
     - `allFrames` {{optional_inline}}
       - : `boolean`. Si `true`, le code sera injecté dans toutes les cadres de la page courante. Si `true` et `frameId` est défini, alors il y aura une erreur, frameId et allFrames sont mutuellement exclusifs. Si c'est `false`, le code n'est injecté que dans le cadre supérieur. La valeur par défaut est `false`.
-    - `code `{{optional_inline}}
+    - `code` {{optional_inline}}
       - : `string`. Code à injecter, sous la forme d’une chaine de texte. **Attention :** n’utilisez pas cette propriété pour interpoler des données non sûres dans JavaScript, car cela pourrait introduire une faille de sécurité.
     - `file` {{optional_inline}}
       - : `string`. Chemin d’accès à un fichier contenant le code à injecter. Dans Firefox, les URL relatives ne commençant pas à la racine de l'extension sont résolues par rapport à l'URL de la page en cours. Dans Chrome, ces URL sont résolues par rapport à l’URL de base de l’extension. Pour travailler avec plusieurs navigateurs, vous pouvez spécifier le chemin comme une URL relative, en commençant à la racine de l’extension, comme ceci : `"/path/to/script.js"`.
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md
index f394f3ab94..459ed9321c 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md
@@ -41,7 +41,7 @@ browser.tabs.moveInSuccession([1, 3, 5, 7, 2, 9], 4, {insert:true})
   - : `object`.
 
     - `append` {{optional_inline}}
-      - : `boolean`. Détermine s'il faut déplacer les onglets dans les `tabIds` avant ou après `tabId `dans la succession. Si `false`, les onglets sont déplacés avant `tabId`, si `true`, les onglets sont déplacés après `tabId`. Par défaut à `false`.
+      - : `boolean`. Détermine s'il faut déplacer les onglets dans les `tabIds` avant ou après `tabId` dans la succession. Si `false`, les onglets sont déplacés avant `tabId`, si `true`, les onglets sont déplacés après `tabId`. Par défaut à `false`.
     - `insert` {{optional_inline}}
       - : `boolean`. Détermine s'il faut lier les prédécesseurs ou successeurs actuels (selon `options.append`) de `tabId`à l'autre côté de la chaîne après son ajout ou son ajout. Si true, l'un des événements suivants se produit : si `options.append` est `false`, le premier onglet du tableau est défini comme successeur de tout prédécesseur actuel de  `tabId`; Si `options.append` est `true`, le successeur actuel de tabId est défini comme le successeur du dernier onglet du tableau. La valeur par défaut est `false`.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md
index 71f55b5e84..3b30028778 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md
@@ -30,13 +30,13 @@ Pour définir les en-têtes et les pieds de page, vous pouvez inclure certains c
 
 Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivantes :
 
-- `edgeBottom `{{optional_inline}}
+- `edgeBottom` {{optional_inline}}
   - : `number`. L'espacement entre le bas des pieds et le bord inférieur du papier (pouces). Par défaut : 0.
-- `edgeLeft `{{optional_inline}}
+- `edgeLeft` {{optional_inline}}
   - : `number`. L'espacement entre l'en-tête / pied de page gauche et le bord gauche du papier (pouces). Par défaut : 0
-- `edgeRight `{{optional_inline}}
+- `edgeRight` {{optional_inline}}
   - : `number`. L'espacement entre l'en-tête / pied droit et le bord gauche du papier (pouces). Par défaut : 0.
-- `edgeTop `{{optional_inline}}
+- `edgeTop` {{optional_inline}}
   - : `number`. L'espacement entre le haut des en-têtes et le bord supérieur du papier (pouces). Par défaut : 0
 - `footerCenter` {{optional_inline}}
   - : `string`. Le texte du pied de page central de la page. Défaut : ''.
@@ -50,17 +50,17 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant
   - : `string`. Le texte de l'en-tête gauche de la page. Par défaut : '\&T'.
 - `headerRight` {{optional_inline}}
   - : `string`. Le texte de l'en-tête de la page. Par défaut : '\&U'.
-- `marginBottom `{{optional_inline}}
+- `marginBottom` {{optional_inline}}
   - : `number`. La marge entre le contenu de la page et le bord inférieur du papier (pouces). Par défaut : 0.5.
-- `marginLeft `{{optional_inline}}
+- `marginLeft` {{optional_inline}}
   - : `number`. La marge entre le contenu de la page et le bord gauche du papier (pouces). Par défaut : 0.5.
-- `marginRight `{{optional_inline}}
+- `marginRight` {{optional_inline}}
   - : `number`. La marge entre le contenu de la page et le bord droit du papier (en pouces). Par défaut : 0.5.
-- `marginTop `{{optional_inline}}
+- `marginTop` {{optional_inline}}
   - : `number`. La marge entre le contenu de la page et le bord supérieur du papier (pouces). Par défaut : 0.5.
-- `orientation `{{optional_inline}}
+- `orientation` {{optional_inline}}
   - : `integer`. Orientation de la page: 0 signifie "portrait", 1 signifie "paysage". Par défaut : 0.
-- `paperHeight `{{optional_inline}}
+- `paperHeight` {{optional_inline}}
   - : `number`. La hauteur du papier dans les unités de format papier. Par défaut : 11.0.
 - `paperSizeUnit` {{optional_inline}}
   - : `integer`. L'unité de format de papier: 0 = pouces, 1 = millimètres. Par défaut : 0.
diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
index e380822b15..cde0d97123 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md
@@ -14,7 +14,7 @@ tags:
   - tabs
 translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/sendMessage
 ---
-{{AddonSidebar()}}Envoi un message unique depuis le script d'arrière plan d'extension (ou autre scripts accrédité, comme les scripts popup ou les scripts de page d'options) vers n'importe quel [script de contenu ](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)concerné par l'extension et qui s'execute dans l'onglet spécifié.Ce message sera reçu dans script de contenu par n'importe quel gestionnaire d'évènements à l'écoute de l'évènement
+{{AddonSidebar()}}Envoi un message unique depuis le script d'arrière plan d'extension (ou autre scripts accrédité, comme les scripts popup ou les scripts de page d'options) vers n'importe quel [script de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) concerné par l'extension et qui s'execute dans l'onglet spécifié.Ce message sera reçu dans script de contenu par n'importe quel gestionnaire d'évènements à l'écoute de l'évènement
 
 {{WebExtAPIRef("runtime.onMessage")}}. Les gestionnaires d'évènements peuvent optionellement envoyé une réponse en retour au script d'arrière plan en utilisant l'argument `sendResponse`.
 
diff --git a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md
index d1f3a1d716..d6c404734e 100644
--- a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md
+++ b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md
@@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/theme/onUpdated
 L'événement se déclenche lorsqu'un thème fourni en tant qu'extension de navigateur est appliqué ou supprimé, plus précisément :
 
 - Quand un [thème statique](/fr/Add-ons/Themes/Theme_concepts#Static_themes) est installé
-- Quand un [thème dynamique ](/fr/Add-ons/WebExtensions/API/theme)appelle [`theme.update()`](/fr/Add-ons/WebExtensions/API/theme/update) ou [`theme.reset()`](/fr/Add-ons/WebExtensions/API/theme/update)
+- Quand un [thème dynamique](/fr/Add-ons/WebExtensions/API/theme) appelle [`theme.update()`](/fr/Add-ons/WebExtensions/API/theme/update) ou [`theme.reset()`](/fr/Add-ons/WebExtensions/API/theme/update)
 - Quand un thème est désinstallé
 
 Notez que cet événement n'est pas déclenché pour les thèmes intégrés.
-- 
cgit v1.2.3-54-g00ecf


From 95206a9aecc234f58dc001eb36553efc71cfb9e3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 7 Mar 2022 23:02:04 +0900
Subject: Element インターフェイスの記事を更新 (#4313)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Element インターフェイスの記事を移行

* 2022/02/28 時点の英語版に同期

* Update files/ja/web/api/element/index.md

Co-authored-by: potappo <potappo@gmail.com>

Co-authored-by: potappo <potappo@gmail.com>
---
 files/ja/web/api/element/index.html | 464 ------------------------------------
 files/ja/web/api/element/index.md   | 442 ++++++++++++++++++++++++++++++++++
 2 files changed, 442 insertions(+), 464 deletions(-)
 delete mode 100644 files/ja/web/api/element/index.html
 create mode 100644 files/ja/web/api/element/index.md

diff --git a/files/ja/web/api/element/index.html b/files/ja/web/api/element/index.html
deleted file mode 100644
index 6bece2f11f..0000000000
--- a/files/ja/web/api/element/index.html
+++ /dev/null
@@ -1,464 +0,0 @@
----
-title: Element
-slug: Web/API/Element
-tags:
-  - API
-  - DOM
-  - DOM Reference
-  - Element
-  - Interface
-  - Reference
-  - Web API
-browser-compat: api.Element
-translation_of: Web/API/Element
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"><strong><code>Element</code></strong> は {{DOMxRef("Document")}} の中にあるすべての要素オブジェクト (すなわち、要素を表現するオブジェクト) が継承する、もっとも一般的な基底クラスです。このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。多くの具体的なクラスが <code>Element</code> を継承します。</span>例えば HTML 要素には {{DOMxRef("HTMLElement")}} インターフェイス、SVG 要素には {{DOMxRef("SVGElement")}} インターフェイスなど。ほとんどの機能は、クラスの階層を下りると具体化していきます。</p>
-
-<p>XUL の <code>XULElement</code> インターフェイスのようなウェブプラットフォームの枠外の言語もまた、<code>Element</code> インターフェイスを通じて要素を実装しています。</p>
-
-<p>{{InheritanceDiagram}}</p>
-
-<h2 id="Properties">プロパティ</h2>
-
-<p><em><code>Element</code> は、親インターフェスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承します。</em></p>
-
-<dl>
- <dt>{{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}</dt>
- <dd>このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。</dd>
- <dt>{{DOMxRef("Element.attributes")}} {{readOnlyInline}}</dt>
- <dd>対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。</dd>
- <dt>{{domxref("Element.childElementCount")}} {{readonlyInline}}</dt>
- <dd>この要素の子要素の数を返します。</dd>
- <dt>{{domxref("Element.children")}} {{readonlyInline}}</dt>
- <dd>この要素の子要素を返します。</dd>
- <dt>{{DOMxRef("Element.classList")}} {{readOnlyInline}}</dt>
- <dd>class 属性のトークンリストを含む {{DOMxRef("DOMTokenList")}} を返します。</dd>
- <dt>{{DOMxRef("Element.className")}}</dt>
- <dd>{{DOMxRef("DOMString")}} 型であり、要素のクラスを表します。</dd>
- <dt>{{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}</dt>
- <dd>要素の内部の高さを表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}</dt>
- <dd>要素の左境界の幅を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.clientTop")}} {{readOnlyInline}}</dt>
- <dd>要素の上境界の幅を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}</dt>
- <dd>要素の内部の幅を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{domxref("Element.firstElementChild")}} {{readonlyInline}}</dt>
- <dd>アクセシビリティ向けに公開されたラベルを含む {{DOMxRef("DOMString")}} を返します。</dd>
- <dt>{{DOMxRef("Element.id")}}</dt>
- <dd>{{DOMxRef("DOMString")}} 型であり、要素の id を表します。</dd>
- <dt>{{DOMxRef("Element.innerHTML")}}</dt>
- <dd>{{DOMxRef("DOMString")}} 型であり、要素内容のマークアップを表します。</dd>
- <dt>{{domxref("Element.lastElementChild")}} {{readonlyInline}}</dt>
- <dd>Returns the last child element of this element.</dd>
- <dt>{{DOMxRef("Element.localName")}} {{readOnlyInline}}</dt>
- <dd>要素の修飾名のローカル部分を表す {{DOMxRef("DOMString")}} です。</dd>
- <dt>{{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}</dt>
- <dd>要素の名前空間の URI。名前空間がない場合は <code>null</code> になります。
- <div class="note">
- <p><strong>注:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a></code> 名前空間内に存在します。</p>
- </div>
- </dd>
- <dt>{{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}</dt>
- <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直後の要素 (弟) を表します。兄弟ノードがなければ <code>null</code>。</dd>
- <dt>{{DOMxRef("Element.outerHTML")}}</dt>
- <dd>{{DOMxRef("DOMString")}} 型であり、その要素を内容に含むマークアップを表します。設定に用いる場合、与えられた文字列からパースされたノードでその要素を置換します。</dd>
- <dt>{{DOMxRef("Element.part")}}</dt>
- <dd>要素のパート識別子 (すなわち、 <code>part</code> 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。</dd>
- <dt>{{DOMxRef("Element.prefix")}} {{readOnlyInline}}</dt>
- <dd>要素の名前空間接頭辞を表す {{DOMxRef("DOMString")}}。接頭辞が指定されていない場合は <code>null</code>。</dd>
- <dt>{{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}</dt>
- <dd>{{DOMxRef("Element")}} 型であり、ツリー上で自身の直前の要素 (兄) を表します。兄弟ノードが無ければ <code>null</code>。</dd>
- <dt>{{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}</dt>
- <dd>要素のスクロールビューの高さを表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.scrollLeft")}}</dt>
- <dd>{{jsxref("Number")}} 型であり、要素の左スクロールオフセット値を表します。</dd>
- <dt>{{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
- <dd>要素で可能な左スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.scrollTop")}}</dt>
- <dd>文書の上端が垂直方向にスクロールされた量をピクセル数で表す {{jsxref("Number")}} です。</dd>
- <dt>{{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}</dt>
- <dd>要素で可能な上スクロールオフセットの最大値を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}</dt>
- <dd>要素のスクロールビュー幅を表す {{jsxref("Number")}} を返します。</dd>
- <dt>{{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}</dt>
- <dd>要素が所持しているオープンモードの Shadow Root、あるいはオープンモードの Shadow Root がない場合は null を返します。</dd>
- <dt>{{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}</dt>
- <dd>オープン・クローズに関係なく、要素が所持している Shadow Root を返します。<strong><a href="/ja/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> に限り使用できます。</strong></dd>
- <dt>{{DOMxRef("Element.slot")}} {{Experimental_Inline}}</dt>
- <dd>要素が挿入されている shadow DOM スロットの名前を返します。</dd>
- <dt>{{DOMxRef("Element.tagName")}} {{readOnlyInline}}</dt>
- <dd>要素のタグ名を {{jsxref("String")}} で返します。</dd>
-</dl>
-
-<h3 id="Properties_included_from_Aria">ARIA から導入されたプロパティ</h3>
-
-<p><em><code>Element</code> インターフェイスは <code>ARIAMixin</code> ミックスインで定義されている以下のプロパティを持っています。</em></p>
-
-<dl>
-  <dt>{{domxref("Element.ariaAtomic")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-atomic</code> 属性を反映し、 <code>aria-relevant</code> 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。</dd>
-  <dt>{{domxref("Element.ariaAutoComplete")}}</dt>
-  <dd>{{domxref("DOMString")}} で、 <code>aria-autocomplete</code> 属性を反映し、コンボボックス、サーチボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。</dd>
-  <dt>{{domxref("Element.ariaBusy")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-busy</code> 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。</dd>
-  <dt>{{domxref("Element.ariaChecked")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-checked</code> 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。</dd>
-  <dt>{{domxref("Element.ariaColCount")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-colcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。</dd>
-  <dt>{{domxref("Element.ariaColIndex")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-colindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。</dd>
-  <dt>{{domxref("Element.ariaColIndexText")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-colindextext</code> 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。</dd>
-  <dt>{{domxref("Element.ariaColSpan")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-colspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。</dd>
-  <dt>{{domxref("Element.ariaCurrent")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-current</code> 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。</dd>
-  <dt>{{domxref("Element.ariaDescription")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-description</code> 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。</dd>
-  <dt>{{domxref("Element.ariaDisabled")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-disabled</code> 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。</dd>
-  <dt>{{domxref("Element.ariaExpanded")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-expanded</code> 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。</dd>
-  <dt>{{domxref("Element.ariaHasPopup")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-haspopup</code> 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。</dd>
-  <dt>{{domxref("Element.ariaHidden")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-hidden</code> 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。</dd>
-  <dt>{{domxref("Element.ariaKeyShortcuts")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-keyshortcuts</code> 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。</dd>
-  <dt>{{domxref("Element.ariaLabel")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-label</code> 属性を反映し、現在の要素をラベル付けする文字列値を定義します。</dd>
-  <dt>{{domxref("Element.ariaLevel")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-level</code> 属性を反映し、構造内の要素の階層レベルを定義します。</dd>
-  <dt>{{domxref("Element.ariaLive")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-live</code> 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。</dd>
-  <dt>{{domxref("Element.ariaModal")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-modal</code> 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。</dd>
-  <dt>{{domxref("Element.ariaMultiline")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-multiline</code> 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。</dd>
-  <dt>{{domxref("Element.ariaMultiSelectable")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-multiselectable</code> 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。</dd>
-  <dt>{{domxref("Element.ariaOrientation")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-orientation</code> 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。</dd>
-  <dt>{{domxref("Element.ariaPlaceholder")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-placeholder</code> 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。</dd>
-  <dt>{{domxref("Element.ariaPosInSet")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-posinset</code> 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。</dd>
-  <dt>{{domxref("Element.ariaPressed")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-pressed</code> 属性を反映し、トグルボタンの現在の「押された」状態を示します。</dd>
-  <dt>{{domxref("Element.ariaReadOnly")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-readonly</code> 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。</dd>
-  <dt>{{domxref("Element.ariaRelevant")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-relevant</code> 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 <code>aria-live</code> リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。</dd>
-  <dt>{{domxref("Element.ariaRequired")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-required</code> 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。</dd>
-  <dt>{{domxref("Element.ariaRoleDescription")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-roledescription</code> 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。</dd>
-  <dt>{{domxref("Element.ariaRowCount")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-rowcount</code> 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。</dd>
-  <dt>{{domxref("Element.ariaRowIndex")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-rowindex</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。</dd>
-  <dt>{{domxref("Element.ariaRowIndexText")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-rowindextext</code> 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。</dd>
-  <dt>{{domxref("Element.ariaRowSpan")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-rowspan</code> 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。</dd>
-  <dt>{{domxref("Element.ariaSelected")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-selected</code> 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。</dd>
-  <dt>{{domxref("Element.ariaSetSize")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-setsize</code> 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。</dd>
-  <dt>{{domxref("Element.ariaSort")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-sort</code> 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。</dd>
-  <dt>{{domxref("Element.ariaValueMax")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-valueMax</code> 属性を反映し、 range ウィジェットの最大許容値を定義します。</dd>
-  <dt>{{domxref("Element.ariaValueMin")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-valueMin</code> 属性を反映し、 range ウィジェットに許容される最小値を定義します。</dd>
-  <dt>{{domxref("Element.ariaValueNow")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-valueNow</code> 属性を反映し、 range ウィジェットの現在の値を定義します。</dd>
-  <dt>{{domxref("Element.ariaValueText")}}</dt>
-  <dd>{{domxref("DOMString")}} で <code>aria-valuetext</code> 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義ます。</dd>
-</dl>
-
-<h3 id="Handlers">イベントハンドラー</h3>
-
-<dl>
- <dt>{{domxref("Element.onfullscreenchange")}}</dt>
- <dd>要素が全画面モードに入ったり出たりしたときに送られる {{event("fullscreenchange")}} イベントのイベントハンドラーです。これは期待された遷移が成功したかどうかを監視するために使用することができますが、アプリの実行がバックグラウンドになった場合など、想定外の変化を監視することもできます。</dd>
- <dt>{{domxref("Element.onfullscreenerror")}}</dt>
- <dd>全画面モードへ移行しようとしてエラーが発生したときに送られる {{event("fullscreenerror")}} イベントのイベントハンドラーです。</dd>
-</dl>
-
-<h2 id="Methods">メソッド</h2>
-
-<p><em><code>Element</code> は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。</em></p>
-
-<dl>
- <dt>{{DOMxRef("EventTarget.addEventListener()")}}</dt>
- <dd>要素に特定のイベント型を扱うイベントハンドラーを登録します。</dd>
- <dt>{{DOMxRef("Element.attachShadow()")}}</dt>
- <dd>指定した要素に shadow DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。</dd>
- <dt>{{DOMxRef("Element.animate()")}} {{Experimental_Inline}}</dt>
- <dd>要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。</dd>
- <dt>{{DOMxRef("Element.append()")}}</dt>
- <dd>この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd>
- <dt>{{DOMxRef("Element.closest()")}}</dt>
- <dd>引数に指定したセレクターによって選択される要素がもっとも近い祖先要素 (または当該要素自身) を {{DOMxRef("Element")}} 型で返します。</dd>
- <dt>{{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt>
- <dd>要素で <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a> を作成します。その要素はシャドウホストになります。 {{DOMxRef("ShadowRoot")}} を返します。</dd>
- <dt>{{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}</dt>
- <dd>{{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを提供する {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスを返します。</dd>
- <dt>{{DOMxRef("EventTarget.dispatchEvent()")}}</dt>
- <dd>DOM 内のこの (this) ノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す {{jsxref("Boolean")}} を返します。</dd>
- <dt>{{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}</dt>
- <dd>要素でアクティブな Animation オブジェクトの配列を返します。</dd>
- <dt>{{DOMxRef("Element.getAttribute()")}}</dt>
- <dd>現在ノードから指定された名前の付いた属性値を取得して、 {{jsxref("Object")}} を返します。</dd>
- <dt>{{DOMxRef("Element.getAttributeNames()")}}</dt>
- <dd>現在の要素の属性名の配列を返します。</dd>
- <dt>{{DOMxRef("Element.getAttributeNode()")}}</dt>
- <dd>現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。</dd>
- <dt>{{DOMxRef("Element.getAttributeNodeNS()")}}</dt>
- <dd>指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。</dd>
- <dt>{{DOMxRef("Element.getAttributeNS()")}}</dt>
- <dd>現在ノードから指定された名前と名前空間 (namespase) を持つ属性値を取得して、{{jsxref("Object")}} を返します。</dd>
- <dt>{{DOMxRef("Element.getBoundingClientRect()")}}</dt>
- <dd>要素のサイズと、ビューポートにおける位置を返します。</dd>
- <dt>{{domxref("Element.getBoxQuads()")}} {{experimental_inline}}</dt>
- <dd>{{domxref("DOMQuad")}} オブジェクトのリストを返し、これはノードの CSS フラグメントを表します。</dd>
- <dt>{{DOMxRef("Element.getClientRects()")}}</dt>
- <dd>クライアント (ソフト) 内のテキスト上の個々の行の外接矩形 (bounding rectangle) の集合を返します。</dd>
- <dt>{{DOMxRef("Element.getElementsByClassName()")}}</dt>
- <dd>現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を持つ {{DOMxRef("HTMLCollection")}} を返します。</dd>
- <dt>{{DOMxRef("Element.getElementsByTagName()")}}</dt>
- <dd>現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd>
- <dt>{{DOMxRef("Element.getElementsByTagNameNS()")}}</dt>
- <dd>現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得した {{DOMxRef("HTMLCollection")}} を返します。</dd>
- <dt>{{DOMxRef("Element.hasAttribute()")}}</dt>
- <dd>要素が指定された指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
- <dt>{{DOMxRef("Element.hasAttributeNS()")}}</dt>
- <dd>要素が指定された名前空間内に指定された属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
- <dt>{{DOMxRef("Element.hasAttributes()")}}</dt>
- <dd>要素が現在 1 つ以上の属性をもっているかを示す {{jsxref("Boolean")}} を返します。</dd>
- <dt>{{DOMxRef("Element.hasPointerCapture()")}}</dt>
- <dd>呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。</dd>
- <dt>{{DOMxRef("Element.insertAdjacentElement()")}}</dt>
- <dd>メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。</dd>
- <dt>{{DOMxRef("Element.insertAdjacentHTML()")}}</dt>
- <dd>テキストを HTML または XML としてパースして、パース結果のノードをツリーの指定した位置に挿入します。</dd>
- <dt>{{DOMxRef("Element.insertAdjacentText()")}}</dt>
- <dd>メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。</dd>
- <dt>{{DOMxRef("Element.matches()")}}</dt>
- <dd>要素が指定されたセレクター文字列で選択されているか否かを示す {{jsxref("Boolean")}} を返します。</dd>
- <dt>{{DOMxRef("Element.prepend()")}}</dt>
- <dd>この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。</dd>
- <dt>{{DOMxRef("Element.querySelector()")}}</dt>
- <dd>要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。</dd>
- <dt>{{DOMxRef("Element.querySelectorAll()")}}</dt>
- <dd>要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。</dd>
- <dt>{{DOMxRef("Element.releasePointerCapture()")}}</dt>
- <dd>以前に特定の {{DOMxRef("PointerEvent","pointer イベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。</dd>
- <dt>{{DOMxRef("Element.remove()")}}</dt>
- <dd>親要素の子リストから、要素を取り除きます。</dd>
- <dt>{{DOMxRef("Element.removeAttribute()")}}</dt>
- <dd>現在ノードから，指定された名前を持つ属性を取り除きます。</dd>
- <dt>{{DOMxRef("Element.removeAttributeNode()")}}</dt>
- <dd>現在のノードから名前の付いた属性のノード表現を削除します。</dd>
- <dt>{{DOMxRef("Element.removeAttributeNS()")}}</dt>
- <dd>現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。</dd>
- <dt>{{DOMxRef("EventTarget.removeEventListener()")}}</dt>
- <dd>要素からイベントリスナーを取り除きます。</dd>
- <dt>{{DOMxRef("Element.replaceChildren()")}}</dt>
- <dd>{{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。</dd>
- <dt>{{DOMxRef("Element.replaceWith()")}}</dt>
- <dd>親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。</dd>
-<dt>{{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}</dt>
- <dd>要素を全画面表示するよう、ブラウザーへ非同期的に要求します。</dd>
- <dt>{{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}</dt>
- <dd>指定した要素でポインターをロックするよう、非同期的に要求できます。</dd>
- <dt>{{domxref("Element.scroll()")}}</dt>
- <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd>
- <dt>{{domxref("Element.scrollBy()")}}</dt>
- <dd>指定された量だけ要素をスクロールします。</dd>
- <dt>{{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}</dt>
- <dd>要素がビューの内側に来るまでページをスクロールします。</dd>
- <dt>{{domxref("Element.scrollTo()")}}</dt>
- <dd>指定された要素の中で特定の座標のセットへスクロールします。</dd>
- <dt>{{DOMxRef("Element.setAttribute()")}}</dt>
- <dd>現在ノードに、指定された名前を持つ属性値を設定します。</dd>
- <dt>{{DOMxRef("Element.setAttributeNode()")}}</dt>
- <dd>現在のノードから指定された属性のノード表現を設定します。</dd>
- <dt>{{DOMxRef("Element.setAttributeNodeNS()")}}</dt>
- <dd>指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。</dd>
- <dt>{{DOMxRef("Element.setAttributeNS()")}}</dt>
- <dd>現在ノードに、指定された名前と名前空間を持つ属性値を設定します。</dd>
- <dt>{{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}</dt>
- <dd>すべてのマウスイベントを要素にリダイレクトし、マウスイベントキャプチャーを開始 (set up) します。</dd>
- <dt>{{DOMxRef("Element.setPointerCapture()")}}</dt>
- <dd>以降の <a href="/ja/docs/Web/API/Pointer_events">pointer イベント</a> のキャプチャー対象とする、特定の要素を指定します。</dd>
- <dt>{{DOMxRef("Element.toggleAttribute()")}}</dt>
- <dd>指定した要素で boolean 型の属性を切り替える、すなわち属性が存在していれば削除、属性が存在していなければ追加します。</dd>
-</dl>
-
-<h2 id="Events">イベント</h2>
-
-<p>これらのイベントを待ち受けするには、 <code>addEventListener()</code> を使用するか、イベントリスナーをこのインターフェイスの <code>on<em>イベント名</em></code> プロパティに代入するかします。</p>
-
-<dl>
- <dt>{{domxref("HTMLDialogElement/cancel_event", "cancel")}}</dt>
- <dd>ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発生します。ブラウザーがこのイベントを発生させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーのユーザーインターフェイスの一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。<br>
- {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/error_event", "error")}}</dt>
- <dd>リソースの読み込みに失敗したか、利用できなかった場合に発生します。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。<br>
- {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/scroll_event", "scroll")}}</dt>
- <dd>文書のビューまたは要素がスクロールしたときに発生します。<br>
- {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/select_event", "select")}}</dt>
- <dd>いくらかのテキストが選択されたときに発生します。<br>
- {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/show_event", "show")}}</dt>
- <dd>{{domxref("Element/contextmenu_event", "contextmenu")}} イベントが <code><a href="/ja/docs/Web/HTML/Global_attributes/contextmenu">contextmenu</a></code> 属性を持つ要素で発生したか、バブリングで到達した場合に発生します。 {{deprecated_inline}}<br>
- {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/wheel_event","wheel")}}</dt>
- <dd>ユーザーがポインティングデバイス (普通はマウス) のホイールボタンを回転させたときに発生します。<br>
- {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティから利用することもできます。</dd>
-</dl>
-
-<h3 id="Clipboard_events">クリップボードイベント</h3>
-
-<dl>
- <dt>{{domxref("Element/copy_event", "copy")}}</dt>
- <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発生します。<br>
- {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/cut_event", "cut")}}</dt>
- <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発生します。<br>
- {{domxref("HTMLElement/oncut", "oncut")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/paste_event", "paste")}}</dt>
- <dd>ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発生します。<br>
- {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティから利用することもできます。</dd>
-</dl>
-
-<h3 id="Composition_events">構成イベント</h3>
-
-<dl>
- <dt>{{domxref("Element/compositionend_event", "compositionend")}}</dt>
- <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発生します。</dd>
- <dt>{{domxref("Element/compositionstart_event", "compositionstart")}}</dt>
- <dd>{{glossary("input method editor")}} のようなテキスト構成システムで、新しい入力セッションを始まったときに発生します。</dd>
- <dt>{{domxref("Element/compositionupdate_event", "compositionupdate")}}</dt>
- <dd>{{glossary("input method editor")}} のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発生します。</dd>
-</dl>
-
-<h3 id="Focus_events">フォーカスイベント</h3>
-
-<dl>
- <dt>{{domxref("Element/blur_event", "blur")}}</dt>
- <dd>要素がフォーカスを失ったときに発生します。<br>
- {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/focus_event", "focus")}}</dt>
- <dd>要素がフォーカスを受け取ったときに発生します。<br>
- {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/focusin_event", "focusin")}}</dt>
- <dd>要素がフォーカスを受け取ろうとしているときに発生します。</dd>
- <dt>{{domxref("Element/focusout_event", "focusout")}}</dt>
- <dd>要素がフォーカスを失おうとしているときに発生します。</dd>
-</dl>
-
-<h3 id="Fullscreen_events">全画面イベント</h3>
-
-<dl>
- <dt>{{domxref("Element/fullscreenchange_event", "fullscreenchange")}}</dt>
- <dd>全画面モードへの移行時または終了時に、 {{domxref("Document")}} または {{domxref("Element")}} に送られます。</dd>
- <dd>{{domxref("Element.onfullscreenchange", "onfullscreenchange")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/fullscreenerror_event", "fullscreenerror")}}</dt>
- <dd>全画面モードへの移行または終了を試みている中でエラーが発生したときに、 <code>Document</code> または <code>Element</code> に送られます。</dd>
- <dd>{{domxref("Element.onfullscreenerror", "onfullscreenerror")}} プロパティから利用することもできます。</dd>
-</dl>
-
-<h3 id="Keyboard_events">キーボードイベント</h3>
-
-<dl>
- <dt><code>{{domxref("Element/keydown_event", "keydown")}}</code></dt>
- <dd>キーが押されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティから利用することもできます。</dd>
- <dt><code>{{domxref("Element/keypress_event", "keypress")}}</code></dt>
- <dd>文字の値を発生させるキーが押されたときに発生します。 {{deprecated_inline}}<br>
- {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティから利用することもできます。</dd>
- <dt><code>{{domxref("Element/keyup_event", "keyup")}}</code></dt>
- <dd>キーが離されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティから利用することもできます。</dd>
-</dl>
-
-<h3 id="Mouse_events">マウスイベント</h3>
-
-<dl>
- <dt>{{domxref("Element/auxclick_event", "auxclick")}}</dt>
- <dd>ポインティングデバイスの第一ボタン以外のボタン (例えば、マウスの左ボタン以外のボタン) が要素上で押されて離されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/click_event", "click")}}</dt>
- <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で押されて離されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/contextmenu_event", "contextmenu")}}</dt>
- <dd>ユーザーがコンテキストメニューを開こうとしたときに発生します。<br>
- {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/dblclick_event", "dblclick")}}</dt>
- <dd>ポインティングデバイスのボタン (例えば、マウスの第一ボタン) が単一の要素上で2回クリックされたときに発生します。<br>
- {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}</dt>
- <dd>要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発生します。</dd>
- <dt>{{domxref("Element/mousedown_event", "mousedown")}}</dt>
- <dd>ポインティングデバイスのボタンが要素上で押されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mouseenter_event", "mouseenter")}}</dt>
- <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の上へ移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mouseleave_event", "mouseleave")}}</dt>
- <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素の外へ移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mousemove_event", "mousemove")}}</dt>
- <dd>ポインティングデバイス (ふつうはマウス) が、要素の上を移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mouseout_event", "mouseout")}}</dt>
- <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mouseover_event", "mouseover")}}</dt>
- <dd>ポインティングデバイス (ふつうはマウス) が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/mouseup_event", "mouseup")}}</dt>
- <dd>ポインティングデバイスのボタンが要素の上で離されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}</dt>
- <dd>trackpadtouchscreen の上の圧力が変化するたびに発生します。</dd>
- <dt>{{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}</dt>
- <dd>「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発生します。</dd>
- <dt>{{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}</dt>
- <dd>{{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発生します。</dd>
- <dt>{{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}</dt>
- <dd>「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発生します。</dd>
-</dl>
-
-<h3 id="Touch_events">タッチイベント</h3>
-
-<dl>
- <dt>{{domxref("Element/touchcancel_event", "touchcancel")}}</dt>
- <dd>1つ以上のタッチ点が実装依存の理由により破棄された (例えば、タッチ点が多く作られすぎた) 場合に発生します。<br>
- {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/touchend_event", "touchend")}}</dt>
- <dd>1つ以上のタッチ点がタッチ面から取り除かれたときに発生します。<br>
- {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/touchmove_event", "touchmove")}}</dt>
- <dd>1つ以上のタッチ点がタッチ面上で移動したときに発生します。<br>
- {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティから利用することもできます。</dd>
- <dt>{{domxref("Element/touchstart_event", "touchstart")}}</dt>
- <dd>1つ以上のタッチ点がタッチ面に配置されたときに発生します。<br>
- {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティから利用することもできます。</dd>
-</dl>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
diff --git a/files/ja/web/api/element/index.md b/files/ja/web/api/element/index.md
new file mode 100644
index 0000000000..407d8b2672
--- /dev/null
+++ b/files/ja/web/api/element/index.md
@@ -0,0 +1,442 @@
+---
+title: Element
+slug: Web/API/Element
+tags:
+  - API
+  - DOM
+  - DOM リファレンス
+  - Element
+  - インターフェイス
+  - リファレンス
+  - Web API
+browser-compat: api.Element
+translation_of: Web/API/Element
+---
+{{APIRef("DOM")}}
+
+**`Element`** は {{DOMxRef("Document")}} が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが `Element` を継承しています。
+
+例えば {{DOMxRef("HTMLElement")}} インターフェイスは HTML 要素の基本インターフェイスであり、 {{DOMxRef("SVGElement")}} インターフェイスはすべての SVG 要素の基本になります。ほとんどの機能は、クラスの階層を下りると具体化していきます。
+
+XUL の `XULElement` インターフェイスのようなウェブプラットフォームの枠外の言語もまた、`Element` インターフェイスを実装しています。
+
+{{InheritanceDiagram}}
+
+## プロパティ
+
+_`Element` は、親インターフェイスである {{DOMxRef("Node")}}、およびその親インターフェイスである {{DOMxRef("EventTarget")}} からプロパティを継承しています。_
+
+- {{DOMxRef("Element.assignedSlot")}}{{readonlyInline}}
+  - : このノードが挿入された {{htmlelement("slot")}} を表す {{DOMxRef("HTMLSlotElement")}} を返します。
+- {{DOMxRef("Element.attributes")}} {{readOnlyInline}}
+  - : 対応する HTML 要素に関連したすべての属性のリストである {{DOMxRef("NamedNodeMap")}} を返します。
+- {{domxref("Element.childElementCount")}} {{readonlyInline}}
+  - : この要素の子要素の数を返します。
+- {{domxref("Element.children")}} {{readonlyInline}}
+  - : この要素の子要素を返します。
+- {{DOMxRef("Element.classList")}} {{readOnlyInline}}
+  - : class 属性のリストが入った {{DOMxRef("DOMTokenList")}} を返します。
+- {{DOMxRef("Element.className")}}
+  - : {{DOMxRef("DOMString")}} で、この要素のクラスを表します。
+- {{DOMxRef("Element.clientHeight")}} {{readOnlyInline}}
+  - : この要素の内部の高さを表す数値を返します。
+- {{DOMxRef("Element.clientLeft")}} {{readOnlyInline}}
+  - : この要素の左境界の幅を表す数値を返します。
+- {{DOMxRef("Element.clientTop")}} {{readOnlyInline}}
+  - : この要素の上境界の幅を表す数値を返します。
+- {{DOMxRef("Element.clientWidth")}} {{readOnlyInline}}
+  - : この要素の内部の幅を表す数値を返します。
+- {{domxref("Element.firstElementChild")}} {{readonlyInline}}
+  - : この要素の最初の子要素を返します。
+- {{DOMxRef("Element.id")}}
+  - : {{DOMxRef("DOMString")}} で、この要素の id を表します。
+- {{DOMxRef("Element.innerHTML")}}
+  - : {{DOMxRef("DOMString")}} で、この要素の内容のマークアップを表します。
+- {{domxref("Element.lastElementChild")}} {{readonlyInline}}
+  - : この要素の最後の子要素を返します。
+- {{DOMxRef("Element.localName")}} {{readOnlyInline}}
+  - : {{DOMxRef("DOMString")}} で、この要素の修飾名のローカル部分を表します。
+- {{DOMxRef("Element.namespaceURI")}} {{readonlyInline}}
+
+  - : この要素の名前空間の URI。名前空間がない場合は `null` になります。
+
+    > **Note:** Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) 名前空間内に存在します。
+
+- {{DOMxRef("Element.nextElementSibling")}} {{readOnlyInline}}
+  - : {{DOMxRef("Element")}} で、ツリー上で自身の直後の要素を表します。兄弟ノードがなければ `null` になります。
+- {{DOMxRef("Element.outerHTML")}}
+  - : {{DOMxRef("DOMString")}} で、その要素の内容を含むマークアップを表します。値が設定された場合、その文字列から解釈されたノードでその要素を置換します。
+- {{DOMxRef("Element.part")}}
+  - : 要素のパート識別子 (すなわち、 `part` 属性を使用して設定されるもの) が、 {{domxref("DOMTokenList")}} として返されます。
+- {{DOMxRef("Element.prefix")}} {{readOnlyInline}}
+  - : {{DOMxRef("DOMString")}} で、要素の名前空間接頭辞を表します。接頭辞が指定されていない場合は `null` です。
+- {{DOMxRef("Element.previousElementSibling")}} {{readOnlyInline}}
+  - : {{DOMxRef("Element")}} で、ツリー上で自身の直前の要素を表します。兄弟ノードが無ければ `null` です。
+- {{DOMxRef("Element.scrollHeight")}} {{readOnlyInline}}
+  - : この要素のスクロールビューの高さを表す数値を返します。
+- {{DOMxRef("Element.scrollLeft")}}
+  - : 数値型で、この要素の左スクロールオフセット値を表します。
+- {{DOMxRef("Element.scrollLeftMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+  - : この要素で可能な左スクロールオフセットの最大値を表す数値を返します。
+- {{DOMxRef("Element.scrollTop")}}
+  - : この要素の上端が垂直方向にスクロールされた量をピクセル数で表す数値です。
+- {{DOMxRef("Element.scrollTopMax")}} {{Non-standard_Inline}} {{readOnlyInline}}
+  - : 要素で可能な上スクロールオフセットの最大値を表す数値を返します。
+- {{DOMxRef("Element.scrollWidth")}} {{readOnlyInline}}
+  - : 要素のスクロールビュー幅を表す数値を返します。
+- {{DOMxRef("Element.shadowRoot")}}{{readOnlyInline}}
+  - : 要素が所持しているオープンモードのシャドウルート、あるいはオープンモードのシャドウルートがない場合は null を返します。
+- {{DOMxRef("Element.openOrClosedShadowRoot")}} {{Non-standard_Inline}}{{readOnlyInline}}
+  - : オープン・クローズに関係なく、要素が所持しているさh同ルートを返します。**[WebExtensions](/ja/docs/Mozilla/Add-ons/WebExtensions) に限り使用できます。**
+- {{DOMxRef("Element.setHTML")}}
+  - : HTML の文字列を解釈して[無害化](/ja/docs/Web/API/HTML_Sanitizer_API)し、 DOM の中にこの要素のサブツリーとして挿入します。
+- {{DOMxRef("Element.slot")}} {{Experimental_Inline}}
+  - : この要素が挿入されているシャドウ DOM スロットの名前を返します。
+- {{DOMxRef("Element.tagName")}} {{readOnlyInline}}
+  - : この要素のタグ名を文字列で返します。
+
+### ARIA から導入されたプロパティ
+
+_`Element` インターフェイスには、 `ARIAMixin` ミックスインで定義されている以下のプロパティを持っています。_
+
+- {{domxref("Element.ariaAtomic")}}
+  - : {{domxref("DOMString")}} で [`aria-atomic`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) 属性を反映し、 [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性で定義された変更通知に基づいて、支援技術が変更された領域のすべてを提示するか、一部のみを提示するかを示します。
+- {{domxref("Element.ariaAutoComplete")}}
+  - : {{domxref("DOMString")}} で、 [`aria-autocomplete`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) 属性を反映し、コンボボックス、検索ボックス、テキストボックスでテキストを入力する際に、ユーザーの意図した値の 1 つ以上の予測を表示するかどうか、予測が行われた場合にはどのように表示するかを指定します。
+- {{domxref("Element.ariaBusy")}}
+  - : {{domxref("DOMString")}} で [`aria-busy`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-busy) 属性を反映し、要素が修正されているかどうかを示します。支援技術では、修正が完了するまで待ってからユーザーに公開したい場合があります。
+- {{domxref("Element.ariaChecked")}}
+  - : {{domxref("DOMString")}} で [`aria-checked`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-checked) 属性を反映し、チェックボックス、ラジオボタン、その他のチェック状態を持つウィジェットの現在の「チェック」状態を示します。
+- {{domxref("Element.ariaColCount")}}
+  - : {{domxref("DOMString")}} で [`aria-colcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの列数を定義します。
+- {{domxref("Element.ariaColIndex")}}
+  - : {{domxref("DOMString")}} で [`aria-colindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の列の総数に対する要素の列インデックスまたは位置を定義します。
+- {{domxref("Element.ariaColIndexText")}}
+  - : {{domxref("DOMString")}} で [`aria-colindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) 属性を反映し、 aria-colindex の代替となる人間が読めるテキストを定義します。
+- {{domxref("Element.ariaColSpan")}}
+  - : {{domxref("DOMString")}} で [`aria-colspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする列数を定義します。
+- {{domxref("Element.ariaCurrent")}}
+  - : {{domxref("DOMString")}} で [`aria-current`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current) 属性を反映し、コンテナーまたは関連要素のセット内の現在の項目を表す要素を示します。
+- {{domxref("Element.ariaDescription")}}
+  - : {{domxref("DOMString")}} で [`aria-description`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-description) 属性を反映し、現在の要素を説明または注釈する文字列値を定義します。
+- {{domxref("Element.ariaDisabled")}}
+  - : {{domxref("DOMString")}} で [`aria-disabled`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-disabled) 属性を反映し、この要素が知覚可能であるが無効であるため、編集やその他の操作ができないことを示します。
+- {{domxref("Element.ariaExpanded")}}
+  - : {{domxref("DOMString")}} で [`aria-expanded`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) 属性を反映し、この要素が所有または制御するグループ化要素が展開されているか畳まれているかを示します。
+- {{domxref("Element.ariaHasPopup")}}
+  - : {{domxref("DOMString")}} で [`aria-haspopup`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup) 属性を反映し、この要素によって引き起こされるメニューやダイアログのような対話型のポップアップ要素の有無と種類を示します。
+- {{domxref("Element.ariaHidden")}}
+  - : {{domxref("DOMString")}} で [`aria-hidden`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-hidden) 属性を反映し、この要素がアクセシビリティ API に公開されているかどうかを示します。
+- {{domxref("Element.ariaKeyShortcuts")}}
+  - : {{domxref("DOMString")}} で [`aria-keyshortcuts`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-keyshortcuts) 属性を反映し、要素を活性化したりフォーカスを与えたりするために作者が実装したキーボードショートカットを示します。
+- {{domxref("Element.ariaLabel")}}
+  - : {{domxref("DOMString")}} で [`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) 属性を反映し、現在の要素をラベル付けする文字列値を定義します。
+- {{domxref("Element.ariaLevel")}}
+  - : {{domxref("DOMString")}} で [`aria-level`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-level) 属性を反映し、構造内の要素の階層レベルを定義します。
+- {{domxref("Element.ariaLive")}}
+  - : {{domxref("DOMString")}} で [`aria-live`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-live) 属性を反映し、この要素が更新されること、ユーザーエージェント、支援技術、ユーザーがライブ領域から期待できる更新の種類を記述します。
+- {{domxref("Element.ariaModal")}}
+  - : {{domxref("DOMString")}} で [`aria-modal`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-modal) 属性を反映し、要素が表示されたときにモーダルであるかどうかを示します。
+- {{domxref("Element.ariaMultiline")}}
+  - : {{domxref("DOMString")}} で [`aria-multiline`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiline) 属性を反映し、テキストボックスが複数行の入力を受け入れるか、一行のみを受け入れるかを示します。
+- {{domxref("Element.ariaMultiSelectable")}}
+  - : {{domxref("DOMString")}} で [`aria-multiselectable`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable) 属性を反映し、ユーザーが現在の選択可能な子孫から複数の項目を選択できることを示します。
+- {{domxref("Element.ariaOrientation")}}
+  - : {{domxref("DOMString")}} で [`aria-orientation`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-orientation) 属性を反映し、要素の方向が水平、垂直、または不明/曖昧であることを示す。
+- {{domxref("Element.ariaPlaceholder")}}
+  - : {{domxref("DOMString")}} で [`aria-placeholder`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-placeholder) 属性を反映し、コントロールに値がない場合にユーザーのデータ入力を支援するための短いヒントを定義します。
+- {{domxref("Element.ariaPosInSet")}}
+  - : {{domxref("DOMString")}} で [`aria-posinset`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-posinset) 属性を反映し、リストアイテムまたはツリーアイテムの現在のセットにおける要素の数または位置を定義します。
+- {{domxref("Element.ariaPressed")}}
+  - : {{domxref("DOMString")}} で [`aria-pressed`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-pressed) 属性を反映し、トグルボタンの現在の「押された」状態を示します。
+- {{domxref("Element.ariaReadOnly")}}
+  - : {{domxref("DOMString")}} で [`aria-readonly`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-readonly) 属性を反映し、要素が編集不可能であることを示すが、それ以外は操作可能であることを示します。
+- {{domxref("Element.ariaRelevant")}}
+  - : {{domxref("DOMString")}} で [`aria-relevant`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) 属性を反映し、ライブリージョン内のアクセシビリティツリーが変更された場合に、ユーザエージェントがどのような通知を行うかを示します。これは、 `aria-live` リージョン内のどのような変更が関連性があり、アナウンスされるべきかを記述するために使用されます。
+- {{domxref("Element.ariaRequired")}}
+  - : {{domxref("DOMString")}} で [`aria-required`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-required) 属性を反映し、フォームを送信する前に要素にユーザーの入力が必要であることを示します。
+- {{domxref("Element.ariaRoleDescription")}}
+  - : {{domxref("DOMString")}} で [`aria-roledescription`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-roledescription) 属性を反映し、要素の役割について、人間が読める、著者がローカライズした説明を定義します。
+- {{domxref("Element.ariaRowCount")}}
+  - : {{domxref("DOMString")}} で [`aria-rowcount`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) 属性を反映し、テーブル、グリッド、ツリーグリッドの行の総数を定義します。
+- {{domxref("Element.ariaRowIndex")}}
+  - : {{domxref("DOMString")}} で [`aria-rowindex`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) 属性を反映し、テーブル、グリッド、ツリーグリッド内の行の総数に対する要素の行インデックスまたは位置を定義します。
+- {{domxref("Element.ariaRowIndexText")}}
+  - : {{domxref("DOMString")}} で [`aria-rowindextext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) 属性を反映し、 aria-rowindex の代替となる人間が読めるテキストを定義しています。
+- {{domxref("Element.ariaRowSpan")}}
+  - : {{domxref("DOMString")}} で [`aria-rowspan`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性を反映し、テーブル、グリッド、ツリーグリッド内のセルまたはグリッドセルがカバーする行数を定義します。
+- {{domxref("Element.ariaSelected")}}
+  - : {{domxref("DOMString")}} で [`aria-selected`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-selected) 属性を反映し、選択状態を持つ要素の現在の「選択された」状態を示します。
+- {{domxref("Element.ariaSetSize")}}
+  - : {{domxref("DOMString")}} で [`aria-setsize`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-setsize) 属性を反映し、現在のリストアイテムまたはツリーアイテムのセットのアイテム数を定義します。
+- {{domxref("Element.ariaSort")}}
+  - : {{domxref("DOMString")}} で [`aria-sort`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-sort) 属性を反映し、テーブルやグリッドのアイテムが昇順または降順でソートされるかどうかを示します。
+- {{domxref("Element.ariaValueMax")}}
+  - : {{domxref("DOMString")}} で [`aria-valueMax`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemax) 属性を反映し、 range ウィジェットの最大許容値を定義します。
+- {{domxref("Element.ariaValueMin")}}
+  - : {{domxref("DOMString")}} で [`aria-valueMin`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuemin) 属性を反映し、 range ウィジェットに許容される最小値を定義します。
+- {{domxref("Element.ariaValueNow")}}
+  - : {{domxref("DOMString")}} で [`aria-valueNow`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow) 属性を反映し、 range ウィジェットの現在の値を定義します。
+- {{domxref("Element.ariaValueText")}}
+  - : {{domxref("DOMString")}} で [`aria-valuetext`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext) 属性を反映し、 range ウィジェットの aria-valuenow の代替となる人間が読めるテキストを定義します。
+
+## メソッド
+
+_`Element` は親である {{DOMxRef("Node")}}、およびその親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。_
+
+- {{DOMxRef("EventTarget.addEventListener()")}}
+  - : この要素、特定のイベント型を扱うイベントハンドラーを登録します。
+- {{DOMxRef("Element.after()")}}
+  - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直後に追加します。
+- {{DOMxRef("Element.attachShadow()")}}
+  - : 指定した要素にシャドウ DOM ツリーを結びつけて、その {{DOMxRef("ShadowRoot")}} への参照を返します。
+- {{DOMxRef("Element.animate()")}} {{Experimental_Inline}}
+  - : この要素でアニメーションを作成および実行するためのショートカットメソッドです。作成した Animation オブジェクトのインスタンスを返します。
+- {{DOMxRef("Element.append()")}}
+  - : この要素の最後の子の後に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
+- {{DOMxRef("Element.before()")}}
+  - : {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子ノードリストの中、 `Element` の直前に追加します。
+- {{DOMxRef("Element.closest()")}}
+  - : {{DOMxRef("Element")}} 型で、引数に指定したセレクターによって選択される要素がもっとも近い祖先要素（または当該要素自身）を返します。
+- {{DOMxRef("Element.createShadowRoot()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
+  - : この要素に[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) を作成し、シャドウホストにします。 {{DOMxRef("ShadowRoot")}} を返します。
+- {{DOMxRef("Element.computedStyleMap()")}} {{Experimental_Inline}}
+  - : {{DOMxRef("StylePropertyMapReadOnly")}} インターフェイスで、 {{DOMxRef("CSSStyleDeclaration")}} に代わる、CSS 宣言ブロックを読み取り専用で表現したものを返します。
+- {{DOMxRef("EventTarget.dispatchEvent()")}}
+  - : DOM 内のこのノードにイベントを送ります。そして、イベントをキャンセルしたハンドラーがないかを示す論理値を返します。
+- {{DOMxRef("Element.getAnimations()")}} {{Experimental_Inline}}
+  - : 要素でアクティブな Animation オブジェクトの配列を返します。
+- {{DOMxRef("Element.getAttribute()")}}
+  - : 現在ノードから指定された名前付きの属性値を取得して文字列で返します。
+- {{DOMxRef("Element.getAttributeNames()")}}
+  - : 現在の要素の属性名の配列を返します。
+- {{DOMxRef("Element.getAttributeNode()")}}
+  - : 現在のノードから、指定された属性のノード表現を取得し、 {{DOMxRef("Attr")}} として返します。
+- {{DOMxRef("Element.getAttributeNodeNS()")}}
+  - : 指定された名前と名前空間を持つ属性のノード表現を現在のノードから取得し、それを {{DOMxRef("Attr")}} として返します。
+- {{DOMxRef("Element.getAttributeNS()")}}
+  - : 現在のノードから指定された名前と名前空間を持つ属性値を取得して、文字列で返します。
+- {{DOMxRef("Element.getBoundingClientRect()")}}
+  - : この要素のサイズと、ビューポートにおける位置を返します。
+- {{domxref("Element.getBoxQuads()")}} {{experimental_inline}}
+  - : このノードの CSS フラグメントを表す {{domxref("DOMQuad")}} オブジェクトのリストを返します。
+- {{DOMxRef("Element.getClientRects()")}}
+  - : クライアント領域内のテキストの各行の外接矩形 (bounding rectangle) の集合を返します。
+- {{DOMxRef("Element.getElementsByClassName()")}}
+  - : 生きた {{DOMxRef("HTMLCollection")}} で、現在の要素から、引数に指定したクラス名のリストに該当するすべての子孫要素を生きた {{DOMxRef("HTMLCollection")}} で、返します。
+- {{DOMxRef("Element.getElementsByTagName()")}}
+  - : 現在要素から、特定のタグ名を持つすべての子孫要素の集合を取得して生きた {{DOMxRef("HTMLCollection")}} で返します。
+- {{DOMxRef("Element.getElementsByTagNameNS()")}}
+  - : 生きた {{DOMxRef("HTMLCollection")}} で、現在要素から、特定のタグ名と名前空間を持つすべての子孫要素の集合を取得して、生きた {{DOMxRef("HTMLCollection")}} で返します。
+- {{DOMxRef("Element.hasAttribute()")}}
+  - : 要素が指定された指定された属性を持っているか否かを示す論理値を返します。
+- {{DOMxRef("Element.hasAttributeNS()")}}
+  - : 要素が指定された名前空間内に指定された属性を持っているか否かを示す論理値を返します。
+- {{DOMxRef("Element.hasAttributes()")}}
+  - : 要素が現在 1 つ以上の属性をもっているかを示す論理値を返します。
+- {{DOMxRef("Element.hasPointerCapture()")}}
+  - : 呼び出された要素が、指定されたポインター ID によって識別されるポインターのポインターキャプチャを持っているかどうかを示します。
+- {{DOMxRef("Element.insertAdjacentElement()")}}
+  - : メソッドを実行した要素に対して相対的な指定位置に、要素ノードを挿入します。
+- {{DOMxRef("Element.insertAdjacentHTML()")}}
+  - : テキストを HTML または XML として解釈し、解釈結果のノードをツリーの指定した位置に挿入します。
+- {{DOMxRef("Element.insertAdjacentText()")}}
+  - : メソッドを実行した要素に対して相対的な指定位置に、テキストノードを挿入します。
+- {{DOMxRef("Element.matches()")}}
+  - : 要素が指定されたセレクター文字列で選択されるか否かを示す論理値を返します。
+- {{DOMxRef("Element.prepend()")}}
+  - : この要素の最初の子の前に、一連の {{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトを挿入します。
+- {{DOMxRef("Element.querySelector()")}}
+  - : 要素に対して、指定したセレクターに一致する最初の {{DOMxRef("Node")}} を返します。
+- {{DOMxRef("Element.querySelectorAll()")}}
+  - : 要素に対して、指定したセレクターに一致するノードの {{DOMxRef("NodeList")}} を返します。
+- {{DOMxRef("Element.releasePointerCapture()")}}
+  - : 以前に特定の{{DOMxRef("PointerEvent","ポインターイベント")}}向けに設定したポインターキャプチャーを解放 (停止) します。
+- {{DOMxRef("Element.remove()")}}
+  - : 親要素の子リストから、要素を取り除きます。
+- {{DOMxRef("Element.removeAttribute()")}}
+  - : 現在ノードから，指定された名前を持つ属性を取り除きます。
+- {{DOMxRef("Element.removeAttributeNode()")}}
+  - : 現在のノードから名前の付いた属性のノード表現を取り除きます。
+- {{DOMxRef("Element.removeAttributeNS()")}}
+  - : 現在ノードから，指定された名前と名前空間を持つ属性を取り除きます。
+- {{DOMxRef("EventTarget.removeEventListener()")}}
+  - : 要素からイベントリスナーを取り除きます。
+- {{DOMxRef("Element.replaceChildren()")}}
+  - : {{domxref("Node")}} の既存の子を指定された新しい一連の子に置き換えます。
+- {{DOMxRef("Element.replaceWith()")}}
+  - : 親の子リストの要素を、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで置き換えます。
+- {{DOMxRef("Element.requestFullscreen()")}} {{Experimental_Inline}}
+  - : 要素を全画面表示するよう、ブラウザーへ非同期的に要求します。
+- {{DOMxRef("Element.requestPointerLock()")}} {{Experimental_Inline}}
+  - : 指定した要素でポインターをロックするよう、非同期的に要求できます。
+- {{domxref("Element.scroll()")}}
+  - : 指定された要素の中で特定の座標のセットへスクロールします。
+- {{domxref("Element.scrollBy()")}}
+  - : 指定された量だけ要素をスクロールします。
+- {{DOMxRef("Element.scrollIntoView()")}} {{Experimental_Inline}}
+  - : 要素がビューの内側に来るまでページをスクロールします。
+- {{domxref("Element.scrollTo()")}}
+  - : 指定された要素の中で特定の座標のセットへスクロールします。
+- {{DOMxRef("Element.setAttribute()")}}
+  - : 現在ノードに、指定された名前を持つ属性値を設定します。
+- {{DOMxRef("Element.setAttributeNode()")}}
+  - : 現在のノードから指定された属性のノード表現を設定します。
+- {{DOMxRef("Element.setAttributeNodeNS()")}}
+  - : 指定された名前と名前空間を持つ属性のノード表現を、現在のノードから設定します。
+- {{DOMxRef("Element.setAttributeNS()")}}
+  - : 現在ノードに、指定された名前と名前空間を持つ属性値を設定します。
+- {{DOMxRef("Element.setCapture()")}} {{Non-standard_Inline}}{{Deprecated_Inline}}
+  - : マウスイベントキャプチャーを設定し、すべてのマウスイベントをこの要素にリダイレクトします。
+- {{DOMxRef("Element.setPointerCapture()")}}
+  - : 指定された要素を、以降の[ポインターイベント](/ja/docs/Web/API/Pointer_events)のキャプチャー対象として指定します。
+- {{DOMxRef("Element.toggleAttribute()")}}
+  - : 論理属性のオンオフを切り替えます。属性が存在していれば削除、属性が存在していなければ追加します。
+
+## イベント
+
+これらのイベントを待ち受けするには、 `addEventListener()` を使用するか、イベントリスナーをこのインターフェイスの `onイベント名` プロパティに代入するかします。
+
+- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+
+  - : ユーザーがブラウザーに、現在開いているダイアログを閉じたいと指示したときに {{HTMLElement("dialog")}} に発行されます。ブラウザーがこのイベントを発行させる可能性があるのは、例えばユーザーが <kbd>Esc</kbd> キーを押したり、ブラウザーの UI の一部である「ダイアログを閉じる」ボタンをクリックしたりした場合です。 {{domxref("GlobalEventHandlers/oncancel", "oncancel")}} プロパティからも利用できます。
+- {{domxref("Element/error_event", "error")}}
+  - : リソースの読み込みに失敗したか、利用できなかった場合に発行されます。例えば、スクリプトに実行エラーがあった場合や、画像が見つからなかった場合、無効であった場合などです。
+    {{domxref("GlobalEventHandlers/onerror", "onerror")}} プロパティからも利用できます。
+- {{domxref("Element/scroll_event", "scroll")}}
+  - : 文書のビューまたは要素がスクロールしたときに発行されます。
+    {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} プロパティからも利用できます。
+- {{domxref("Element/select_event", "select")}}
+  - : いくらかのテキストが選択されたときに発行されます。
+ {{DOMxRef("GlobalEventHandlers.onselect", "onselect")}} プロパティからも利用できます。
+- {{domxref("Element/show_event", "show")}}
+  - : {{domxref("Element/contextmenu_event", "contextmenu")}} イベントが [`contextmenu`](/ja/docs/Web/HTML/Global_attributes/contextmenu) 属性 {{deprecated_inline}} を持つ要素で発生したか、バブリングで到達した場合に発行されます。
+    {{DOMxRef("GlobalEventHandlers.onshow", "onshow")}} プロパティからも利用できます。
+- {{domxref("Element/wheel_event","wheel")}}
+  - : ユーザーがポインティングデバイス（普通はマウス）のホイールボタンを回転させたときに発行されます。
+    {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} プロパティからも利用できます。
+- {{domxref("Element/securitypolicyviolation_event","securitypolicyviolation")}}
+  - : [コンテンツセキュリティポリシー](/ja/docs/Web/HTTP/CSP)の違反があった場合に発行されます。
+    グローバルの {{DOMxRef("GlobalEventHandlers.onsecuritypolicyviolation", "onsecuritypolicyviolation")}} プロパティからも利用できます。これは要素と {{domxref("Document")}} と {{domxref("Window")}} の各オブジェクトで利用できます。
+
+### クリップボードイベント
+
+- {{domxref("Element/copy_event", "copy")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、コピー操作を行ったときに発行されます。
+    {{domxref("HTMLElement/oncopy", "oncopy")}} プロパティからも利用できます。
+- {{domxref("Element/cut_event", "cut")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、切り取り操作を行ったときに発行されます。
+    {{domxref("HTMLElement/oncut", "oncut")}} プロパティからも利用できます。
+- {{domxref("Element/paste_event", "paste")}}
+  - : ユーザーがブラウザーのユーザーインターフェイスを通して、貼り付け操作を行ったときに発行されます。
+    {{domxref("HTMLElement/onpaste", "onpaste")}} プロパティからも利用できます。
+
+### 構成イベント
+
+- {{domxref("Element/compositionend_event", "compositionend")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、現在の入力セッションが完了またはキャンセルされたときに発行されます。
+- {{domxref("Element/compositionstart_event", "compositionstart")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムで、新しい入力セッションを始まったときに発行されます。
+- {{domxref("Element/compositionupdate_event", "compositionupdate")}}
+  - : {{glossary("input method editor", "インプットメソッドエディター")}}のようなテキスト構成システムによって制御されている入力セッションのコンテキストに、新しい文字が入力されたときに発行されます。
+
+### フォーカスイベント
+
+- {{domxref("Element/blur_event", "blur")}}
+  - : 要素がフォーカスを失ったときに発行されます。
+    {{domxref("GlobalEventHandlers/onblur", "onblur")}} プロパティからも利用できます。
+- {{domxref("Element/focus_event", "focus")}}
+  - : 要素がフォーカスを受け取ったときに発行されます。
+    {{domxref("GlobalEventHandlers/onfocus", "onfocus")}} プロパティからも利用できます。
+- {{domxref("Element/focusin_event", "focusin")}}
+  - : 要素がフォーカスを受け取ろうとしているときに発行されます。
+- {{domxref("Element/focusout_event", "focusout")}}
+  - : 要素がフォーカスを失おうとしているときに発行されます。
+
+### 全画面イベント
+
+- {{domxref("Element/fullscreenchange_event", "fullscreenchange")}}
+  - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行時または終了時に、 {{domxref("Element")}} に送られます。
+- {{domxref("Element/fullscreenerror_event", "fullscreenerror")}}
+  - : [全画面](/ja/docs/Web/API/Fullscreen_API/Guide)モードへの移行または終了を試みている中でエラーが発生したときに、 `Element` に送られます。
+
+### キーボードイベント
+
+- `{{domxref("Element/keydown_event", "keydown")}}`
+  - : キーが押されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onkeydown", "onkeydown")}} プロパティからも利用できます。
+- `{{domxref("Element/keypress_event", "keypress")}}`
+  - : 文字の値を発行させるキーが押されたときに発行されます。 {{deprecated_inline}}
+ {{domxref("GlobalEventHandlers/onkeypress", "onkeypress")}} プロパティからも利用できます。
+- `{{domxref("Element/keyup_event", "keyup")}}`
+  - : キーが離されたときに発行されます。
+ {{domxref("GlobalEventHandlers/onkeyup", "onkeyup")}} プロパティからも利用できます。
+
+### マウスイベント
+
+- {{domxref("Element/auxclick_event", "auxclick")}}
+  - : ポインティングデバイスの第一ボタン以外のボタン（例えば、マウスの左ボタン以外のボタン）が要素上で押されて離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onauxclick", "onauxclick")}} プロパティからも利用できます。
+- {{domxref("Element/click_event", "click")}}
+  - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で押されて離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onclick", "onclick")}} プロパティからも利用できます。
+- {{domxref("Element/contextmenu_event", "contextmenu")}}
+  - : ユーザーがコンテキストメニューを開こうとしたときに発行されます。
+    {{domxref("GlobalEventHandlers/oncontextmenu", "oncontextmenu")}} プロパティからも利用できます。
+- {{domxref("Element/dblclick_event", "dblclick")}}
+  - : ポインティングデバイスのボタン（例えば、マウスの第一ボタン）が単一の要素上で 2 回クリックされたときに発行されます。
+    {{domxref("GlobalEventHandlers/ondblclick", "ondblclick")}} プロパティからも利用できます。
+- {{domxref("Element/DOMActivate_event", "DOMActivate")}} {{Deprecated_Inline}}
+  - : 要素が、例えばマウスのクリックやキーの押下によってアクティブになったときに発行されます。
+- {{domxref("Element/mousedown_event", "mousedown")}}
+  - : ポインティングデバイスのボタンが要素上で押されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onmousedown", "onmousedown")}} プロパティからも利用できます。
+- {{domxref("Element/mouseenter_event", "mouseenter")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の上へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseenter", "onmouseenter")}} プロパティからも利用できます。
+- {{domxref("Element/mouseleave_event", "mouseleave")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素の外へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseleave", "onmouseleave")}} プロパティからも利用できます。
+- {{domxref("Element/mousemove_event", "mousemove")}}
+  - : ポインティングデバイス（ふつうはマウス）が、要素の上を移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmousemove", "onmousemove")}} プロパティからも利用できます。
+- {{domxref("Element/mouseout_event", "mouseout")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の外へ移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseout", "onmouseout")}} プロパティからも利用できます。
+- {{domxref("Element/mouseover_event", "mouseover")}}
+  - : ポインティングデバイス（ふつうはマウス）が、リスナーが割り当てられた要素またはその子要素の上を移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseover", "onmouseover")}} プロパティからも利用できます。
+- {{domxref("Element/mouseup_event", "mouseup")}}
+  - : ポインティングデバイスのボタンが要素の上で離されたときに発行されます。
+    {{domxref("GlobalEventHandlers/onmouseup", "onmouseup")}} プロパティからも利用できます。
+- {{domxref("Element/webkitmouseforcechanged_event", "webkitmouseforcechanged")}}
+  - : trackpadtouchscreen の上の圧力が変化するたびに発行されます。
+- {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}}
+  - : 「強制クリック」と判断されるのに十分な圧力があった直後の mousedown イベントの後で発行されます。
+- {{domxref("Element/webkitmouseforcewillbegin_event", "webkitmouseforcewillbegin")}}
+  - : {{domxref("Element/mousedown_event", "mousedown")}} イベントの前に発行されます。
+- {{domxref("Element/webkitmouseforceup_event", "webkitmouseforceup")}}
+  - : 「強制クリック」が終了したといえるほど圧力が減少した直後の {{domxref("Element/webkitmouseforcedown_event", "webkitmouseforcedown")}} イベントの後で発行されます。
+
+### タッチイベント
+
+- {{domxref("Element/touchcancel_event", "touchcancel")}}
+  - : 1 つ以上のタッチ点が実装依存の理由により破棄された（例えば、タッチ点が多く作られすぎた）場合に発行されます。
+    {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} プロパティからも利用できます。
+- {{domxref("Element/touchend_event", "touchend")}}
+  - : 1 つ以上のタッチ点がタッチ面から取り除かれたときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} プロパティからも利用できます。
+- {{domxref("Element/touchmove_event", "touchmove")}}
+  - : 1 つ以上のタッチ点がタッチ面上で移動したときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} プロパティからも利用できます。
+- {{domxref("Element/touchstart_event", "touchstart")}}
+  - : 1 つ以上のタッチ点がタッチ面に配置されたときに発行されます。
+    {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} プロパティからも利用できます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 0c6e68897d9b4182437d58e376dbb48ee6947f71 Mon Sep 17 00:00:00 2001
From: c3r38r170 <51477979+c3r38r170@users.noreply.github.com>
Date: Mon, 7 Mar 2022 14:01:11 -0300
Subject: spelling errors fixed "evnía" (#4461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/es/web/api/windoweventhandlers/onpopstate/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/web/api/windoweventhandlers/onpopstate/index.html b/files/es/web/api/windoweventhandlers/onpopstate/index.html
index 44cd5f530c..79faa54d33 100644
--- a/files/es/web/api/windoweventhandlers/onpopstate/index.html
+++ b/files/es/web/api/windoweventhandlers/onpopstate/index.html
@@ -7,7 +7,7 @@ translation_of: Web/API/WindowEventHandlers/onpopstate
 
 <p>La propiedad <strong><code>onpopstate</code></strong> del <a href="/en-US/docs/Glossary/Mixin">mixin</a> {{domxref("WindowEventHandlers")}} es el {{event("Event_handlers", "event handler")}} para procesar eventos <code><a href="/en-US/docs/Web/API/Window/popstate_event">popstate</a></code> de la ventana.</p>
 
-<p>Se evnía un evento <code>popstate</code> a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a <code>history.pushState()</code>, o fue afectada por una llamada a <code>history.replaceState()</code>, la propiedad <code>state</code> del evento <code>popstate</code> contendrá una copia del objeto de estado de la entrada de la hisotria.</p>
+<p>Se envía un evento <code>popstate</code> a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a <code>history.pushState()</code>, o fue afectada por una llamada a <code>history.replaceState()</code>, la propiedad <code>state</code> del evento <code>popstate</code> contendrá una copia del objeto de estado de la entrada de la hisotria.</p>
 
 <div class="note">
 <p><strong>Nota</strong>: Llamar a <code>history.pushState()</code> o a <code>history.replaceState()</code> no dispararán un evento <code>popstate</code>. El evento <code>popstate</code> solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a <code>history.back()</code> en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.</p>
-- 
cgit v1.2.3-54-g00ecf


From d53bae971e455859229bcb3246e29bcbc85179d2 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Tue, 8 Mar 2022 00:12:08 +0000
Subject: [CRON] sync translated content

---
 files/es/_redirects.txt                            |   1 +
 files/es/_wikihistory.json                         |   2 +-
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 files/fr/_redirects.txt                            |   5 +
 .../learn/javascript/asynchronous/index.md         | 440 ++++++++++++++
 .../javascript/asynchronous/introducing/index.md   | 168 ++++++
 .../javascript/asynchronous/promises/index.md      | 595 +++++++++++++++++++
 .../index.md                                       | 648 +++++++++++++++++++++
 .../resourcetimingbufferfull_event/index.md        |  60 ++
 .../javascript/asynchronous/async_await/index.md   | 594 -------------------
 .../choosing_the_right_approach/index.md           | 439 --------------
 .../javascript/asynchronous/concepts/index.md      | 167 ------
 .../asynchronous/timeouts_and_intervals/index.md   | 647 --------------------
 .../onresourcetimingbufferfull/index.md            |  59 --
 files/ja/_redirects.txt                            |   5 +-
 files/ja/_wikihistory.json                         |  28 +-
 .../resourcetimingbufferfull_event/index.md        |  59 ++
 .../web/api/window/appinstalled_event/index.html   |  58 ++
 .../javascript/asynchronous/concepts/index.html    | 162 ------
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../onresourcetimingbufferfull/index.md            |  58 --
 files/ja/web/api/window/onappinstalled/index.html  |  58 --
 files/ko/_redirects.txt                            |   3 +
 files/ko/_wikihistory.json                         |  44 +-
 .../learn/javascript/asynchronous/index.html       | 599 +++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 160 +++++
 .../javascript/asynchronous/promises/index.html    | 414 +++++++++++++
 .../javascript/asynchronous/async_await/index.html | 413 -------------
 .../javascript/asynchronous/concepts/index.html    | 159 -----
 .../asynchronous/timeouts_and_intervals/index.html | 598 -------------------
 files/pt-br/_redirects.txt                         |   8 +-
 files/pt-br/_wikihistory.json                      |  40 +-
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 156 +++++
 .../javascript/asynchronous/promises/index.html    | 556 ++++++++++++++++++
 .../index.html                                     | 625 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 556 ------------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 156 -----
 .../asynchronous/timeouts_and_intervals/index.html | 624 --------------------
 files/ru/_redirects.txt                            |   5 +-
 files/ru/_wikihistory.json                         |  36 +-
 .../learn/javascript/asynchronous/index.html       | 639 ++++++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 165 ++++++
 .../javascript/asynchronous/async_await/index.html | 415 -------------
 .../javascript/asynchronous/concepts/index.html    | 164 ------
 .../javascript/asynchronous/promises/index.html    | 416 +++++++++++++
 .../asynchronous/timeouts_and_intervals/index.html | 639 --------------------
 files/zh-cn/_redirects.txt                         |  15 +-
 files/zh-cn/_wikihistory.json                      | 128 ++--
 .../learn/javascript/asynchronous/index.html       | 524 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 163 ++++++
 .../javascript/asynchronous/promises/index.html    | 380 ++++++++++++
 .../index.html                                     | 618 ++++++++++++++++++++
 .../api/document/visibilitychange_event/index.html |  54 ++
 .../javascript/asynchronous/async_await/index.html | 380 ------------
 .../choosing_the_right_approach/index.html         | 524 -----------------
 .../javascript/asynchronous/concepts/index.html    | 163 ------
 .../asynchronous/timeouts_and_intervals/index.html | 618 --------------------
 .../web/api/document/onvisibilitychange/index.html |  53 --
 .../onresourcetimingbufferfull/index.html          |  64 --
 .../resourcetimingbufferfull_event/index.html      |  65 +++
 .../web/api/window/appinstalled_event/index.html   |  49 ++
 .../zh-cn/web/api/window/onappinstalled/index.html |  48 --
 files/zh-tw/_redirects.txt                         |   4 +
 .../learn/javascript/asynchronous/index.html       | 537 +++++++++++++++++
 .../javascript/asynchronous/introducing/index.html | 170 ++++++
 .../javascript/asynchronous/promises/index.html    | 436 ++++++++++++++
 .../index.html                                     | 647 ++++++++++++++++++++
 .../javascript/asynchronous/async_await/index.html | 435 --------------
 .../choosing_the_right_approach/index.html         | 536 -----------------
 .../javascript/asynchronous/concepts/index.html    | 169 ------
 .../asynchronous/timeouts_and_intervals/index.html | 646 --------------------
 74 files changed, 10428 insertions(+), 10377 deletions(-)
 delete mode 100644 files/es/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/es/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
 create mode 100644 files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
 create mode 100644 files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/async_await/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/concepts/index.md
 delete mode 100644 files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
 delete mode 100644 files/fr/web/api/performance/onresourcetimingbufferfull/index.md
 create mode 100644 files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
 create mode 100644 files/ja/conflicting/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/ja/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ja/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ja/web/api/performance/onresourcetimingbufferfull/index.md
 delete mode 100644 files/ja/web/api/window/onappinstalled/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/concepts/index.html
 create mode 100644 files/ru/learn/javascript/asynchronous/promises/index.html
 delete mode 100644 files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 create mode 100644 files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
 delete mode 100644 files/zh-cn/web/api/document/onvisibilitychange/index.html
 delete mode 100644 files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
 create mode 100644 files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
 create mode 100644 files/zh-cn/web/api/window/appinstalled_event/index.html
 delete mode 100644 files/zh-cn/web/api/window/onappinstalled/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
 create mode 100644 files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/async_await/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/concepts/index.html
 delete mode 100644 files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index 0216d3ebb5..f62d9cc572 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1179,6 +1179,7 @@
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 /es/docs/Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started	/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 /es/docs/Learn/Herramientas_y_pruebas/Understanding_client-side_tools	/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools
+/es/docs/Learn/JavaScript/Asynchronous/Concepts	/es/docs/Learn/JavaScript/Asynchronous/Introducing
 /es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo	/es/docs/Learn/JavaScript/Building_blocks/Looping_code
 /es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion	/es/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
 /es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción	/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 6466283b7a..6156c5aff5 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -2943,7 +2943,7 @@
       "madmaxdios"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Concepts": {
+  "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-11-19T20:30:13.091Z",
     "contributors": [
       "AndresSalomon1990",
diff --git a/files/es/learn/javascript/asynchronous/concepts/index.html b/files/es/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index d5babeb8ba..0000000000
--- a/files/es/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: General asynchronous programming concepts
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - Aprender
-  - Hilos
-  - JavaScript
-  - Promesas
-  - Threads
-  - bloques
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pre-requisitos:</th>
-   <td>Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="¿Asincrónico">¿Asincrónico?</h2>
-
-<p>Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.</p>
-
-<p>Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la <strong>programación asincrónica</strong>. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.</p>
-
-<h2 id="Código_de_bloqueo_Blocking">Código de bloqueo (Blocking)</h2>
-
-<p>Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado <strong>blocking</strong>; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.</p>
-
-<p>Vamos a ver algunos ejemplos que muestren lo que significa blocking.</p>
-
-<p>En nuestro ejemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">véalo en vivo</a>), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.</p>
-</div>
-
-<p>En nuestro segundo ejemplo, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">véalo en vivo</a>), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:</p>
-
-<ul>
- <li>Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.</li>
- <li>Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.</p>
-</div>
-
-<p>¿Por qué es esto? La respuesta es porque JavaScript, en general, es de <strong>"un solo hilo" (single-threaded)</strong>. En este punto, se tiene que introduce el concepto de <strong>"hilos" (threads)</strong>.</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p>Un <strong>hilo (thread)</strong> es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.</p>
-
-<p>Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. </p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_es_single-threaded">JavaScript es single-threaded</h3>
-
-<p>JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el <strong>hilo principal (main thread)</strong>. El ejemplo de arriba se ejecuta de la siguiente manera:</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>Con esto en mente, miremos el ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">véalo ejecutándose en vivo</a>) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.</p>
-
-<h2 id="Código_asincrónico">Código asincrónico</h2>
-
-<p>Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.</p>
-
-<p>El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.</p>
-
-<p>Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. </p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.</p>
-
-<p>Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!</p>
-
-<h2 id="Conclusión">Conclusión</h2>
-
-<p>El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.</p>
-
-<h2 id="En_este_módulo">En este módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducción a JavaScript asincrónico</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asincrónico cooperativo: Timeouts e intervalos</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programación asincrónica elegante con Promesas</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Programación asincrónica más sencilla con async y await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Eligiendo el correcto enfoque</a></li>
-</ul>
diff --git a/files/es/learn/javascript/asynchronous/introducing/index.html b/files/es/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..85f605b479
--- /dev/null
+++ b/files/es/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: General asynchronous programming concepts
+slug: Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - Aprender
+  - Hilos
+  - JavaScript
+  - Promesas
+  - Threads
+  - bloques
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pre-requisitos:</th>
+   <td>Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Asincrónico">¿Asincrónico?</h2>
+
+<p>Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.</p>
+
+<p>Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la <strong>programación asincrónica</strong>. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.</p>
+
+<h2 id="Código_de_bloqueo_Blocking">Código de bloqueo (Blocking)</h2>
+
+<p>Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejecuta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado <strong>blocking</strong>; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.</p>
+
+<p>Vamos a ver algunos ejemplos que muestren lo que significa blocking.</p>
+
+<p>En nuestro ejemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">véalo en vivo</a>), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.</p>
+</div>
+
+<p>En nuestro segundo ejemplo, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">véalo en vivo</a>), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:</p>
+
+<ul>
+ <li>Un botón "Fill canvas" que cuando es clickeado llena con 1 millón de círculos azules al {{htmlelement("canvas")}} disponible.</li>
+ <li>Un botón "Click me for alert" que cuando es clickeado muestra un mensaje de alerta.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.</p>
+</div>
+
+<p>¿Por qué es esto? La respuesta es porque JavaScript, en general, es de <strong>"un solo hilo" (single-threaded)</strong>. En este punto, se tiene que introduce el concepto de <strong>"hilos" (threads)</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p>Un <strong>hilo (thread)</strong> es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.</p>
+
+<p>Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. </p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_es_single-threaded">JavaScript es single-threaded</h3>
+
+<p>JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el <strong>hilo principal (main thread)</strong>. El ejemplo de arriba se ejecuta de la siguiente manera:</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>Con esto en mente, miremos el ejemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">véalo ejecutándose en vivo</a>) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.</p>
+
+<h2 id="Código_asincrónico">Código asincrónico</h2>
+
+<p>Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.</p>
+
+<p>El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.</p>
+
+<p>Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. </p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.</p>
+
+<p>Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!</p>
+
+<h2 id="Conclusión">Conclusión</h2>
+
+<p>El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceptos generales de programación asincrónica</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducción a JavaScript asincrónico</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript asincrónico cooperativo: Timeouts e intervalos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Programación asincrónica elegante con Promesas</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Programación asincrónica más sencilla con async y await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Eligiendo el correcto enfoque</a></li>
+</ul>
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 3bc4db62c8..2f4624d9d5 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -2997,6 +2997,10 @@
 /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS	/fr/docs/Learn/CSS/First_steps/What_is_CSS
 /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens	/fr/docs/Learn/CSS/Styling_text/Styling_links
 /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte	/fr/docs/Learn/CSS/Styling_text/Fundamentals
+/fr/docs/Learn/JavaScript/Asynchronous/Async_await	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/fr/docs/conflicting/Learn/JavaScript/Asynchronous
+/fr/docs/Learn/JavaScript/Asynchronous/Concepts	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/fr/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /fr/docs/Learn/JavaScript/First_steps/Testes_vos_competence:_Tableaux	/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays
 /fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile	/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods
 /fr/docs/Learn/JavaScript/First_steps/tableaux	/fr/docs/Learn/JavaScript/First_steps/Arrays
@@ -3713,6 +3717,7 @@
 /fr/docs/Web/API/PasswordCredential/idName	/fr/docs/conflicting/Web/API/PasswordCredential_cbf7b306e83a3f58ff06bccf89637c12
 /fr/docs/Web/API/PasswordCredential/passwordName	/fr/docs/conflicting/Web/API/PasswordCredential_bc57d5dfa87242b4fb83497887124f41
 /fr/docs/Web/API/Performance.now()	/fr/docs/Web/API/Performance/now
+/fr/docs/Web/API/Performance/onresourcetimingbufferfull	/fr/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event
 /fr/docs/Web/API/Pointer_events/gestes_pincer_zoom	/fr/docs/Web/API/Pointer_events/Pinch_zoom_gestures
 /fr/docs/Web/API/PositionOptions	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition_5852407122355d2ab39863042583c266
 /fr/docs/Web/API/PositionOptions/enableHighAccuracy	/fr/docs/conflicting/Web/API/Geolocation/getCurrentPosition
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/index.md b/files/fr/conflicting/learn/javascript/asynchronous/index.md
new file mode 100644
index 0000000000..b2b9afbcd1
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/index.md
@@ -0,0 +1,440 @@
+---
+title: Choisir la bonne approche
+slug: conflicting/Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - Intervals
+  - JavaScript
+  - Learn
+  - Optimize
+  - Promises
+  - async
+  - asynchronous
+  - await
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, une compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Être capable de faire un choix judicieux quant à l'utilisation de
+        différentes techniques de programmation asynchrone.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Fonctions de rappels (callbacks) asynchrones
+
+Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
+
+| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
+
+### Exemple de code
+
+Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
+
+```js
+function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);
+```
+
+### Pièges
+
+- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
+- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
+- Les fonctions de rappel asynchrones ne sont pas très élégantes.
+- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
+- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
+
+### Compatibilité des navigateurs
+
+Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
+
+### Plus d'informations
+
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
+
+## setTimeout()
+
+[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
+
+| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
+| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
+
+### Exemple de code
+
+Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
+
+```js
+let myGreeting = setTimeout(function() {
+  console.log('Bonjour, M. Univers !');
+}, 2000)
+```
+
+### Pièges
+
+Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
+
+```js
+let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);
+```
+
+Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
+
+- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
+- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
+
+Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>)
+- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+
+## setInterval()
+
+[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
+| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
+
+### Exemple de code
+
+La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
+
+```js
+function displayTime() {
+  let date = new Date();
+  let time = date.toLocaleTimeString();
+  document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+```
+
+### Pièges
+
+- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+
+## requestAnimationFrame()
+
+[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
+| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
+
+### Exemple de code
+
+Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
+
+```js
+const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount > 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+### Pièges
+
+- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
+
+### Compatibilité des navigateurs
+
+{{Compat("api.Window.requestAnimationFrame")}}
+
+### Plus d'informations
+
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>)
+- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
+
+## Promises (Promesses)
+
+[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
+
+### Exemple de code
+
+Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
+
+```js
+fetch('coffee.jpg')
+.then(response => response.blob())
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+### Pièges
+
+Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
+
+```js
+remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...
+```
+
+Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
+
+```js
+remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});
+```
+
+ou encore :
+
+```js
+remotedb.allDocs(...)
+.then(resultOfAllDocs => {
+  return localdb.put(...);
+})
+.then(resultOfPut => {
+  return localdb.get(...);
+})
+.then(resultOfGet => {
+  return localdb.put(...);
+})
+.catch(err => console.log(err));
+```
+
+Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
+- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+
+## Promise.all()
+
+Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
+| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
+| Non                       | Non               | Non                                | Oui                              |
+
+### Exemple de code
+
+L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
+
+```js
+function fetchAndDecode(url, type) {
+  // Retourner la promesse de niveau supérieur, de sorte que le résultat
+  // de l'ensemble de la chaîne est retourné hors de la fonction
+  return fetch(url).then(response => {
+    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e => {
+    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
+  });
+}
+
+// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
+// et stocker leurs promesses dans des variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Utiliser Promise.all() pour exécuter le code uniquement lorsque
+// les trois appels de fonction ont été résolus
+Promise.all([coffee, tea, description]).then(values => {
+  console.log(values);
+  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
+  // créer des URL d'objets à partir des blobs.
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Afficher les images dans les éléments <img>
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Afficher le texte d'un paragraphe
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});
+```
+
+### Pièges
+
+- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.builtins.Promise.all")}}
+
+### Plus d'informations
+
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
+- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+
+## async/await
+
+Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
+
+| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
+| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
+| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
+
+### Exemple de code
+
+L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();
+```
+
+### Pièges
+
+- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
+- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
+
+### Compatibilité des navigateurs
+
+{{Compat("javascript.statements.async_function")}}
+
+### Plus d'informations
+
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
+- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
+
+{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
new file mode 100644
index 0000000000..2fadd1a162
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/introducing/index.md
@@ -0,0 +1,168 @@
+---
+title: Concepts généraux de programmation asynchrone
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Comprendre les concepts de base de la programmation asynchrone et la
+        façon dont elles se manifestent dans les navigateurs Web et dans
+        JavaScript.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Asynchrone ?
+
+Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
+
+Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
+
+![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
+
+C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
+
+## Code bloquant
+
+Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
+
+Examinons quelques exemples qui montrent ce que nous entendons par blocage.
+
+Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
+
+```js
+const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date;
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
+  document.body.appendChild(pElem);
+});
+```
+
+Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
+
+> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
+
+Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
+
+- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus.
+- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.
+
+```js
+function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill();
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('Vous avez cliqué sur moi !');
+);
+```
+
+Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
+
+> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
+
+Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**.
+
+## Les threads
+
+Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois :
+
+    Tâche A --> Tâche B --> Tâche C
+
+Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.
+
+Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :
+
+    Processus 1: Tâche A --> Tâche B
+    Processus 2: Tâche C --> Tâche D
+
+### JavaScript n'a qu'un thread
+
+JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci :
+
+    processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
+
+Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.
+
+    Processus principal : Tâche A --> Tâche C
+    Processus du Worker : Tâche coûteuse B
+
+Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console.
+
+## Code asynchrone
+
+Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.
+
+Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :
+
+    Processus principal : Tâche A --> Tâche B
+
+Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.
+
+    Processus principal : Tâche A --> Tâche B --> |Tâche D|
+    Processus du Worker : Tâche C --------------> |       |
+
+Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.
+
+Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :
+
+    Processus principal : Tâche A                   Tâche B
+    Promesse :               |__opération asynchrone__|
+
+Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.
+
+Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !
+
+## Conclusion
+
+La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.
+
+{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
new file mode 100644
index 0000000000..93a26dd1b8
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous/promises/index.md
@@ -0,0 +1,595 @@
+---
+title: Faciliter la programmation asynchrone avec async et await
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+
+Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript, compréhension du code asynchrone
+        en général et des promesses.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>Comprendre <code>async/await</code> et comment les utiliser.</td>
+    </tr>
+  </tbody>
+</table>
+
+## Les bases de async/await
+
+L'utilisation `async/await` dans votre code comporte deux parties.
+
+### Le mot-clé async
+
+Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone.
+
+Essayez de taper les lignes suivantes dans la console JS de votre navigateur :
+
+```js
+function hello() { return "Bonjour" };
+hello();
+```
+
+La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?
+
+Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :
+
+```js
+async function hello() { return "Bonjour" };
+hello();
+```
+
+Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.
+
+Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit :
+
+```js
+let hello = async function() { return "Bonjour" };
+hello();
+```
+
+Et vous pouvez utiliser les fonctions fléchées :
+
+```js
+let hello = async () => { return "Bonjour" };
+```
+
+Elles font toutes à peu près la même chose.
+
+Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` :
+
+```js
+hello().then((value) => console.log(value));
+```
+
+ou même simplement un raccourci tel que
+
+```js
+hello().then(console.log);
+```
+
+Comme nous l'avons vu dans l'article précédent.
+
+Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.
+
+### Le mot-clé await
+
+L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
+
+`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.
+
+Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.
+
+Voici un exemple trivial :
+
+```js
+async function hello() {
+  return salutation = await Promise.resolve("Bonjour");
+};
+
+hello().then(console.log);
+```
+
+Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.
+
+## Réécriture du code des promesses avec async/await
+
+Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :
+
+```js
+fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return response.blob();
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e => {
+  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
+});
+```
+
+Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout !
+
+Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e => console.log(e));
+```
+
+Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
+
+### Mais comment est-ce que cela fonctionne ?
+
+Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async.
+
+À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !
+
+Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :
+
+```js
+let response = await fetch('coffee.jpg');
+```
+
+La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`.
+
+Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.
+
+Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.
+
+### Ajout de la gestion des erreurs
+
+Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.
+
+Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus :
+
+```js
+async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();
+```
+
+Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.
+
+Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci :
+
+```js
+async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =>
+  console.log(e)
+);
+```
+
+En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée.
+
+Vous pouvez trouver ces deux exemples sur GitHub :
+
+- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
+- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
+
+## En attente d'un Promise.all()
+
+`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.
+
+En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci :
+
+```js
+async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =>
+  console.log(e)
+);
+```
+
+Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` :
+
+```js
+let values = await Promise.all([coffee, tea, description]);
+```
+
+En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.
+
+Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
+
+> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
+
+## Gérer les ralentissements potentiellement causés par async/await
+
+Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte.
+
+`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.
+
+```js
+async function makeResult(items) {
+  let newArr = [];
+  for(let i=0; i < items.length; i++) {
+    newArr.push('word_'+i);
+  }
+  return newArr;
+}
+
+async function getResult() {
+  let result = await makeResult(items); // Bloqué sur cette ligne
+  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
+}
+```
+
+Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`.
+
+Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.
+
+Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) :
+
+```js
+function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("fait");
+    }, interval);
+  });
+};
+```
+
+Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` :
+
+```js
+async function timeTest() {
+  ...
+}
+```
+
+Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :
+
+```js
+let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps pris en millisecondes : " + timeTaken);
+})
+```
+
+C'est la fonction `timeTest()` qui diffère dans chaque cas.
+
+Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci :
+
+```js
+async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+```
+
+Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.
+
+Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci :
+
+```js
+async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+```
+
+Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.
+
+Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !
+
+### Gestion des erreurs
+
+La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.
+
+Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  await timeoutPromiseResolve(5000);
+  await timeoutPromiseReject(2000);
+  await timeoutPromiseResolve(3000);
+}
+
+let startTime = Date.now();
+timeTest().then(() => {})
+.catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.
+
+Voyons maintenant la deuxième approche :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  await timeoutPromiseResolve1;
+  await timeoutPromiseReject2;
+  await timeoutPromiseResolve3;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.
+
+Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant :
+
+```js
+function timeoutPromiseResolve(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("Succès");
+    }, interval);
+  });
+};
+
+function timeoutPromiseReject(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      reject("Erreur");
+    }, interval);
+  });
+};
+
+async function timeTest() {
+  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
+  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
+  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
+
+  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
+  return results;
+}
+
+let startTime = Date.now();
+timeTest().then(() => {
+}).catch(e => {
+  console.log(e);
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  console.log("Temps écoulé en millisecondes : " + timeTaken);
+})
+```
+
+Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.
+
+La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place.
+
+## Méthodes de classe async/await
+
+Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` :
+
+```js
+class Personne {
+  constructor(prenom, nomFamille, age, genre, interets) {
+    this.nom = {
+      prenom,
+      nomFamille
+    };
+    this.age = age;
+    this.genre = genre;
+    this.interets = interets;
+  }
+
+  async salutation() {
+    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
+  };
+
+  aurevoir() {
+    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
+  };
+}
+
+let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
+```
+
+La méthode de la première classe peut maintenant être utilisée de la manière suivante :
+
+```js
+han.salutation().then(console.log);
+```
+
+## Prise en charge des navigateurs
+
+L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.
+
+Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs.
+
+## Conclusion
+
+Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.
+
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
new file mode 100644
index 0000000000..11ea92030f
--- /dev/null
+++ b/files/fr/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.md
@@ -0,0 +1,648 @@
+---
+title: 'JavaScript asynchrone coopératif : délais et intervalles'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+tags:
+  - Animation
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Intervals
+  - JavaScript
+  - Loops
+  - asynchronous
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+
+Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="row">Prérequis :</th>
+      <td>
+        Connaissances informatiques de base, compréhension raisonnable des
+        principes fondamentaux de JavaScript.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Objectif :</th>
+      <td>
+        Comprendre les boucles et les intervalles asynchrones et leur utilité.
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Introduction
+
+Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.
+
+Ces fonctions sont :
+
+- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
+  - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
+- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+  - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
+- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
+  - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
+
+Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).
+
+Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.
+
+Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.
+
+## setTimeout()
+
+Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :
+
+- Une fonction à exécuter, ou une référence à une fonction définie ailleurs.
+- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.
+- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
+
+> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
+>
+> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
+
+Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
+
+```js
+let maSalutation = setTimeout(() => {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+```
+
+Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :
+
+```js
+// Avec une fonction nommée
+let maSalutation = setTimeout(function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}, 2000);
+
+// Avec une fonction définie séparément
+function direBonjour() {
+  console.log('Bonjour, M. Univers !');
+}
+
+let maSalutation = setTimeout(direBonjour, 2000);
+```
+
+Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.
+
+`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela.
+
+### Passage de paramètres à une fonction setTimeout()
+
+Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste.
+
+Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :
+
+```js
+function direBonjour(who) {
+  console.log(`Bonjour ${who} !`);
+}
+```
+
+Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre :
+
+```js
+let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
+```
+
+### Effacement des délais d'attente
+
+Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :
+
+```js
+clearTimeout(maSalutation);
+```
+
+> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)).
+
+## setInterval()
+
+`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?
+
+C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`.
+
+Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
+
+```js
+function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);
+```
+
+Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.
+
+### Effacement des intervalles
+
+`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) :
+
+```js
+const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);
+```
+
+#### Apprentissage actif : Créez votre propre chronomètre !
+
+Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple.
+
+Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :
+
+- Un bouton "Start" pour lancer le chronomètre.
+- Un bouton "Stop" pour le mettre en pause/arrêter.
+- Un bouton "Reset" pour réinitialiser le temps à `0`.
+- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.
+
+Voici quelques conseils pour vous :
+
+- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.
+- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.
+- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.
+- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.
+- Comment les calculeriez-vous ? Réfléchissez-y :
+
+  - Le nombre de secondes dans une heure est de `3600`.
+  - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`.
+  - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.
+
+- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.
+- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.
+- Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs `setInterval()` à l'horloge, ce qui entraînera un comportement erroné.
+
+> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)).
+
+## Choses à garder à l'esprit concernant setTimeout() et setInterval()
+
+Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant.
+
+### Délais récursifs
+
+Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`.
+
+L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes :
+
+```js
+let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);
+```
+
+Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet :
+
+```js
+let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++;
+}, 100);
+```
+
+#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ?
+
+La différence entre les deux versions du code ci-dessus est subtile.
+
+- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.
+- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes.
+- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.
+
+Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
+
+### Délais immédiats
+
+En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.
+
+Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte.
+
+```js
+setTimeout(() => {
+  alert('World');
+}, 0);
+
+alert('Hello');
+```
+
+Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.
+
+### Effacement avec clearTimeout() ou clearInterval()
+
+`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`.
+
+Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion.
+
+## requestAnimationFrame()
+
+[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.
+
+Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.
+
+([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).)
+
+> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice).
+
+La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez `requestAnimationFrame()` avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle `requestAnimationFrame()` de manière récursive.
+
+> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
+>
+> Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas.
+
+### Quelle est la vitesse de votre animation ?
+
+La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.
+
+Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_.
+
+Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.
+
+`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose.
+
+### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?
+
+Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+Voyons maintenant comment faire la même chose en utilisant `setInterval()` :
+
+```js
+function draw() {
+   // Le code du dessin va ici
+}
+
+setInterval(draw, 17);
+```
+
+Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.
+
+`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.
+
+### Inclure un horodatage
+
+Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter.
+
+C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :
+
+```js
+let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Faire quelque chose en fonction du temps actuel
+
+   requestAnimationFrame(draw);
+}
+
+draw();
+```
+
+### Prise en charge des navigateurs
+
+`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.
+
+Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`.
+
+### Un exemple simple
+
+Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
+
+> **Note :** Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de `requestAnimationFrame()`, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
+
+1.  Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)).
+2.  Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.
+3.  Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement.
+
+    ```css
+    html {
+      background-color: white;
+      height: 100%;
+    }
+
+    body {
+      height: inherit;
+      background-color: red;
+      margin: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    div {
+      display: inline-block;
+      font-size: 10rem;
+    }
+    ```
+
+4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
+5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
+
+    ```js
+    const spinner = document.querySelector('div');
+    let rotateCount = 0;
+    let startTime = null;
+    let rAF;
+    ```
+
+6.  Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` :
+
+    ```js
+    function draw(timestamp) {
+
+    }
+    ```
+
+7.  À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :
+
+    ```js
+      if(!startTime) {
+       startTime = timestamp;
+      }
+
+      rotateCount = (timestamp - startTime) / 3;
+    ```
+
+8.  Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`.
+
+    ```js
+    rotateCount %= 360;
+    ```
+
+9.  Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner :
+
+    ```js
+    spinner.style.transform = `rotate(${rotateCount}deg)`;
+    ```
+
+10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS.
+
+    ```js
+    rAF = requestAnimationFrame(draw);
+    ```
+
+11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation.
+
+    ```js
+    draw();
+    ```
+
+> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)).
+
+### Effacer un appel de requestAnimationFrame()
+
+Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").
+
+Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` :
+
+```js
+cancelAnimationFrame(rAF);
+```
+
+### Apprentissage actif : Démarrer et arrêter la toupie
+
+Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.
+
+Quelques conseils :
+
+- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.
+- Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
+
+> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html).
+
+### Ralentissement d'une animation requestAnimationFrame()
+
+Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?
+
+C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) :
+
+{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
+
+Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :
+
+```js
+if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}
+```
+
+Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.
+
+...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image :
+
+```js
+if (posX > width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}
+```
+
+C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.
+
+La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux.
+
+## Apprentissage actif : un jeu de réaction
+
+Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.
+
+Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.
+
+{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}
+
+Travaillons ensemble :
+
+1.  Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.
+2.  À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :
+
+    ```js
+    const spinner = document.querySelector('.spinner p');
+    const spinnerContainer = document.querySelector('.spinner');
+    let rotateCount = 0;
+    let startTime = null;
+    let rAF;
+    const btn = document.querySelector('button');
+    const result = document.querySelector('.result');
+    ```
+
+    Dans l'ordre, ce sont :
+
+    1.  Une référence à la toupie, afin que vous puissiez l'animer.
+    2.  Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer.
+    3.  Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
+    4.  Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
+    5.  Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie.
+    6.  Une référence au bouton de démarrage.
+    7.  Une référence au paragraphe des résultats.
+
+3.  Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.
+
+    ```js
+    function random(min,max) {
+      var num = Math.floor(Math.random()*(max-min)) + min;
+      return num;
+    }
+    ```
+
+4.  Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :
+
+    ```js
+    function draw(timestamp) {
+      if(!startTime) {
+       startTime = timestamp;
+      }
+
+      rotateCount = (timestamp - startTime) / 3;
+
+      rotateCount %= 360;
+
+      spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+      rAF = requestAnimationFrame(draw);
+    }
+    ```
+
+5.  Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`.
+
+    ```js
+    result.style.display = 'none';
+    spinnerContainer.style.display = 'none';
+    ```
+
+6.  Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :
+
+    ```js
+    function reset() {
+      btn.style.display = 'block';
+      result.textContent = '';
+      result.style.display = 'none';
+    }
+    ```
+
+7.  Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué.
+
+    ```js
+    btn.addEventListener('click', start);
+
+    function start() {
+      draw();
+      spinnerContainer.style.display = 'block';
+      btn.style.display = 'none';
+      setTimeout(setEndgame, random(5000,10000));
+    }
+    ```
+
+    > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.)
+    >
+    > Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
+
+    Le résultat net du code précédent est que lorsque le bouton _Start_ est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction `setEndgame()`, que vous allez définir ensuite.
+
+8.  Ajoutez ensuite la fonction suivante à votre code :
+
+    ```js
+    function setEndgame() {
+      cancelAnimationFrame(rAF);
+      spinnerContainer.style.display = 'none';
+      result.style.display = 'block';
+      result.textContent = 'JOUEURS : ALLEZ-Y !!';
+
+      document.addEventListener('keydown', keyHandler);
+
+      function keyHandler(e) {
+        let isOver = false;
+        console.log(e.key);
+
+        if (e.key === "a") {
+          result.textContent = 'Le joueur 1 a gagné !!';
+          isOver = true;
+        } else if (e.key === "l") {
+          result.textContent = 'Le joueur 2 a gagné !!';
+          isOver = true;
+        }
+
+        if (isOver) {
+          document.removeEventListener('keydown', keyHandler);
+          setTimeout(reset, 5000);
+        }
+      };
+    }
+    ```
+
+    Son fonctionnement :
+
+    1.  Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
+    2.  Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
+    3.  Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée.
+    4.  À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
+    5.  Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
+    6.  Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez.
+    7.  Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus
+
+        <kbd>Shift</kbd>
+
+        ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`.
+
+    8.  Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
+
+Voilà, c'est fait !
+
+> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)).
+
+## Conclusion
+
+Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.
+
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
+
+## Dans ce module
+
+- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
new file mode 100644
index 0000000000..d1073d834b
--- /dev/null
+++ b/files/fr/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
@@ -0,0 +1,60 @@
+---
+title: performance.onresourcetimingbufferfull
+slug: conflicting/Web/API/Performance/resourcetimingbufferfull_event
+tags:
+  - API
+  - Method
+  - Méthode
+  - Reference
+  - Performance web
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+---
+{{APIRef("Resource Timing API")}}
+
+La propriété **`onresourcetimingbufferfull`** est un gestionnaire d'événements qui sera appelé lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.
+
+{{AvailableInWorkers}}
+
+## Syntaxe
+
+```js
+  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
+```
+
+### Valeur de retour
+
+- `callback`
+  - : Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché.
+
+## Exemple
+
+L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
+
+```js
+function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Définit un rappel si le tampon de ressources est rempli.
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+```
+
+## Spécifications
+
+| Spécification                                                                                                                                                | Statut                               | Commentaire          |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
+| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
+        'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.Performance.onresourcetimingbufferfull")}}
+
+## Voir aussi
+
+- Événément [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event)
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/fr/learn/javascript/asynchronous/async_await/index.md b/files/fr/learn/javascript/asynchronous/async_await/index.md
deleted file mode 100644
index a7578c08e1..0000000000
--- a/files/fr/learn/javascript/asynchronous/async_await/index.md
+++ /dev/null
@@ -1,594 +0,0 @@
----
-title: Faciliter la programmation asynchrone avec async et await
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-Plus récemment, les [fonctions async](/fr/docs/Web/JavaScript/Reference/Statements/async_function) et le mot-clé [`await`](/fr/docs/Web/JavaScript/Reference/Operators/await) ont été ajoutés au langage JavaScript avec l'édition intitulée ECMAScript 2017. Ces fonctionnalités agissent essentiellement comme du sucre syntaxique sur les promesses, rendant le code asynchrone plus facile à écrire et à lire par la suite. Elles font en sorte que le code asynchrone ressemble davantage au code synchrone de la vieille école, et elles valent donc la peine d'être apprises. Cet article fournit les informations à connaître.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript, compréhension du code asynchrone
-        en général et des promesses.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>Comprendre <code>async/await</code> et comment les utiliser.</td>
-    </tr>
-  </tbody>
-</table>
-
-## Les bases de async/await
-
-L'utilisation `async/await` dans votre code comporte deux parties.
-
-### Le mot-clé async
-
-Tout d'abord, nous avons le mot-clé `async`, que vous mettez devant une déclaration de fonction pour la transformer en une [fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Statements/async_function). Une fonction asynchrone est une fonction qui saura réagir à une éventuelle utilisation du mot-clé `await` pour invoquer du code asynchrone.
-
-Essayez de taper les lignes suivantes dans la console JS de votre navigateur :
-
-```js
-function hello() { return "Bonjour" };
-hello();
-```
-
-La fonction renvoie « Bonjour » — rien de spécial, n'est-ce pas ?
-
-Mais que se passe-t-il si nous transformons cette fonction en une fonction asynchrone ? Essayez ce qui suit :
-
-```js
-async function hello() { return "Bonjour" };
-hello();
-```
-
-Ah. L'invocation de la fonction renvoie maintenant une promesse. C'est l'une des caractéristiques des fonctions asynchrones - leurs valeurs de retour sont nécessairement converties en promesses.
-
-Vous pouvez également créer une [expression de fonction asynchrone](/fr/docs/Web/JavaScript/Reference/Operators/async_function), comme suit :
-
-```js
-let hello = async function() { return "Bonjour" };
-hello();
-```
-
-Et vous pouvez utiliser les fonctions fléchées :
-
-```js
-let hello = async () => { return "Bonjour" };
-```
-
-Elles font toutes à peu près la même chose.
-
-Pour consommer réellement la valeur renvoyée lorsque la promesse se réalise, puisqu'elle renvoie une promesse, nous pourrions utiliser un bloc `.then()` :
-
-```js
-hello().then((value) => console.log(value));
-```
-
-ou même simplement un raccourci tel que
-
-```js
-hello().then(console.log);
-```
-
-Comme nous l'avons vu dans l'article précédent.
-
-Ainsi, le mot-clé `async` est ajouté aux fonctions pour leur indiquer de retourner une promesse plutôt que de retourner directement la valeur.
-
-### Le mot-clé await
-
-L'avantage d'une fonction asynchrone ne devient apparent que lorsque vous la combinez avec le mot-clé `await`. `await` ne fonctionne qu'à l'intérieur de fonctions asynchrones dans du code JavaScript ordinaire, mais il peut être utilisé seul avec [des modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
-
-`await` peut être placé devant toute fonction asynchrone basée sur une promesse pour mettre en pause votre code sur cette ligne jusqu'à ce que la promesse se réalise, puis retourner la valeur résultante.
-
-Vous pouvez utiliser `await` lors de l'appel de toute fonction qui renvoie une promesse, y compris les fonctions de l'API web.
-
-Voici un exemple trivial :
-
-```js
-async function hello() {
-  return salutation = await Promise.resolve("Bonjour");
-};
-
-hello().then(console.log);
-```
-
-Bien sûr, l'exemple ci-dessus n'est pas très utile, même s'il sert à illustrer la syntaxe. Passons maintenant à un exemple réel.
-
-## Réécriture du code des promesses avec async/await
-
-Reprenons un exemple simple de récupération que nous avons vu dans l'article précédent :
-
-```js
-fetch('coffee.jpg')
-.then(response => {
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-À ce stade, vous devriez avoir une compréhension raisonnable des promesses et de leur fonctionnement, mais convertissons le tout en utilisant async/await pour voir à quel point cela simplifie les choses :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-Cela rend le code beaucoup plus simple et plus facile à comprendre — plus de blocs `.then()` partout !
-
-Étant donné qu'un mot-clé `async` transforme une fonction en promesse, vous pourriez remanier votre code pour utiliser une approche hybride de promesses et de `await`, en faisant sortir la seconde moitié de la fonction dans un nouveau bloc pour la rendre plus flexible :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e => console.log(e));
-```
-
-Vous pouvez essayer de taper vous-même l'exemple, ou d'exécuter notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
-
-### Mais comment est-ce que cela fonctionne ?
-
-Vous remarquerez que nous avons enveloppé le code à l'intérieur d'une fonction, et que nous avons inclus le mot-clé `async` avant le mot-clé `function`. C'est nécessaire - vous devez créer une fonction async pour définir un bloc de code dans lequel vous exécuterez votre code async ; comme nous l'avons dit précédemment, `await` ne fonctionne qu'à l'intérieur de fonctions async.
-
-À l'intérieur de la définition de la fonction `myFetch()`, vous pouvez voir que le code ressemble beaucoup à la version précédente de la promesse, mais il y a quelques différences. Au lieu de devoir enchaîner un bloc `.then()` à la fin de chaque méthode basée sur une promesse, il suffit d'ajouter un mot-clé `await` avant l'appel de la méthode, puis d'affecter le résultat à une variable. Le mot-clé `await` fait en sorte que le moteur d'exécution JavaScript mette votre code en pause sur cette ligne, ne permettant pas à d'autres codes de s'exécuter entre-temps jusqu'à ce que l'appel de fonction asynchrone ait retourné son résultat - très utile si le code suivant dépend de ce résultat !
-
-Une fois que c'est terminé, votre code continue à s'exécuter à partir de la ligne suivante. Par exemple :
-
-```js
-let response = await fetch('coffee.jpg');
-```
-
-La réponse retournée par la promesse `fetch()` remplie est affectée à la variable `response` lorsque cette réponse devient disponible, et le parseur fait une pause sur cette ligne jusqu'à ce que cela se produise. Une fois que la réponse est disponible, le parseur passe à la ligne suivante, qui crée un [`Blob`](/fr/docs/Web/API/Blob) à partir de celle-ci. Cette ligne invoque également une méthode async basée sur les promesses, nous utilisons donc `await` ici aussi. Lorsque le résultat de l'opération revient, nous le retournons hors de la fonction `myFetch()`.
-
-Cela signifie que lorsque nous appelons la fonction `myFetch()`, elle retourne une promesse, de sorte que nous pouvons enchaîner un `.then()` à la fin de celle-ci à l'intérieur duquel nous gérons l'affichage du blob à l'écran.
-
-Vous vous dites probablement déjà « c'est vraiment cool ! », et vous avez raison — moins de blocs `.then()` pour envelopper le code, et cela ressemble surtout à du code synchrone, donc c'est vraiment intuitif.
-
-### Ajout de la gestion des erreurs
-
-Si vous voulez ajouter la gestion des erreurs, vous avez plusieurs options.
-
-Vous pouvez utiliser une structure synchrone [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) avec `async`/`await`. Cet exemple développe la première version du code que nous avons montré ci-dessus :
-
-```js
-async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();
-```
-
-Le bloc `catch() {}` reçoit un objet d'erreur, que nous avons appelé `e` ; nous pouvons maintenant l'enregistrer dans la console, et il nous donnera un message d'erreur détaillé montrant où dans le code l'erreur a été lancée.
-
-Si vous vouliez utiliser la deuxième version (remaniée) du code que nous avons montré ci-dessus, il serait préférable de continuer l'approche hybride et d'enchaîner un bloc `.catch()` à la fin de l'appel `.then()`, comme ceci :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) => {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =>
-  console.log(e)
-);
-```
-
-En effet, le bloc `.catch()` attrapera les erreurs survenant à la fois dans l'appel de fonction asynchrone et dans la chaîne de promesses. Si vous utilisiez le bloc `try`/`catch` ici, vous pourriez toujours obtenir des erreurs non gérées dans la fonction `myFetch()` lorsqu'elle est appelée.
-
-Vous pouvez trouver ces deux exemples sur GitHub :
-
-- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
-- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
-
-## En attente d'un Promise.all()
-
-`async`/`await` est construit au-dessus de [Promises](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), il est donc compatible avec toutes les fonctionnalités offertes par les promesses. Cela inclut [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) — vous pouvez tout à fait attendre un appel `Promise.all()` pour obtenir tous les résultats retournés dans une variable d'une manière qui ressemble à du simple code synchrone. Encore une fois, revenons à [un exemple que nous avons vu dans notre article précédent](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Gardez-le ouvert dans un onglet séparé afin de pouvoir le comparer avec la nouvelle version présentée ci-dessous.
-
-En convertissant cela en `async`/`await` (voir la [démo live](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) et le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), cela ressemble maintenant à ceci :
-
-```js
-async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`Erreur HTTP ! statut : ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =>
-  console.log(e)
-);
-```
-
-Vous verrez que la fonction `fetchAndDecode()` a été convertie facilement en fonction asynchrone avec seulement quelques modifications. Voir la ligne `Promise.all()` :
-
-```js
-let values = await Promise.all([coffee, tea, description]);
-```
-
-En utilisant `await` ici, nous sommes en mesure d'obtenir tous les résultats des trois promesses retournées dans le tableau `values`, quand ils sont tous disponibles, d'une manière qui ressemble beaucoup à du code synchrone. Nous avons dû envelopper tout le code dans une nouvelle fonction asynchrone, `displayContent()`, et nous n'avons pas réduit le code de beaucoup de lignes, mais être capable de déplacer la majeure partie du code hors du bloc `.then()` fournit une simplification agréable et utile, nous laissant avec un programme beaucoup plus lisible.
-
-Pour la gestion des erreurs, nous avons inclus un bloc `.catch()` sur notre appel `displayContent()` ; cela permettra de gérer les erreurs survenant dans les deux fonctions.
-
-> **Note :** Il est également possible d'utiliser un bloc [`finally`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause) au sein d'une fonction asynchrone, à la place d'un bloc asynchrone [`.finally()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally), pour montrer un état final sur le déroulement de l'opération — vous pouvez voir cela en action dans notre [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
-
-## Gérer les ralentissements potentiellement causés par async/await
-
-Il est vraiment utile de connaître `async`/`await`, mais il y a quelques inconvénients à prendre en compte.
-
-`async`/`await` donne à votre code une apparence synchrone, et d'une certaine manière, il le fait se comporter de manière plus synchrone. Le mot-clé `await` bloque l'exécution de tout le code qui le suit jusqu'à ce que la promesse se réalise, exactement comme dans le cas d'une opération synchrone. Il permet certes aux autres tâches de continuer à s'exécuter entre-temps, mais le code attendu est bloqué.
-
-```js
-async function makeResult(items) {
-  let newArr = [];
-  for(let i=0; i < items.length; i++) {
-    newArr.push('word_'+i);
-  }
-  return newArr;
-}
-
-async function getResult() {
-  let result = await makeResult(items); // Bloqué sur cette ligne
-  useThatResult(result); // Pas exécuté tant que makeResult() n'a pas fini
-}
-```
-
-Cela signifie que votre code pourrait être ralenti par un nombre important de promesses attendues se produisant directement les unes après les autres. Chaque `await` attendra que la précédente se termine, alors qu'en réalité ce que vous voulez, c'est que les promesses commencent à être traitées simultanément, comme elles le feraient si nous n'utilisions pas `async`/`await`.
-
-Il existe un modèle qui peut atténuer ce problème - déclencher tous les processus de promesse en stockant les objets `Promise` dans des variables, et en les attendant tous ensuite. Jetons un coup d'œil à quelques exemples qui prouvent le concept.
-
-Nous disposons de deux exemples - [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) et [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Les deux commencent par une fonction promise personnalisée qui simule un processus asynchrone avec un appel [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) :
-
-```js
-function timeoutPromise(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("fait");
-    }, interval);
-  });
-};
-```
-
-Ensuite, chacun comprend une fonction asynchrone `timeTest()` qui attend trois appels `timeoutPromise()` :
-
-```js
-async function timeTest() {
-  ...
-}
-```
-
-Chacune d'entre elles se termine en enregistrant une heure de début, en voyant combien de temps la promesse `timeTest()` met à se réaliser, puis en enregistrant une heure de fin et en indiquant combien de temps l'opération a pris au total :
-
-```js
-let startTime = Date.now();
-timeTest().then(() => {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps pris en millisecondes : " + timeTaken);
-})
-```
-
-C'est la fonction `timeTest()` qui diffère dans chaque cas.
-
-Dans l'exemple `slow-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}
-```
-
-Ici, nous attendons les trois appels `timeoutPromise()` directement, en faisant en sorte que chacun d'eux alerte pendant 3 secondes. Chaque appel suivant est forcé d'attendre jusqu'à ce que le dernier soit terminé - si vous exécutez le premier exemple, vous verrez la boîte d'alerte signaler une durée d'exécution totale d'environ 9 secondes.
-
-Dans l'exemple `fast-async-await.html`, `timeTest()` ressemble à ceci :
-
-```js
-async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}
-```
-
-Ici, nous stockons les trois objets `Promise` dans des variables, ce qui a pour effet de déclencher leurs processus associés, tous exécutés simultanément.
-
-Ensuite, nous attendons leurs résultats - parce que les promesses ont toutes commencé à être traitées essentiellement au même moment, les promesses se réaliseront toutes en même temps ; lorsque vous exécuterez le deuxième exemple, vous verrez la boîte d'alerte indiquant un temps d'exécution total d'un peu plus de 3 secondes !
-
-### Gestion des erreurs
-
-La stratégie précédente a un défaut : on pourrait avoir des erreurs qui ne seraient pas gérées.
-
-Mettons à jour les exemples précédents en ajoutant une promesse rejetée et une instruction `catch` à la fin :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  await timeoutPromiseResolve(5000);
-  await timeoutPromiseReject(2000);
-  await timeoutPromiseResolve(3000);
-}
-
-let startTime = Date.now();
-timeTest().then(() => {})
-.catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans l'exemple qui précède, l'erreur est gérée correctement et le message dans la console apparaît après environ 7 secondes.
-
-Voyons maintenant la deuxième approche :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  await timeoutPromiseResolve1;
-  await timeoutPromiseReject2;
-  await timeoutPromiseResolve3;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, on a une erreur qui n'est pas gérée dans la console (après 2 secondes) et le message apparaît après environ 5 secondes.
-
-Pour démarrer les promesses en parallèles et intercepter les erreurs correctement, on pourrait utiliser `Promise.all()` comme vu auparavant :
-
-```js
-function timeoutPromiseResolve(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      resolve("Succès");
-    }, interval);
-  });
-};
-
-function timeoutPromiseReject(interval) {
-  return new Promise((resolve, reject) => {
-    setTimeout(function(){
-      reject("Erreur");
-    }, interval);
-  });
-};
-
-async function timeTest() {
-  const timeoutPromiseResolve1 = timeoutPromiseResolve(5000);
-  const timeoutPromiseReject2 = timeoutPromiseReject(2000);
-  const timeoutPromiseResolve3 = timeoutPromiseResolve(3000);
-
-  const results = await Promise.all([timeoutPromiseResolve1, timeoutPromiseReject2, timeoutPromiseResolve3]);
-  return results;
-}
-
-let startTime = Date.now();
-timeTest().then(() => {
-}).catch(e => {
-  console.log(e);
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  console.log("Temps écoulé en millisecondes : " + timeTaken);
-})
-```
-
-Dans cet exemple, l'erreur est gérée correctement après 2 secondes et on a le message dans la console après environ 2 secondes.
-
-La méthode `Promise.all()` rejète lorsqu'au moins un de ses promesses d'entrée rejète. Si on veut que toutes les promesses soient résolues (correctement ou avec un rejet), on pourra utiliser la méthode [`Promise.allSettled()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) à la place.
-
-## Méthodes de classe async/await
-
-Une dernière remarque avant de poursuivre, vous pouvez même ajouter `async` devant les méthodes de classe/objet pour qu'elles renvoient des promesses, et `await` des promesses à l'intérieur de celles-ci. Jetez un œil au [code de la classe ES que nous avons vu dans notre article sur le JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes), puis regardez notre version modifiée avec une méthode `async` :
-
-```js
-class Personne {
-  constructor(prenom, nomFamille, age, genre, interets) {
-    this.nom = {
-      prenom,
-      nomFamille
-    };
-    this.age = age;
-    this.genre = genre;
-    this.interets = interets;
-  }
-
-  async salutation() {
-    return await Promise.resolve(`Bonjour ! Je suis ${this.nom.prenom}`);
-  };
-
-  aurevoir() {
-    console.log(`${this.nom.prenom} a quitté le bâtiment. À une prochaine fois !`);
-  };
-}
-
-let han = new Personne('Han', 'Solo', 25, 'homme', ['Contrebande']);
-```
-
-La méthode de la première classe peut maintenant être utilisée de la manière suivante :
-
-```js
-han.salutation().then(console.log);
-```
-
-## Prise en charge des navigateurs
-
-L'une des considérations à prendre en compte pour décider d'utiliser `async`/`await`est la prise en charge des anciens navigateurs. Ces fonctionnalités sont disponibles dans les versions modernes de la plupart des navigateurs, tout comme les promesses ; les principaux problèmes de prise en charge concernent Internet Explorer et Opera Mini.
-
-Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/). Cela vous permet d'écrire vos applications en utilisant les dernières versions de JavaScript et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs. Lorsque vous rencontrez un navigateur qui ne supporte pas async/await, le _polyfill_ « prothèse d'émulation » de Babel peut automatiquement fournir des _fallbacks_ « solutions de secours » qui fonctionnent dans les anciens navigateurs.
-
-## Conclusion
-
-Et voilà, `async`/`await` offre un moyen agréable et simplifié d'écrire du code asynchrone, plus facile à lire et à maintenir. Même si la prise en charge par les navigateurs est plus limitée que d'autres mécanismes de code asynchrone à l'heure où nous écrivons ces lignes, cela vaut la peine de l'apprendre et d'envisager de l'utiliser, maintenant et à l'avenir.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md b/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
deleted file mode 100644
index 679212748d..0000000000
--- a/files/fr/learn/javascript/asynchronous/choosing_the_right_approach/index.md
+++ /dev/null
@@ -1,439 +0,0 @@
----
-title: Choisir la bonne approche
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-tags:
-  - Beginner
-  - Intervals
-  - JavaScript
-  - Learn
-  - Optimize
-  - Promises
-  - async
-  - asynchronous
-  - await
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
----
-{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-Pour terminer ce module, nous vous proposons une brève discussion sur les différentes techniques et fonctionnalités asynchrones abordées tout au long de ce module, en examinant laquelle de ces techniques est la plus pertinente en fonction de la situation ainsi que des recommandations et des rappels des pièges courants le cas échéant.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, une compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Être capable de faire un choix judicieux quant à l'utilisation de
-        différentes techniques de programmation asynchrone.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Fonctions de rappels (callbacks) asynchrones
-
-Généralement trouvé dans les API à l'ancienne, une fonction de rappel (ou _callback_ en anglais) implique qu'une fonction soit passée en paramètre à une autre fonction, qui est ensuite invoquée lorsqu'une opération asynchrone est terminée afin réaliser une opération avec le résultat. C'est la méthode qui précédait l'arrivée des promesses : elle n'est pas aussi efficace ou flexible. Ne l'utilisez que si nécessaire.
-
-| Opération unique retardée | Opération répétée       | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Oui (rappels récursifs) | Oui (rappels imbriqués)            | Non                              |
-
-### Exemple de code
-
-Un exemple qui charge une ressource via l'API [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ([l'exécuter en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), et [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)) :
-
-```js
-function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);
-```
-
-### Pièges
-
-- Les fonctions de rappels imbriquées peuvent être encombrantes et difficiles à lire (ce qu'on appelle parfois « _callback hell_ » en anglais).
-- Les fonctions de rappel pour les cas d'erreur doivent être appelés une fois pour chaque niveau d'imbrication, alors qu'avec les promesses, vous pouvez simplement utiliser un seul bloc `.catch()` pour gérer les erreurs de toute la chaîne.
-- Les fonctions de rappel asynchrones ne sont pas très élégantes.
-- Les fonctions de rappel passées en argument de promesses sont toujours appelés dans l'ordre strict où ils sont placés dans la file d'attente des événements ; les fonctions de rappel asynchrones ne le sont pas.
-- Les fonctions de rappel asynchrones perdent le contrôle total de la façon dont la fonction sera exécutée lorsqu'elle est transmise à une bibliothèque tierce.
-
-### Compatibilité des navigateurs
-
-Très bonne prise en charge générale, bien que la prise en charge exacte dans les différentes API dépende de l'API en question. Reportez-vous à la documentation de référence de l'API que vous utilisez pour obtenir des informations plus spécifiques.
-
-### Plus d'informations
-
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing), en particulier les [Fonctions de rappels asynchrones](/fr/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks)
-
-## setTimeout()
-
-[`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) est une méthode qui permet d'exécuter une fonction après l'écoulement d'un délai arbitraire.
-
-| Opération unique retardée | Opération répétée      | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ---------------------- | ---------------------------------- | -------------------------------- |
-| Oui                       | Oui (délais récursifs) | Oui (délais d'attente imbriqués)   | Non                              |
-
-### Exemple de code
-
-Ici, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message dans la console ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let myGreeting = setTimeout(function() {
-  console.log('Bonjour, M. Univers !');
-}, 2000)
-```
-
-### Pièges
-
-Vous pouvez utiliser des appels récursifs à `setTimeout()` pour exécuter une fonction de manière répétée de façon similaire à `setInterval()`, en utilisant un code comme celui-ci :
-
-```js
-let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);
-```
-
-Il existe une différence entre `setTimeout()` appelé récursivement et `setInterval()` :
-
-- Les récursions avec `setTimeout()` garantissent qu'au moins le temps spécifié (100ms dans cet exemple) s'écoulera entre les exécutions ; le code s'exécutera puis attendra 100 millisecondes avant de s'exécuter à nouveau. L'intervalle sera le même quelle que soit la durée d'exécution du code.
-- Avec `setInterval()`, l'intervalle que nous choisissons _inclut_ le temps d'exécution du code que nous voulons exécuter. Disons que le code prend 40 millisecondes pour s'exécuter — l'intervalle finit alors par n'être que de 60 millisecondes.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser `setTimeout()` récursivement - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`setTimeout()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()>)
-- Page de référence pour [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-
-## setInterval()
-
-[`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) est une méthode qui permet d'exécuter une fonction de façon répétée avec des intervalles de temps donnés entre chaque exécution. Cette méthode n'est pas aussi efficace que [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), mais elle permet de choisir le rythme d'exécution.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples         | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ------------------------------------------ | -------------------------------- |
-| Non                       | Oui               | Non (à moins qu'elles ne soient les mêmes) | Non                              |
-
-### Exemple de code
-
-La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps à l'aide de [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Nous l'exécutons ensuite une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-  let date = new Date();
-  let time = date.toLocaleTimeString();
-  document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-### Pièges
-
-- La fréquence d'exécution et d'affichage n'est pas optimisée pour le système sur lequel l'animation est exécutée, et peut être quelque peu inefficace. À moins que vous n'ayez besoin de choisir un framerate spécifique (plus lent), il est généralement préférable d'utiliser `requestAnimationFrame()`.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-- Page de référence pour [setInterval()](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une méthode qui vous permet d'exécuter une fonction de manière répétée, et efficace, à la meilleure fréquence de rafraîchissement disponible compte tenu du navigateur/système actuel. Vous devriez, dans la mesure du possible, utiliser cette méthode au lieu de `setInterval()`/`setTimeout()` récursif, sauf si vous avez besoin d'une fréquence de rafraîchissement spécifique.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples  | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ----------------------------------- | -------------------------------- |
-| Non                       | Oui               | Non (à moins que ce soit les mêmes) | Non                              |
-
-### Exemple de code
-
-Une toupie animée simple ; vous pouvez trouver cet [exemple en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)) :
-
-```js
-const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount > 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Pièges
-
-- Vous ne pouvez pas choisir une fréquence d'images spécifique avec `requestAnimationFrame()`. Si vous devez exécuter votre animation à un _framerate_ plus lent, vous devrez utiliser `setInterval()` ou `setTimeout()` récursif.
-
-### Compatibilité des navigateurs
-
-{{Compat("api.Window.requestAnimationFrame")}}
-
-### Plus d'informations
-
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals), en particulier [`requestAnimationFrame()`](</fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()>)
-- Page de référence pour [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-
-## Promises (Promesses)
-
-[Les promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) sont une fonctionnalité JavaScript qui permet d'exécuter des opérations asynchrones et d'attendre qu'elles soient définitivement terminées avant d'exécuter une autre opération en fonction de son résultat. Les promesses sont la colonne vertébrale du JavaScript asynchrone moderne.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Oui                                | Voir `Promise.all()`, en dessous |
-
-### Exemple de code
-
-Le code suivant va chercher une image sur le serveur et l'affiche à l'intérieur d'un élément [`<img>`](/fr/docs/Web/HTML/Element/Img) ; [voyez-le aussi en direct](https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html), et voyez aussi [le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html) :
-
-```js
-fetch('coffee.jpg')
-.then(response => response.blob())
-.then(myBlob => {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e => {
-  console.log('Il y a eu un problème avec votre opération de récupération : ' + e.message);
-});
-```
-
-### Pièges
-
-Les chaînes de promesses peuvent être complexes et difficiles à analyser. Si vous imbriquez un certain nombre de promesses, vous pouvez vous retrouver avec des problèmes similaires à l'enfer des rappels. Par exemple :
-
-```js
-remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Un document extrait avec un id " + element.doc._id + " et ajouté à la base de données locale.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...
-```
-
-Il est préférable d'utiliser la puissance de chaînage des promesses pour aller avec une structure plus plate et plus facile à analyser :
-
-```js
-remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});
-```
-
-ou encore :
-
-```js
-remotedb.allDocs(...)
-.then(resultOfAllDocs => {
-  return localdb.put(...);
-})
-.then(resultOfPut => {
-  return localdb.get(...);
-})
-.then(resultOfGet => {
-  return localdb.put(...);
-})
-.catch(err => console.log(err));
-```
-
-Cela couvre une grande partie des éléments de base. Pour un traitement beaucoup plus complet, voir l'excellent article [Nous avons un problème avec les promesses](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html) (en), par Nolan Lawson.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Utiliser les promesses](/fr/docs/Web/JavaScript/Guide/Using_promises)
-- Page de référence pour [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-
-## Promise.all()
-
-Une fonction JavaScript qui vous permet d'attendre que plusieurs promesses se terminent avant d'exécuter une autre opération basée sur les résultats de toutes les autres promesses.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples |
-| ------------------------- | ----------------- | ---------------------------------- | -------------------------------- |
-| Non                       | Non               | Non                                | Oui                              |
-
-### Exemple de code
-
-L'exemple suivant va chercher plusieurs ressources sur le serveur, et utilise `Promise.all()` pour attendre qu'elles soient toutes disponibles avant de les afficher toutes — [le voir fonctionner](https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html), et voir son [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html) :
-
-```js
-function fetchAndDecode(url, type) {
-  // Retourner la promesse de niveau supérieur, de sorte que le résultat
-  // de l'ensemble de la chaîne est retourné hors de la fonction
-  return fetch(url).then(response => {
-    // Selon le type de fichier recherché, utilisez la fonction appropriée pour décoder son contenu
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e => {
-    console.log(`Il y a eu un problème avec votre opération de récupération de la ressource "${url}" : ` + e.message);
-  });
-}
-
-// Appeler la méthode fetchAndDecode() pour récupérer les images et le texte
-// et stocker leurs promesses dans des variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Utiliser Promise.all() pour exécuter le code uniquement lorsque
-// les trois appels de fonction ont été résolus
-Promise.all([coffee, tea, description]).then(values => {
-  console.log(values);
-  // Stocker chaque valeur retournée par les promesses dans des variables séparées ;
-  // créer des URL d'objets à partir des blobs.
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Afficher les images dans les éléments <img>
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Afficher le texte d'un paragraphe
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});
-```
-
-### Pièges
-
-- Si `Promesse.all()` est rejeté, alors une ou plusieurs des promesses que vous lui fournissez dans son paramètre de tableau doivent être rejetées, ou pourraient ne pas retourner de promesses du tout. Vous devez vérifier chacune d'entre elles pour voir ce qu'elles ont retourné.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.builtins.Promise.all")}}
-
-### Plus d'informations
-
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling)
-- Page de référence pour [`Promise.all()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
-
-## async/await
-
-Un outil syntaxique construit sur les promesses qui vous permet d'exécuter des opérations asynchrones en utilisant une syntaxe qui ressemble plus à l'écriture de code de rappel synchrone.
-
-| Opération unique retardée | Opération répétée | Opérations séquentielles multiples | Opérations simultanées multiples          |
-| ------------------------- | ----------------- | ---------------------------------- | ----------------------------------------- |
-| Non                       | Non               | Oui                                | Oui (en combinaison avec `Promise.all()`) |
-
-### Exemple de code
-
-L'exemple suivant est un remaniement de l'exemple simple de promesse que nous avons vu précédemment, qui récupère et affiche une image, écrit à l'aide d'async/await ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html), et voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html)) :
-
-```js
-async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();
-```
-
-### Pièges
-
-- Vous ne pouvez pas utiliser l'opérateur `await` à l'intérieur d'une fonction non-`async`, ou dans le contexte de haut niveau de votre code. Cela peut parfois entraîner la création d'une fonction encapsulante supplémentaire, ce qui peut être légèrement frustrant dans certaines circonstances. Mais cela en vaut la peine la plupart du temps.
-- Le support des navigateurs pour `async`/`await` n'est pas aussi bon que celui des promesses. Si vous souhaitez utiliser `async`/`await` mais que vous êtes préoccupé par la prise en charge de navigateurs plus anciens, vous pouvez envisager d'utiliser la bibliothèque [BabelJS](https://babeljs.io/) — cela vous permet d'écrire vos applications en utilisant le JavaScript le plus récent et de laisser Babel déterminer les modifications éventuellement nécessaires pour les navigateurs de vos utilisateurs.
-
-### Compatibilité des navigateurs
-
-{{Compat("javascript.statements.async_function")}}
-
-### Plus d'informations
-
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- Page de référence pour [les fonctions asynchrones](/fr/docs/Web/JavaScript/Reference/Statements/async_function)
-- Page de référence pour l'opérateur [await](/fr/docs/Web/JavaScript/Reference/Operators/await)
-
-{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec `async` et `await`](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/concepts/index.md b/files/fr/learn/javascript/asynchronous/concepts/index.md
deleted file mode 100644
index 03dc27feaf..0000000000
--- a/files/fr/learn/javascript/asynchronous/concepts/index.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: Concepts généraux de programmation asynchrone
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-Dans cet article, nous allons passer en revue un certain nombre de concepts importants relatifs à la programmation asynchrone et à la façon dont elle se présente dans les navigateurs web et JavaScript. Vous devriez comprendre ces concepts avant de travailler sur les autres articles du module.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les concepts de base de la programmation asynchrone et la
-        façon dont elles se manifestent dans les navigateurs Web et dans
-        JavaScript.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Asynchrone ?
-
-Normalement, le code d'un programme donné se déroule sans interruption, une seule chose se produisant à la fois. Si une fonction dépend du résultat d'une autre fonction, elle doit attendre que l'autre fonction se termine et retourne sa réponse, et jusqu'à ce que cela se produise, le programme entier est essentiellement bloqué du point de vue de l'utilisateur.
-
-Les utilisatrices et utilisateurs de macOS, par exemple, le voient parfois avec le curseur rotatif de couleur arc-en-ciel (ou « ballon de plage », comme on l'appelle souvent). Ce curseur est la façon dont le système d'exploitation dit "le programme que vous utilisez actuellement a dû s'arrêter et attendre que quelque chose se termine, et cela prend tellement de temps que je craignais que vous vous demandiez ce qui se passe".
-
-![Spinner multicolore pour macOS avec ballon de plage.](beachball.jpg)
-
-C'est une expérience frustrante qui n'est pas une bonne utilisation de la puissance de traitement de l'ordinateur, surtout à une époque où les ordinateurs disposent de plusieurs cœurs de processeur. Il est inutile de rester assis à attendre quelque chose alors que vous pouvez laisser une tâche se dérouler sur un autre cœur de processeur et être averti quand elle a terminé. Cela vous permet d'effectuer d'autres travaux en même temps, ce qui est la base de la **programmation asynchrone**. C'est à l'environnement de programmation que vous utilisez (les navigateurs web, dans le cas du développement web) de vous fournir des API qui vous permettent d'exécuter de telles tâches de manière asynchrone.
-
-## Code bloquant
-
-Les techniques asynchrones sont très utiles, notamment dans la programmation web. Lorsqu'une application web s'exécute dans un navigateur et qu'elle exécute un morceau de code considérable sans rendre le contrôle au navigateur, ce dernier peut sembler figé. C'est ce qu'on appelle du code **bloquant** ; le navigateur est incapable de continuer à traiter les entrées de l'utilisateur et d'effectuer d'autres tâches jusqu'à ce que l'application web rende le contrôle du processeur.
-
-Examinons quelques exemples qui montrent ce que nous entendons par blocage.
-
-Dans notre exemple [simple-sync.html](https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html) ([voir le fonctionnement en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html)), nous ajoutons un écouteur d'événement de clic à un bouton de sorte que, lorsqu'il est cliqué, il exécute une opération qui prend du temps (calcule 10 millions de dates puis enregistre la dernière dans la console) et ajoute ensuite un paragraphe au DOM :
-
-```js
-const btn = document.querySelector('button');
-btn.addEventListener('click', () => {
-  let myDate;
-  for(let i = 0; i < 10000000; i++) {
-    let date = new Date();
-    myDate = date;
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = `Il s'agit d'un paragraphe nouvellement ajouté.`;
-  document.body.appendChild(pElem);
-});
-```
-
-Lorsque vous exécutez l'exemple, ouvrez votre console JavaScript, puis cliquez sur le bouton. Vous remarquerez que le paragraphe n'apparaît qu'une fois que le calcul des dates est terminé et que le message de la console a été enregistré. Le code s'exécute dans l'ordre où il apparaît dans la source, et la dernière opération ne s'exécute pas tant que la première n'est pas terminée.
-
-> **Note :** L'exemple précédent est très peu réaliste. Vous ne calculeriez jamais 10 millions de dates sur une véritable application web ! Il sert cependant à vous donner l'idée de base.
-
-Dans notre deuxième exemple, [simple-sync-ui-blocking.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html) ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html)), nous simulons quelque chose de légèrement plus réaliste que vous pourriez rencontrer sur une page réelle. Nous bloquons l'interactivité de l'utilisateur avec le rendu de l'interface utilisateur. Dans cet exemple, nous avons deux boutons :
-
-- Un bouton "Remplir le canevas" qui, lorsqu'il est cliqué, remplit le [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) disponible avec 1 million de cercles bleus.
-- Un bouton "Cliquez sur moi pour l'alerte" qui, lorsqu'il est cliqué, affiche un message d'alerte.
-
-```js
-function expensiveOperation() {
-  for(let i = 0; i < 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill();
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =>
-  alert('Vous avez cliqué sur moi !');
-);
-```
-
-Si vous cliquez sur le premier bouton, puis rapidement sur le second, vous verrez que l'alerte n'apparaît pas avant que les cercles aient fini d'être rendus. La première opération bloque la seconde jusqu'à ce qu'elle ait fini de s'exécuter.
-
-> **Note :** D'accord, dans notre cas, c'est laid et nous simulons l'effet de blocage, mais il s'agit d'un problème courant contre lequel les développeuses et développeurs d'applications réelles se battent sans cesse pour atténuer les impacts indésirables.
-
-Pourquoi ? La réponse est que JavaScript, de manière générale, ne s'exécute que sur **un seul _thread_**. À ce stade, nous devons introduire le concept de **_threads_**.
-
-## Les threads
-
-Un **_thread_** est fondamentalement un processus unique qu'un programme peut utiliser pour accomplir des tâches. Chaque _thread_ ne peut effectuer qu'une seule tâche à la fois :
-
-    Tâche A --> Tâche B --> Tâche C
-
-Chaque tâche sera exécutée de manière séquentielle ; une tâche doit être terminée avant que la suivante puisse être lancée.
-
-Comme nous l'avons dit précédemment, de nombreux ordinateurs sont désormais dotés de plusieurs cœurs et peuvent donc faire plusieurs choses à la fois. Les langages de programmation qui prennent en charge plusieurs processus peuvent utiliser plusieurs cœurs pour accomplir de multiples tâches simultanément :
-
-    Processus 1: Tâche A --> Tâche B
-    Processus 2: Tâche C --> Tâche D
-
-### JavaScript n'a qu'un thread
-
-JavaScript est traditionnellement « single-threaded ». Même avec plusieurs cœurs, vous ne pouviez le faire exécuter des tâches que sur un seul processus, appelé le **main thread**. Notre exemple ci-dessus est exécuté comme ceci :
-
-    processus principal : Rendre des cercles dans <canvas> --> Afficher alert()
-
-Après un certain temps, JavaScript a gagné quelques outils pour aider à résoudre de tels problèmes. [Les Web workers](/fr/docs/Web/API/Web_Workers_API) vous permettent d'envoyer une partie du traitement JavaScript hors d'un processus distinct, appelé worker, afin que vous puissiez exécuter plusieurs morceaux JavaScript simultanément. Vous utiliserez généralement un worker pour exécuter des processus coûteux hors du processus principal afin de ne pas bloquer l'interaction avec l'utilisateur.
-
-    Processus principal : Tâche A --> Tâche C
-    Processus du Worker : Tâche coûteuse B
-
-Dans cette optique, jetez un coup d'œil à [simple-sync-worker.html](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html) ([voyez-le fonctionner en direct](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html)), toujours avec la console JavaScript de votre navigateur ouverte. Il s'agit d'une réécriture de notre exemple précédent qui calcule les 10 millions de dates dans un fil de travail (_worker_) séparé. Vous pouvez voir le code du _worker_ ici : [worker.js](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/worker.js). Désormais, lorsque vous cliquez sur le bouton, le navigateur est capable d'afficher le paragraphe avant que les dates n'aient fini d'être calculées. La première opération ne bloque plus la seconde et une fois que le _worker_ a fini ses calculs, la date est affichée dans la console.
-
-## Code asynchrone
-
-Les web workers sont très utiles, mais ils ont leurs limites. L'une des principales est qu'ils ne peuvent pas accéder au [DOM](/fr/docs/Glossary/DOM). Vous ne pouvez pas demander à un worker de faire directement quelque chose pour mettre à jour l'interface utilisateur. Nous n'avons pas pu rendre nos 1 million de cercles bleus à l'intérieur de notre worker ; il ne peut faire que le calcul des chiffres.
-
-Le deuxième problème est que, bien que le code exécuté dans un worker ne soit pas bloquant, il reste fondamentalement synchrone. Cela devient un problème lorsqu'une fonction s'appuie sur les résultats de plusieurs processus précédents pour fonctionner. Considérons les diagrammes de processus suivants :
-
-    Processus principal : Tâche A --> Tâche B
-
-Dans ce cas, disons que la tâche A fait quelque chose comme récupérer une image du serveur et que la tâche B fait ensuite quelque chose à l'image comme lui appliquer un filtre. Si vous lancez la tâche A et essayez immédiatement d'exécuter la tâche B, vous obtiendrez une erreur, car l'image ne sera pas encore disponible.
-
-    Processus principal : Tâche A --> Tâche B --> |Tâche D|
-    Processus du Worker : Tâche C --------------> |       |
-
-Dans ce cas, disons que la tâche D utilise les résultats de la tâche B et de la tâche C. Si nous pouvons garantir que ces résultats seront tous deux disponibles au même moment, alors nous pourrions être OK, mais c'est peu probable. Si la tâche D tente de s'exécuter alors que l'une de ses entrées n'est pas encore disponible, elle déclenchera une erreur.
-
-Pour résoudre ces problèmes, les navigateurs nous permettent d'exécuter certaines opérations de manière asynchrone. Des fonctionnalités telles que [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) permettent de lancer une opération (par exemple, la récupération d'une image sur le serveur), puis d'attendre le retour du résultat avant de lancer une autre opération :
-
-    Processus principal : Tâche A                   Tâche B
-    Promesse :               |__opération asynchrone__|
-
-Comme l'opération se déroule ailleurs, le processus principal n'est pas bloqué pendant le traitement de l'opération asynchrone.
-
-Nous allons commencer à examiner comment écrire du code asynchrone dans le prochain article. C'est passionnant, non ? Bonne lecture !
-
-## Conclusion
-
-La conception de logiciels modernes s'articule de plus en plus autour de l'utilisation de la programmation asynchrone, afin de permettre aux programmes de faire plusieurs choses à la fois. À mesure que vous utilisez des API plus récentes et plus puissantes, vous trouverez de plus en plus de cas où la seule façon de faire les choses est asynchrone. Il était autrefois difficile d'écrire du code asynchrone. Il faut encore s'y habituer, mais c'est devenu beaucoup plus facile. Dans la suite de ce module, nous étudierons plus en détail pourquoi le code asynchrone est important et comment concevoir un code qui évite certains des problèmes décrits ci-dessus.
-
-{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md b/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
deleted file mode 100644
index 890896be61..0000000000
--- a/files/fr/learn/javascript/asynchronous/timeouts_and_intervals/index.md
+++ /dev/null
@@ -1,647 +0,0 @@
----
-title: 'JavaScript asynchrone coopératif : délais et intervalles'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-tags:
-  - Animation
-  - Beginner
-  - CodingScripting
-  - Guide
-  - Intervals
-  - JavaScript
-  - Loops
-  - asynchronous
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-Ce tutoriel présente les méthodes traditionnelles dont dispose JavaScript pour exécuter du code de manière asynchrone après l'écoulement d'une période de temps déterminée ou à un intervalle régulier (par exemple, un nombre déterminé de fois par seconde), discute de leur utilité et examine leurs problèmes inhérents.
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th scope="row">Prérequis :</th>
-      <td>
-        Connaissances informatiques de base, compréhension raisonnable des
-        principes fondamentaux de JavaScript.
-      </td>
-    </tr>
-    <tr>
-      <th scope="row">Objectif :</th>
-      <td>
-        Comprendre les boucles et les intervalles asynchrones et leur utilité.
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-## Introduction
-
-Depuis longtemps, la plate-forme Web offre aux programmeurs JavaScript un certain nombre de fonctions qui leur permettent d'exécuter du code de manière asynchrone après un certain intervalle de temps, et d'exécuter un bloc de code de manière asynchrone jusqu'à ce que vous lui demandiez de s'arrêter.
-
-Ces fonctions sont :
-
-- [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
-  - : Exécuter un bloc de code spécifié une fois, après qu'un temps spécifié se soit écoulé.
-- [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
-  - : Exécuter un bloc de code spécifique de manière répétée, avec un délai fixe entre chaque appel.
-- [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame)
-  - : La version moderne de `setInterval()`. Exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet à une animation d'être exécutée à une fréquence d'images appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Le code asynchrone mis en place par ces fonctions s'exécute sur le processus principal (après l'écoulement de leur minuterie spécifiée).
-
-Il est important de savoir que vous pouvez (et allez souvent) exécuter un autre code avant qu'un appel `setTimeout()` ne s'exécute, ou entre les itérations de `setInterval()`. Selon l'intensité du processeur de ces opérations, elles peuvent retarder encore plus votre code asynchrone, car tout code asynchrone ne s'exécutera qu'_après_ la disponibilité du processus principal. (En d'autres termes, lorsque la pile est vide.) Vous en apprendrez davantage à ce sujet au fur et à mesure que vous progresserez dans cet article.
-
-Dans tous les cas, ces fonctions sont utilisées pour exécuter des animations constantes et d'autres traitements en arrière-plan sur un site Web ou une application. Dans les sections suivantes, nous allons vous montrer comment les utiliser.
-
-## setTimeout()
-
-Comme nous l'avons dit précédemment, [`setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) exécute un bloc de code particulier une fois qu'un temps spécifié s'est écoulé. Il prend les paramètres suivants :
-
-- Une fonction à exécuter, ou une référence à une fonction définie ailleurs.
-- Un nombre représentant l'intervalle de temps en millisecondes (1000 millisecondes équivalent à 1 seconde) à attendre avant d'exécuter le code. Si vous spécifiez une valeur de `0` (ou omettez la valeur), la fonction sera exécutée dès que possible. (Voir la note ci-dessous sur la raison pour laquelle elle s'exécute "dès que possible" et non "immédiatement"). Plus d'informations sur les raisons pour lesquelles vous pourriez vouloir faire cela plus tard.
-- Zéro ou plusieurs valeurs représentant les paramètres que vous souhaitez transmettre à la fonction lors de son exécution.
-
-> **Note :** La quantité de temps spécifiée (ou le délai) n'est **pas** le _temps garanti_ à l'exécution, mais plutôt le _temps minimum_ à l'exécution. Les rappels que vous passez à ces fonctions ne peuvent pas s'exécuter tant que la pile du processus principal n'est pas vide.
->
-> En conséquence, un code comme `setTimeout(fn, 0)` s'exécutera dès que la pile sera vide, **pas** immédiatement. Si vous exécutez un code comme `setTimeout(fn, 0)` mais qu'immédiatement après vous exécutez une boucle qui compte de 1 à 10 milliards, votre rappel sera exécuté après quelques secondes.
-
-Dans l'exemple suivant, le navigateur attendra deux secondes avant d'exécuter la fonction anonyme, puis affichera le message d'alerte ([voir son exécution en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html), et [voir le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html)) :
-
-```js
-let maSalutation = setTimeout(() => {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-```
-
-Les fonctions que vous spécifiez n'ont pas besoin d'être anonymes. Vous pouvez donner un nom à votre fonction, et même la définir ailleurs et passer une référence de fonction à `setTimeout()`. Les deux versions suivantes de l'extrait de code sont équivalentes à la première :
-
-```js
-// Avec une fonction nommée
-let maSalutation = setTimeout(function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}, 2000);
-
-// Avec une fonction définie séparément
-function direBonjour() {
-  console.log('Bonjour, M. Univers !');
-}
-
-let maSalutation = setTimeout(direBonjour, 2000);
-```
-
-Cela peut être utile si vous avez une fonction qui doit être appelée à la fois à partir d'un délai d'attente et en réponse à un événement, par exemple. Mais cela peut aussi vous aider à garder votre code en ordre, surtout si le rappel du délai d'attente représente plus de quelques lignes de code.
-
-`setTimeout()` renvoie une valeur d'identifiant qui peut être utilisée pour faire référence au délai d'attente ultérieurement, par exemple lorsque vous souhaitez l'arrêter. Voir [Effacement des délais d'attente](#clearing_timeouts) (ci-dessous) pour apprendre comment faire cela.
-
-### Passage de paramètres à une fonction setTimeout()
-
-Tous les paramètres que vous voulez passer à la fonction en cours d'exécution à l'intérieur du `setTimeout()` doivent lui être passés comme paramètres supplémentaires à la fin de la liste.
-
-Par exemple, vous pouvez remanier la fonction précédente pour qu'elle dise bonjour à la personne dont le nom lui est transmis :
-
-```js
-function direBonjour(who) {
-  console.log(`Bonjour ${who} !`);
-}
-```
-
-Maintenant, vous pouvez passer le nom de la personne dans l'appel `setTimeout()` comme troisième paramètre :
-
-```js
-let maSalutation = setTimeout(direBonjour, 2000, 'M. Univers');
-```
-
-### Effacement des délais d'attente
-
-Enfin, si un timeout a été créé, vous pouvez l'annuler avant que le temps spécifié ne se soit écoulé en appelant [`clearTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), en lui passant en paramètre l'identifiant de l'appel `setTimeout()`. Donc pour annuler notre timeout ci-dessus, vous feriez ceci :
-
-```js
-clearTimeout(maSalutation);
-```
-
-> **Note :** Voir [`greeter-app.html`](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html) pour une démo un peu plus élaborée qui permet de définir le nom de la personne à saluer dans un formulaire, et d'annuler la salutation à l'aide d'un bouton séparé ([voir aussi le code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html)).
-
-## setInterval()
-
-`setTimeout()` fonctionne parfaitement lorsque vous devez exécuter du code une fois après une période de temps définie. Mais que se passe-t-il lorsque vous avez besoin d'exécuter le code encore et encore - par exemple, dans le cas d'une animation ?
-
-C'est là qu'intervient le [`setInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setInterval). Cela fonctionne de manière très similaire à `setTimeout()`, sauf que la fonction que vous passez comme premier paramètre est exécutée de manière répétée à une fréquence égale au nombre de millisecondes donné par le deuxième paramètre distinct, plutôt qu'une seule fois. Vous pouvez également passer tous les paramètres requis par la fonction en cours d'exécution comme paramètres ultérieurs de l'appel `setInterval()`.
-
-Prenons un exemple. La fonction suivante crée un nouvel objet [`Date()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), en extrait une chaîne de temps en utilisant [`toLocaleTimeString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString), puis l'affiche dans l'interface utilisateur. Elle exécute ensuite la fonction une fois par seconde à l'aide de `setInterval()`, créant l'effet d'une horloge numérique qui se met à jour une fois par seconde ([voir cela en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et aussi [voir la source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html)) :
-
-```js
-function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);
-```
-
-Tout comme `setTimeout()`, `setInterval()` renvoie une valeur d'identification que vous pouvez utiliser plus tard lorsque vous devez effacer l'intervalle.
-
-### Effacement des intervalles
-
-`setInterval()` continue à exécuter une tâche pour toujours, à moins que vous ne fassiez quelque chose à ce sujet. Vous voudrez probablement un moyen d'arrêter de telles tâches, sinon vous pouvez finir par obtenir des erreurs lorsque le navigateur ne peut pas compléter d'autres versions de la tâche, ou si l'animation gérée par la tâche est terminée. Vous pouvez le faire de la même manière que vous arrêtez les temporisations - en passant l'identifiant renvoyé par l'appel `setInterval()` à la fonction [`clearInterval()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) :
-
-```js
-const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);
-```
-
-#### Apprentissage actif : Créez votre propre chronomètre !
-
-Tout ceci étant dit, nous avons un défi à vous proposer. Prenez une copie de notre exemple [`setInterval-clock.html`](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html), et modifiez-le pour créer votre propre chronomètre simple.
-
-Vous devez afficher une heure comme précédemment, mais dans cet exemple, vous avez besoin :
-
-- Un bouton "Start" pour lancer le chronomètre.
-- Un bouton "Stop" pour le mettre en pause/arrêter.
-- Un bouton "Reset" pour réinitialiser le temps à `0`.
-- L'affichage du temps pour indiquer le nombre de secondes écoulées, plutôt que le temps réel.
-
-Voici quelques conseils pour vous :
-
-- Vous pouvez structurer et styliser le balisage du bouton comme vous le souhaitez ; veillez simplement à utiliser du HTML sémantique, avec des crochets vous permettant de saisir les références du bouton à l'aide de JavaScript.
-- Vous voulez probablement créer une variable qui commence à `0`, puis s'incrémente d'une unité toutes les secondes en utilisant une boucle constante.
-- Il est plus facile de créer cet exemple sans utiliser un objet `Date()`, comme nous l'avons fait dans notre version, mais moins précis - vous ne pouvez pas garantir que le rappel se déclenchera après exactement `1000`ms. Une façon plus précise serait d'exécuter `startTime = Date.now()` pour obtenir un horodatage du moment exact où l'utilisateur a cliqué sur le bouton de démarrage, puis de faire `Date.now() - startTime` pour obtenir le nombre de millisecondes après le clic sur le bouton de démarrage.
-- Vous souhaitez également calculer le nombre d'heures, de minutes et de secondes sous forme de valeurs distinctes, puis les afficher ensemble dans une chaîne de caractères après chaque itération de la boucle. À partir du deuxième compteur, vous pouvez calculer chacune de ces valeurs.
-- Comment les calculeriez-vous ? Réfléchissez-y :
-
-  - Le nombre de secondes dans une heure est de `3600`.
-  - Le nombre de minutes sera le nombre de secondes restantes lorsque toutes les heures auront été retirées, divisé par `60`.
-  - Le nombre de secondes sera le nombre de secondes restantes lorsque toutes les minutes auront été retirées.
-
-- Vous devrez inclure un zéro de tête sur vos valeurs d'affichage si le montant est inférieur à `10`, afin que cela ressemble davantage à une horloge/chronomètre traditionnel.
-- Pour mettre le chronomètre en pause, il faut effacer l'intervalle. Pour le réinitialiser, vous devrez remettre le compteur à `0`, effacer l'intervalle, puis mettre immédiatement à jour l'affichage.
-- Vous devriez probablement désactiver le bouton de démarrage après l'avoir pressé une fois, et le réactiver après l'avoir arrêté/réinitialisé. Sinon, les pressions multiples sur le bouton de démarrage appliqueront plusieurs `setInterval()` à l'horloge, ce qui entraînera un comportement erroné.
-
-> **Note :** Si vous êtes bloqué, vous pouvez [trouver notre version ici](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html)).
-
-## Choses à garder à l'esprit concernant setTimeout() et setInterval()
-
-Il y a quelques éléments à garder à l'esprit lorsque vous travaillez avec `setTimeout()` et `setInterval()`. Passons-les en revue maintenant.
-
-### Délais récursifs
-
-Il existe une autre façon d'utiliser `setTimeout()` : vous pouvez l'appeler de manière récursive pour exécuter le même code de manière répétée, au lieu d'utiliser `setInterval()`.
-
-L'exemple ci-dessous utilise un `setTimeout()` récursif pour exécuter la fonction passée toutes les `100` millisecondes :
-
-```js
-let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);
-```
-
-Comparez l'exemple ci-dessus à celui qui suit - celui-ci utilise `setInterval()` pour accomplir le même effet :
-
-```js
-let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++;
-}, 100);
-```
-
-#### Quelle est la différence entre le `setTimeout()` récursif et le `setInterval()` ?
-
-La différence entre les deux versions du code ci-dessus est subtile.
-
-- Le `setTimeout()` récursif garantit le délai indiqué entre les exécutions. L'attente de la prochaine exécution commencera uniquement après que le code ait fini de s'exécuter. Dans cet exemple, le code s'exécutera, puis attendra `100` millisecondes avant de s'exécuter à nouveau - l'intervalle sera donc le même, quelle que soit la durée d'exécution du code.
-- L'exemple utilisant `setInterval()` fait les choses un peu différemment. L'intervalle que vous avez choisi _inclut_ le temps d'exécution du code que vous voulez exécuter. Disons que le code prend `40` millisecondes pour s'exécuter - l'intervalle finit alors par être seulement de `60` millisecondes.
-- Lorsque vous utilisez `setTimeout()` de manière récursive, chaque itération peut calculer un délai différent avant d'exécuter l'itération suivante. En d'autres termes, la valeur du deuxième paramètre peut spécifier un temps différent en millisecondes à attendre avant d'exécuter à nouveau le code.
-
-Lorsque votre code a le potentiel de prendre plus de temps à s'exécuter que l'intervalle de temps que vous avez assigné, il est préférable d'utiliser le `setTimeout()` récursif - cela maintiendra l'intervalle de temps constant entre les exécutions, quelle que soit la durée d'exécution du code, et vous n'obtiendrez pas d'erreurs.
-
-### Délais immédiats
-
-En utilisant `0` comme valeur pour `setTimeout()`, on planifie l'exécution de la fonction de rappel spécifiée dès que possible, mais seulement après l'exécution du processus de code principal.
-
-Par exemple, le code ci-dessous ([voir en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html)) produit une alerte contenant `"Hello"`, puis une alerte contenant `"World"` dès que vous cliquez sur OK sur la première alerte.
-
-```js
-setTimeout(() => {
-  alert('World');
-}, 0);
-
-alert('Hello');
-```
-
-Cela peut être utile dans les cas où vous souhaitez définir un bloc de code à exécuter dès que l'ensemble du thread principal a terminé son exécution - placez-le dans la boucle d'événement asynchrone, de sorte qu'il s'exécutera immédiatement après.
-
-### Effacement avec clearTimeout() ou clearInterval()
-
-`clearTimeout()` et `clearInterval()` utilisent toutes deux la même liste d'entrées pour effacer. Il est intéressant de noter que cela signifie que vous pouvez utiliser l'une comme l'autre méthode pour effacer un `setTimeout()` ou `setInterval()`.
-
-Par souci de cohérence, vous devriez utiliser `clearTimeout()` pour effacer les entrées `setTimeout()` et `clearInterval()` pour effacer les entrées `setInterval()`. Cela permettra d'éviter toute confusion.
-
-## requestAnimationFrame()
-
-[`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) est une fonction de bouclage spécialisée, créée pour exécuter des animations de manière efficace dans le navigateur. Elle exécute un bloc de code spécifié avant que le navigateur ne repeigne ensuite l'affichage, ce qui permet d'exécuter une animation à une fréquence de rafraîchissement appropriée, quel que soit l'environnement dans lequel elle est exécutée.
-
-Elle a été créée en réponse aux problèmes perçus avec les fonctions asynchrones antérieures comme `setInterval()`, qui, par exemple, ne s'exécute pas à une fréquence d'images optimisée pour le matériel et continue à s'exécuter alors qu'elle pourrait s'arrêter lorsque l'onglet n'est plus actif ou si l'animation se déroule hors de la page, etc.
-
-([Plus d'informations à ce sujet sur CreativeJS](http://creativejs.com/resources/requestanimationframe/index.html) (en).)
-
-> **Note :** Vous trouverez des exemples d'utilisation de `requestAnimationFrame()` ailleurs dans le cours - voir par exemple [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics), et [La construction d'objet en pratique](/fr/docs/Learn/JavaScript/Objects/Object_building_practice).
-
-La méthode prend comme argument un rappel à invoquer avant le repeignage. C'est le modèle général dans lequel vous le verrez utilisé :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-L'idée est de définir une fonction dans laquelle votre animation est mise à jour (par exemple, vos sprites sont déplacés, le score est mis à jour, les données sont rafraîchies, ou autre). Ensuite, vous l'appelez pour lancer le processus. À la fin du bloc de fonctions, vous appelez `requestAnimationFrame()` avec la référence de la fonction passée en paramètre, et cela indique au navigateur de rappeler la fonction lors du prochain rafraîchissement de l'affichage. Ceci est ensuite exécuté en continu, car le code appelle `requestAnimationFrame()` de manière récursive.
-
-> **Note :** Si vous souhaitez réaliser une sorte d'animation DOM simple et constante, [les animations CSS](/fr/docs/Web/CSS/CSS_Animations) sont probablement plus rapides. Elles sont calculées directement par le code interne du navigateur, plutôt que par JavaScript.
->
-> Si, toutefois, vous faites quelque chose de plus complexe et impliquant des objets qui ne sont pas directement accessibles à l'intérieur du DOM (comme les objets [2D Canvas API](/fr/docs/Web/API/Canvas_API) ou [WebGL](/fr/docs/Web/API/WebGL_API)), `requestAnimationFrame()` est la meilleure option dans la plupart des cas.
-
-### Quelle est la vitesse de votre animation ?
-
-La fluidité de votre animation dépend directement de la fréquence d'images de votre animation, qui est mesurée en images par seconde (ips). Plus ce nombre est élevé, plus votre animation sera fluide, jusqu'à un certain point.
-
-Comme la plupart des écrans ont une fréquence de rafraîchissement de 60 Hz, la fréquence d'images la plus rapide que vous pouvez viser est de 60 images par seconde (IPS) lorsque vous travaillez avec des navigateurs Web. Cependant, plus d'images signifie plus de traitement, ce qui peut souvent provoquer des saccades et des sauts - également connus sous le nom de _dégradation des images_, ou _saccades_.
-
-Si vous disposez d'un moniteur avec une fréquence de rafraîchissement de 60 Hz et que vous souhaitez obtenir 60 IPS, vous disposez d'environ 16,7 millisecondes (`1000 / 60`) pour exécuter votre code d'animation et rendre chaque image. Ceci est un rappel que vous devrez être attentif à la quantité de code que vous essayez d'exécuter pendant chaque passage dans la boucle d'animation.
-
-`requestAnimationFrame()` essaie toujours de se rapprocher le plus possible de cette valeur magique de 60 IPS. Parfois, ce n'est pas possible - si vous avez une animation vraiment complexe et que vous l'exécutez sur un ordinateur lent, votre fréquence d'images sera inférieure. Dans tous les cas, `requestAnimationFrame()` fera toujours du mieux qu'il peut avec ce dont il dispose.
-
-### En quoi requestAnimationFrame() diffère-t-il de setInterval() et setTimeout() ?
-
-Parlons un peu plus de la façon dont la méthode `requestAnimationFrame()` diffère des autres méthodes utilisées précédemment. En regardant notre code d'en haut :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-Voyons maintenant comment faire la même chose en utilisant `setInterval()` :
-
-```js
-function draw() {
-   // Le code du dessin va ici
-}
-
-setInterval(draw, 17);
-```
-
-Comme nous l'avons couvert précédemment, vous ne spécifiez pas d'intervalle de temps pour `requestAnimationFrame()`. Il l'exécute simplement aussi vite et aussi bien que possible dans les conditions actuelles. Le navigateur ne perd pas non plus de temps à l'exécuter si l'animation est hors écran pour une raison quelconque, etc.
-
-`setInterval()`, d'autre part _exige_ qu'un intervalle soit spécifié. Nous sommes arrivés à notre valeur finale de 17 via la formule _1000 millisecondes / 60Hz_, puis nous l'avons arrondie. Arrondir vers le haut est une bonne idée ; si vous arrondissez vers le bas, le navigateur pourrait essayer d'exécuter l'animation à une vitesse supérieure à 60 FPS, et cela ne ferait de toute façon aucune différence pour la fluidité de l'animation. Comme nous l'avons déjà dit, 60 Hz est la fréquence de rafraîchissement standard.
-
-### Inclure un horodatage
-
-Le rappel réel passé à la fonction `requestAnimationFrame()` peut également recevoir un paramètre : une valeur _timestamp_, qui représente le temps depuis que le `requestAnimationFrame()` a commencé à s'exécuter.
-
-C'est utile car cela vous permet d'exécuter des choses à des moments précis et à un rythme constant, quelle que soit la vitesse ou la lenteur de votre appareil. Le modèle général que vous utiliserez ressemble à quelque chose comme ceci :
-
-```js
-let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Faire quelque chose en fonction du temps actuel
-
-   requestAnimationFrame(draw);
-}
-
-draw();
-```
-
-### Prise en charge des navigateurs
-
-`requestAnimationFrame()` est supporté par des navigateurs plus récents que pour `setInterval()`/`setTimeout()`. Il est intéressant de noter qu'elle est disponible dans Internet Explorer 10 et plus.
-
-Ainsi, à moins que vous ne deviez prendre en charge d'anciennes versions d'IE, il y a peu de raisons de ne pas utiliser `requestAnimationFrame()`.
-
-### Un exemple simple
-
-Assez avec la théorie ! Construisons votre propre exemple personnel de `requestAnimationFrame()`. Vous allez créer une simple "animation de toupie" - le genre que vous pourriez voir affiché dans une application lorsqu'elle est occupée à se connecter au serveur, etc.
-
-> **Note :** Dans un exemple du monde réel, vous devriez probablement utiliser des animations CSS pour exécuter ce type d'animation simple. Cependant, ce genre d'exemple est très utile pour démontrer l'utilisation de `requestAnimationFrame()`, et vous seriez plus susceptible d'utiliser ce genre de technique lorsque vous faites quelque chose de plus complexe comme la mise à jour de l'affichage d'un jeu à chaque image.
-
-1.  Prenez un modèle HTML de base ([comme celui-ci](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html)).
-2.  Placez un élément [`<div>`](/fr/docs/Web/HTML/Element/div) vide à l'intérieur de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body), puis ajoutez un caractère ↻ à l'intérieur. Ce caractère de flèche circulaire fera office de notre toupie pour cet exemple.
-3.  Appliquez le CSS suivant au modèle HTML (de la manière que vous préférez). Cela définit un fond rouge sur la page, définit la hauteur du `<body>` à `100%` de la hauteur de [`<html>`](/fr/docs/Web/HTML/Element/html), et centre le `<div>` à l'intérieur du `<body>`, horizontalement et verticalement.
-
-    ```css
-    html {
-      background-color: white;
-      height: 100%;
-    }
-
-    body {
-      height: inherit;
-      background-color: red;
-      margin: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    div {
-      display: inline-block;
-      font-size: 10rem;
-    }
-    ```
-
-4.  Insérez un élément [`<script>`](/fr/docs/Web/HTML/Element/script) juste au-dessus de la balise de fermeture `</body>`.
-5.  Insérez le JavaScript suivant dans votre élément `<script>`. Ici, vous stockez une référence à l'élément `<div>`.  l'intérieur d'une constante, définissez une variable `rotateCount` à `0`, définissez une variable non initialisée qui sera utilisée plus tard pour contenir une référence à l'appel `requestAnimationFrame()`, et en définissant une variable `startTime` à `null`, qui sera plus tard utilisée pour stocker l'heure de début de l'appel `requestAnimationFrame()`.
-
-    ```js
-    const spinner = document.querySelector('div');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    ```
-
-6.  Sous le code précédent, insérez une fonction `draw()` qui sera utilisée pour contenir notre code d'animation, qui inclut le paramètre `timestamp` :
-
-    ```js
-    function draw(timestamp) {
-
-    }
-    ```
-
-7.  À l'intérieur de `draw()`, ajoutez les lignes suivantes. Elles définiront l'heure de départ si elle n'est pas déjà définie (cela ne se produira que lors de la première itération de la boucle), et définiront le `rotateCount` à une valeur pour faire tourner le spinner par (l'horodatage actuel, prendre l'horodatage de départ, divisé par trois pour que cela n'aille pas trop vite) :
-
-    ```js
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-    ```
-
-8.  Sous la ligne précédente à l'intérieur de `draw()`, ajoutez le bloc suivant - il s'assure que la valeur de `rotateCount` est comprise entre `0` et `360` en utilisant le modulo à 360 (c'est-à-dire le reste restant lorsque la valeur est divisée par `360`) afin que l'animation du cercle puisse continuer sans interruption, à une valeur basse et raisonnable. Notez que ce n'est pas strictement nécessaire, mais il est plus facile de travailler avec des valeurs de 0-359 degrés que des valeurs comme `"128000 degrés"`.
-
-    ```js
-    rotateCount %= 360;
-    ```
-
-9.  Ensuite, sous le bloc précédent, ajoutez la ligne suivante pour faire tourner le spinner :
-
-    ```js
-    spinner.style.transform = `rotate(${rotateCount}deg)`;
-    ```
-
-10. Tout en bas, à l'intérieur de la fonction `draw()`, insérez la ligne suivante. C'est la clé de toute l'opération - vous définissez la variable définie précédemment à un appel actif `requestAnimation()`, qui prend la fonction `draw()` comme paramètre. Cela fait démarrer l'animation, en exécutant constamment la fonction `draw()` à un taux aussi proche que possible de 60 IPS.
-
-    ```js
-    rAF = requestAnimationFrame(draw);
-    ```
-
-11. Sous la définition de la fonction `draw()`, ajoutez un appel à la fonction `draw()` pour lancer l'animation.
-
-    ```js
-    draw();
-    ```
-
-> **Note :** Vous pouvez trouver l'[exemple terminé en direct sur GitHub](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html). (Vous pouvez également voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html)).
-
-### Effacer un appel de requestAnimationFrame()
-
-Effacer un appel de `requestAnimationFrame()` peut être fait en appelant la méthode `cancelAnimationFrame()` correspondante. (Notez que le nom de la fonction commence par "cancel", et non par "clear" comme pour les méthodes "set...").
-
-Il suffit de lui passer la valeur renvoyée par l'appel `requestAnimationFrame()` à annuler, que vous avez stockée dans la variable `rAF` :
-
-```js
-cancelAnimationFrame(rAF);
-```
-
-### Apprentissage actif : Démarrer et arrêter la toupie
-
-Dans cet exercice, nous aimerions que vous testiez la méthode `cancelAnimationFrame()` en prenant notre exemple précédent et en le mettant à jour, en ajoutant un écouteur d'événements pour démarrer et arrêter le spinner lorsque la souris est cliquée n'importe où sur la page.
-
-Quelques conseils :
-
-- Un écouteur d'événements `click` peut être ajouté à la plupart des éléments, y compris le document `<body>`. Il est plus logique de le placer sur l'élément `<body>` si vous voulez maximiser la zone cliquable - l'événement remonte jusqu'à ses éléments enfants.
-- Vous voudrez ajouter une variable de suivi pour vérifier si la toupie tourne ou non, effacer le cadre d'animation si c'est le cas, et le rappeler si ce n'est pas le cas.
-
-> **Note :** Essayez d'abord vous-même ; si vous êtes vraiment bloqué, consultez nos pages [exemple en direct](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html) et [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html).
-
-### Ralentissement d'une animation requestAnimationFrame()
-
-Une limitation de `requestAnimationFrame()` est que vous ne pouvez pas choisir votre fréquence d'images. Ce n'est pas un problème la plupart du temps, car en général, vous voulez que votre animation se déroule de la manière la plus fluide possible. Mais qu'en est-il lorsque vous souhaitez créer une animation old school, de style 8 bits ?
-
-C'était un problème, par exemple, dans l'animation de marche inspirée de Monkey Island de notre article [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) :
-
-{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}
-
-Dans cet exemple, vous devez animer à la fois la position du personnage à l'écran et le sprite affiché. Il n'y a que 6 images dans l'animation du sprite. Si vous montriez une image différente du sprite pour chaque image affichée à l'écran par `requestAnimationFrame()`, Guybrush bougerait ses membres trop vite et l'animation aurait l'air ridicule. Cet exemple étrangle la vitesse à laquelle le sprite cycle ses images en utilisant le code suivant :
-
-```js
-if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}
-```
-
-Ainsi, le code ne cycle le sprite qu'une fois toutes les 13 images d'animation.
-
-...En fait, c'est environ toutes les 6,5 images, car nous mettons à jour `posX` (position du personnage sur l'écran) par deux à chaque image :
-
-```js
-if (posX > width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}
-```
-
-C'est le code qui calcule comment mettre à jour la position dans chaque image d'animation.
-
-La méthode que vous utilisez pour accélérer votre animation dépendra de votre code particulier. Par exemple, dans l'exemple précédent de la toupie, vous pourriez faire en sorte qu'elle semble se déplacer plus lentement en n'augmentant le `rotateCount` que de un à chaque image, au lieu de deux.
-
-## Apprentissage actif : un jeu de réaction
-
-Pour la dernière section de cet article, vous allez créer un jeu de réaction à 2 joueurs. Le jeu aura deux joueurs, dont l'un contrôlera le jeu à l'aide de la touche <kbd>A</kbd>, et l'autre avec la touche <kbd>L</kbd>.
-
-Lorsque l'on appuie sur le bouton _Start_, une toupie comme celle que nous avons vue précédemment s'affiche pendant un temps aléatoire compris entre 5 et 10 secondes. Après ce temps, un message apparaîtra disant `"PLAYERS GO !!"` - une fois que cela se produit, le premier joueur à appuyer sur son bouton de contrôle gagnera la partie.
-
-{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}
-
-Travaillons ensemble :
-
-1.  Tout d'abord, téléchargez le [fichier de démarrage de l'application](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html). Celui-ci contient la structure HTML et le style CSS finis, ce qui nous donne un plateau de jeu qui affiche les informations des deux joueurs (comme vu ci-dessus), mais avec le spinner et le paragraphe des résultats affichés l'un au-dessus de l'autre. Il ne vous reste plus qu'à écrire le code JavaScript.
-2.  À l'intérieur de l'élément vide [`<script>`](/fr/docs/Web/HTML/Element/script) de votre page, commencez par ajouter les lignes de code suivantes qui définissent certaines constantes et variables dont vous aurez besoin dans le reste du code :
-
-    ```js
-    const spinner = document.querySelector('.spinner p');
-    const spinnerContainer = document.querySelector('.spinner');
-    let rotateCount = 0;
-    let startTime = null;
-    let rAF;
-    const btn = document.querySelector('button');
-    const result = document.querySelector('.result');
-    ```
-
-    Dans l'ordre, ce sont :
-
-    1.  Une référence à la toupie, afin que vous puissiez l'animer.
-    2.  Une référence à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui contient la toupie, utilisée pour l'afficher et la masquer.
-    3.  Un nombre de rotations. Ce paramètre détermine le nombre de rotations de la toupie que vous souhaitez afficher à chaque image de l'animation.
-    4.  Un temps de démarrage nul. Il sera rempli avec une heure de début lorsque la toupie commencera à tourner.
-    5.  Une variable non initialisée pour stocker ultérieurement l'appel [`requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame) qui anime la toupie.
-    6.  Une référence au bouton de démarrage.
-    7.  Une référence au paragraphe des résultats.
-
-3.  Ensuite, sous les lignes de code précédentes, ajoutez la fonction suivante. Elle prend deux nombres et retourne un nombre aléatoire entre les deux. Vous en aurez besoin pour générer un intervalle de temps aléatoire plus tard.
-
-    ```js
-    function random(min,max) {
-      var num = Math.floor(Math.random()*(max-min)) + min;
-      return num;
-    }
-    ```
-
-4.  Ajoutez ensuite la fonction `draw()`, qui anime la toupie. Cette version est très similaire à celle de l'exemple simple de la toupie, plus haut :
-
-    ```js
-    function draw(timestamp) {
-      if(!startTime) {
-       startTime = timestamp;
-      }
-
-      rotateCount = (timestamp - startTime) / 3;
-
-      rotateCount %= 360;
-
-      spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-      rAF = requestAnimationFrame(draw);
-    }
-    ```
-
-5.  Il est maintenant temps de mettre en place l'état initial de l'application lors du premier chargement de la page. Ajoutez les deux lignes suivantes, qui masquent le paragraphe des résultats et le conteneur de la toupie en utilisant `display : none;`.
-
-    ```js
-    result.style.display = 'none';
-    spinnerContainer.style.display = 'none';
-    ```
-
-6.  Ensuite, définissez une fonction `reset()`, qui remet l'application dans l'état initial nécessaire pour relancer le jeu après qu'il a été joué. Ajoutez ce qui suit au bas de votre code :
-
-    ```js
-    function reset() {
-      btn.style.display = 'block';
-      result.textContent = '';
-      result.style.display = 'none';
-    }
-    ```
-
-7.  Bon, assez de préparation ! Il est temps de rendre le jeu jouable ! Ajoutez le bloc suivant à votre code. La fonction `start()` appelle `draw()` pour commencer à faire tourner la toupie et l'afficher dans l'interface utilisateur, cache le bouton _Start_ pour que vous ne puissiez pas perturber le jeu en le démarrant plusieurs fois simultanément, et exécute un appel `setTimeout()` qui exécute une fonction `setEndgame()` après qu'un intervalle aléatoire entre 5 et 10 secondes se soit écoulé. Le bloc suivant ajoute également un écouteur d'événements à votre bouton pour exécuter la fonction `start()` lorsqu'il est cliqué.
-
-    ```js
-    btn.addEventListener('click', start);
-
-    function start() {
-      draw();
-      spinnerContainer.style.display = 'block';
-      btn.style.display = 'none';
-      setTimeout(setEndgame, random(5000,10000));
-    }
-    ```
-
-    > **Note :** Vous verrez que cet exemple appelle `setTimeout()` sans stocker la valeur de retour. (Donc, pas `let myTimeout = setTimeout(functionName, interval)`.)
-    >
-    > Cela fonctionne très bien, tant que vous n'avez pas besoin d'effacer votre intervalle/temps d'attente à un moment donné. Si vous le faites, vous devrez sauvegarder l'identifiant renvoyé !
-
-    Le résultat net du code précédent est que lorsque le bouton _Start_ est pressé, la toupie est affichée et les joueurs sont amenés à attendre un temps aléatoire avant d'être invités à appuyer sur leur bouton. Cette dernière partie est gérée par la fonction `setEndgame()`, que vous allez définir ensuite.
-
-8.  Ajoutez ensuite la fonction suivante à votre code :
-
-    ```js
-    function setEndgame() {
-      cancelAnimationFrame(rAF);
-      spinnerContainer.style.display = 'none';
-      result.style.display = 'block';
-      result.textContent = 'JOUEURS : ALLEZ-Y !!';
-
-      document.addEventListener('keydown', keyHandler);
-
-      function keyHandler(e) {
-        let isOver = false;
-        console.log(e.key);
-
-        if (e.key === "a") {
-          result.textContent = 'Le joueur 1 a gagné !!';
-          isOver = true;
-        } else if (e.key === "l") {
-          result.textContent = 'Le joueur 2 a gagné !!';
-          isOver = true;
-        }
-
-        if (isOver) {
-          document.removeEventListener('keydown', keyHandler);
-          setTimeout(reset, 5000);
-        }
-      };
-    }
-    ```
-
-    Son fonctionnement :
-
-    1.  Tout d'abord, annule l'animation de la toupie avec [`cancelAnimationFrame()`](/fr/docs/Web/API/Window/cancelAnimationFrame) (il est toujours bon de nettoyer les processus inutiles), et cache le conteneur de la toupie.
-    2.  Ensuite, affiche le paragraphe des résultats et définissez son contenu textuel sur "JOUEURS : ALLEZ-Y !!" pour signaler aux joueurs qu'ils peuvent maintenant appuyer sur leur bouton pour gagner.
-    3.  Attache un écouteur d'événements [`keydown`](/fr/docs/Web/API/Document/keydown_event) au document. Lorsqu'un bouton quelconque est enfoncé, la fonction `keyHandler()` est exécutée.
-    4.  À l'intérieur de `keyHandler()`, le code inclut l'objet événement en tant que paramètre (représenté par `e`) - sa propriété [`key`](/fr/docs/Web/API/KeyboardEvent/key) contient la touche qui vient d'être pressée, et vous pouvez l'utiliser pour répondre à des pressions de touche spécifiques par des actions spécifiques.
-    5.  Définit la variable `isOver` à false, afin que nous puissions suivre si les bonnes touches ont été pressées pour que le joueur 1 ou 2 gagne. Nous ne voulons pas que le jeu se termine lorsqu'une mauvaise touche a été pressée.
-    6.  Enregistre `e.key` dans la console, ce qui est un moyen utile de connaître la valeur `key` des différentes touches sur lesquelles vous appuyez.
-    7.  Lorsque `e.key` est "a", affiche un message pour dire que le joueur 1 a gagné, et lorsque `e.key` est "l", affiche un message pour dire que le joueur 2 a gagné. (**Note:** Cela ne fonctionnera qu'avec les minuscules a et l - si un A ou un L majuscule est soumis (la touche plus
-
-        <kbd>Shift</kbd>
-
-        ), il est compté comme une touche différente !). Si une de ces touches a été pressée, mettez `isOver` à `true`.
-
-    8.  Seulement si `isOver` est `true`, supprime l'écouteur d'événements `keydown` en utilisant [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener) de sorte qu'une fois que l'appui gagnant s'est produit, plus aucune entrée clavier n'est possible pour perturber le résultat final du jeu. Vous utilisez également `setTimeout()` pour appeler `reset()` après 5 secondes - comme expliqué précédemment, cette fonction réinitialise le jeu à son état initial afin qu'une nouvelle partie puisse être lancée.
-
-Voilà, c'est fait !
-
-> **Note :** Si vous êtes bloqué, consultez [notre version du jeu en live](https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html)).
-
-## Conclusion
-
-Voilà, tous les éléments essentiels des boucles et des intervalles asynchrones sont couverts dans un seul article. Vous trouverez ces méthodes utiles dans de nombreuses situations, mais veillez à ne pas en abuser ! Parce qu'ils s'exécutent toujours sur le processus principal, les rappels lourds et intensifs (en particulier ceux qui manipulent le DOM) peuvent vraiment ralentir une page si vous ne faites pas attention.
-
-{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}
-
-## Dans ce module
-
-- [Concepts généraux de programmation asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Concepts)
-- [Introduction au JavaScript asynchrone](/fr/docs/Learn/JavaScript/Asynchronous/Introducing)
-- [JavaScript asynchrone coopératif : Délais et intervalles](/fr/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
-- [Gérer les opérations asynchrones avec élégance grâce aux Promesses](/fr/docs/Learn/JavaScript/Asynchronous/Promises)
-- [Faciliter la programmation asynchrone avec async et await](/fr/docs/Learn/JavaScript/Asynchronous/Async_await)
-- [Choisir la bonne approche](/fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md b/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
deleted file mode 100644
index d904faab49..0000000000
--- a/files/fr/web/api/performance/onresourcetimingbufferfull/index.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-tags:
-  - API
-  - Method
-  - Méthode
-  - Reference
-  - Performance web
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-{{APIRef("Resource Timing API")}}
-
-La propriété **`onresourcetimingbufferfull`** est un gestionnaire d'événements qui sera appelé lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.
-
-{{AvailableInWorkers}}
-
-## Syntaxe
-
-```js
-  callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-```
-
-### Valeur de retour
-
-- `callback`
-  - : Un {{event("Event_handlers", "event handler")}} qui est invoqué lorsque l'événement [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event) est déclenché.
-
-## Exemple
-
-L'exemple suivant définit une fonction de rappel sur la propriété `onresourcetimingbufferfull`.
-
-```js
-function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Définit un rappel si le tampon de ressources est rempli.
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-```
-
-## Spécifications
-
-| Spécification                                                                                                                                                | Statut                               | Commentaire          |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- |
-| {{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull',
-        'onresourcetimingbufferfull')}} | {{Spec2('Resource Timing')}} | Définition initiale. |
-
-## Compatibilité des navigateurs
-
-{{Compat("api.Performance.onresourcetimingbufferfull")}}
-
-## Voir aussi
-
-- Événément [`resourcetimingbufferfull`](/fr/docs/Web/API/Performance/resourcetimingbufferfull_event)
-- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
-- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 82f79f7a60..3adaee9525 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -2693,6 +2693,7 @@
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form	/ja/docs/Learn/Forms/Your_first_form
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form/Example	/ja/docs/Learn/Forms/Your_first_form/Example
 /ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型	/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+/ja/docs/Learn/JavaScript/Asynchronous/Concepts	/ja/docs/Learn/JavaScript/Asynchronous/Introducing
 /ja/docs/Learn/JavaScript/Objects/Inheritance	/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ja/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ja/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ja/docs/Learn/JavaScript/Objects/継承	/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
@@ -3239,6 +3240,7 @@
 /ja/docs/Web/API/Node/prefix	/ja/docs/Web/API/Element/prefix
 /ja/docs/Web/API/NodeList.item	/ja/docs/Web/API/NodeList/item
 /ja/docs/Web/API/NonDocumentTypeChildNode	/ja/docs/Web/API/Element
+/ja/docs/Web/API/Performance/onresourcetimingbufferfull	/ja/docs/conflicting/Web/API/Performance/resourcetimingbufferfull_event
 /ja/docs/Web/API/Position	/ja/docs/Web/API/GeolocationPosition
 /ja/docs/Web/API/PositionError	/ja/docs/Web/API/GeolocationPositionError
 /ja/docs/Web/API/PositionOptions	/ja/docs/conflicting/Web/API/Geolocation/getCurrentPosition
@@ -3338,6 +3340,7 @@
 /ja/docs/Web/API/Window/escape	/ja/docs/Web/JavaScript/Reference/Global_Objects/escape
 /ja/docs/Web/API/Window/getAttention	/ja/docs/orphaned/Web/API/Window/getAttention
 /ja/docs/Web/API/Window/onafterprint	/ja/docs/Web/API/WindowEventHandlers/onafterprint
+/ja/docs/Web/API/Window/onappinstalled	/ja/docs/conflicting/Web/API/Window/appinstalled_event
 /ja/docs/Web/API/Window/onblur	/ja/docs/Web/API/GlobalEventHandlers/onblur
 /ja/docs/Web/API/Window/onchange	/ja/docs/Web/API/GlobalEventHandlers/onchange
 /ja/docs/Web/API/Window/onclick	/ja/docs/Web/API/GlobalEventHandlers/onclick
@@ -3345,7 +3348,7 @@
 /ja/docs/Web/API/Window/onfocus	/ja/docs/Web/API/GlobalEventHandlers/onfocus
 /ja/docs/Web/API/Window/ongamepadconnected	/ja/docs/conflicting/Web/API/Window/gamepadconnected_event
 /ja/docs/Web/API/Window/ongamepaddisconnected	/ja/docs/conflicting/Web/API/Window/gamepaddisconnected_event
-/ja/docs/Web/API/Window/oninstall	/ja/docs/Web/API/Window/onappinstalled
+/ja/docs/Web/API/Window/oninstall	/ja/docs/conflicting/Web/API/Window/appinstalled_event
 /ja/docs/Web/API/Window/onkeydown	/ja/docs/Web/API/GlobalEventHandlers/onkeydown
 /ja/docs/Web/API/Window/onkeyup	/ja/docs/Web/API/GlobalEventHandlers/onkeyup
 /ja/docs/Web/API/Window/onmousedown	/ja/docs/Web/API/GlobalEventHandlers/onmousedown
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index acf6f16c9e..d17ceed58b 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -5165,7 +5165,7 @@
       "y-kazunori"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Concepts": {
+  "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-04T08:53:53.277Z",
     "contributors": [
       "Uemmra3",
@@ -19794,12 +19794,6 @@
       "takamin"
     ]
   },
-  "Web/API/Performance/onresourcetimingbufferfull": {
-    "modified": "2020-10-15T22:19:53.003Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
   "Web/API/Performance/resourcetimingbufferfull_event": {
     "modified": "2020-10-15T22:19:38.048Z",
     "contributors": [
@@ -24428,13 +24422,6 @@
       "Potappo"
     ]
   },
-  "Web/API/Window/onappinstalled": {
-    "modified": "2020-10-15T21:49:27.262Z",
-    "contributors": [
-      "Marsf",
-      "YuichiNukiyama"
-    ]
-  },
   "Web/API/Window/ondevicemotion": {
     "modified": "2020-10-15T22:28:07.002Z",
     "contributors": [
@@ -48425,6 +48412,12 @@
       "Koyamak"
     ]
   },
+  "conflicting/Web/API/Performance/resourcetimingbufferfull_event": {
+    "modified": "2020-10-15T22:19:53.003Z",
+    "contributors": [
+      "silverskyvicto"
+    ]
+  },
   "conflicting/Web/API/Pointer_events": {
     "modified": "2019-03-18T20:45:32.564Z",
     "contributors": [
@@ -48504,6 +48497,13 @@
       "mfuji09"
     ]
   },
+  "conflicting/Web/API/Window/appinstalled_event": {
+    "modified": "2020-10-15T21:49:27.262Z",
+    "contributors": [
+      "Marsf",
+      "YuichiNukiyama"
+    ]
+  },
   "conflicting/Web/API/Window/gamepadconnected_event": {
     "modified": "2020-10-15T22:12:53.034Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md b/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
new file mode 100644
index 0000000000..d025f57362
--- /dev/null
+++ b/files/ja/conflicting/web/api/performance/resourcetimingbufferfull_event/index.md
@@ -0,0 +1,59 @@
+---
+title: Performance.onresourcetimingbufferfull
+slug: conflicting/Web/API/Performance/resourcetimingbufferfull_event
+tags:
+  - API
+  - プロパティ
+  - リファレンス
+  - ウェブパフォーマンス
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+browser-compat: api.Performance.onresourcetimingbufferfull
+---
+{{APIRef("Resource Timing API")}}
+
+**`onresourcetimingbufferfull`** プロパティは、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるイベントハンドラーです。このイベントは、ブラウザーのリソースタイミングパフォーマンスバッファーがいっぱいになったときに発生します。
+
+{{AvailableInWorkers}}
+
+## 構文
+
+```js
+callback = performance.onresourcetimingbufferfull = buffer_full_cb;
+```
+
+### 返値
+
+- callback
+  - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるものです。
+</dl>
+
+## 例
+
+次の例では、 `onresourcetimingbufferfull` プロパティにコールバック関数を設定します。
+
+```js
+function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // リソースバッファーが一杯になったときのコールバックを設定
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+<body onload="init()">
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベント
+- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
+- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/conflicting/web/api/window/appinstalled_event/index.html b/files/ja/conflicting/web/api/window/appinstalled_event/index.html
new file mode 100644
index 0000000000..4f31793823
--- /dev/null
+++ b/files/ja/conflicting/web/api/window/appinstalled_event/index.html
@@ -0,0 +1,58 @@
+---
+title: Window.onappinstalled
+slug: conflicting/Web/API/Window/appinstalled_event
+tags:
+  - API
+  - Event Handler
+  - Property
+  - Reference
+  - Window
+  - web manifest
+translation_of: Web/API/Window/onappinstalled
+original_slug: Web/API/Window/onappinstalled
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">window.onappinstalled = function(ev) {
+  console.log('アプリケーションがインストールされました。');
+};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+
+
+<p>{{Compat("api.Window.onappinstalled")}}</p>
+
+<h2 id="See_also" name="See_also">関連項目</h2>
+
+<ul>
+ <li>{{ event("install") }}</li>
+</ul>
diff --git a/files/ja/learn/javascript/asynchronous/concepts/index.html b/files/ja/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index b2baeaac4e..0000000000
--- a/files/ja/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: 非同期プログラミングの一般的概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">前提条件:</th>
-   <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td>
-  </tr>
-  <tr>
-   <th scope="row">目的:</th>
-   <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2>
-
-<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p>
-
-<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p>
-
-<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2>
-
-<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p>
-
-<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p>
-
-<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！　しかしながら、基本的な考え方の理解には役立ちます。</p>
-</div>
-
-<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p>
-
-<ul>
- <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li>
- <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p>
-
-<div class="blockIndicator note">
-<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p>
-</div>
-
-<p>何故こうなるのでしょうか？　その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p>
-
-<h2 id="Threads" name="Threads">スレッド</h2>
-
-<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p>
-
-<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3>
-
-<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p>
-
-<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2>
-
-<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p>
-
-<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p>
-
-<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p>
-
-<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？　読み進めましょう！</p>
-
-<h2 id="Conclusion" name="Conclusion">結論</h2>
-
-<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p>
-
-<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
-
-<ul>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ja/learn/javascript/asynchronous/introducing/index.html b/files/ja/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..439c09bd13
--- /dev/null
+++ b/files/ja/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: 非同期プログラミングの一般的概念
+slug: Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>この記事では、非同期プログラミングに関するいくつかの重要な概念と、その概念がウェブブラウザーと JavaScript でどのように見えるのかをひと通り説明していきます。このモジュールの他の記事に取り組む前に、これらの概念を理解しておく必要があります。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">前提条件:</th>
+   <td>基本的なコンピューターリテラシーがあり、ある程度 JavaScript の基礎を理解していること</td>
+  </tr>
+  <tr>
+   <th scope="row">目的:</th>
+   <td>非同期プログラミングの基本概念と、その概念がウェブブラウザーと JavaScript でどのように表現されるかを理解すること</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous" name="Asynchronous">非同期とは？</h2>
+
+<p>通常は、あるプログラムのコードは書かれた順に、一度にひとつのことだけが起こるように実行されます。もしある関数が別の関数の結果に依存するのであれば、その関数は他の関数の処理が完了して結果を返すまで待たなくてはならず、それまでは、ユーザー視点からはプログラム全体は止まっているのと本質的には同じです。</p>
+
+<p>例えば、Mac ユーザーは回転する虹色のカーソル（よく「ビーチボール」と呼ばれます）としてこのことを経験することもあるでしょう。このカーソルによってオペレーティングシステムは「現在使用中のプログラムは何かが終わるのを待って停止しており、それが非常に長く掛かっているので何が起こっているのかとご心配をお掛けしているのではないでしょうか」と言っているのです。</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>これはいら立つような体験であり、コンピューターの処理能力の良い使い方ではありません――特に、マルチコアプロセッサーが利用できる時代においては。他のタスクを別のプロセッサーコアに処理させて、それが終わった時に知らせることができるのに、座って待っているのは意味がありません。このように合間に別の仕事を終わらせる、ということが<strong>非同期プログラミング</strong>の基本です。非同期にタスクを実行する API は、あなたが使用するプログラミング環境（ウェブ開発であればウェブブラウザー）によって提供されます。</p>
+
+<h2 id="Blocking_code" name="Blocking_code">ブロッキングコード</h2>
+
+<p>非同期のテクニックは、特にウェブプログラミングにおいて非常に有用です。ウェブアプリがブラウザー上で高負荷なコードを実行すると、ブラウザーは固まって見えるかもしれません。これを<strong>ブロッキング</strong>といいます。ウェブアプリがプロセッサーの制御を返すまで、ブラウザーはユーザーからの入力を処理して他のタスクを実行し続けるのを妨げられているのです。</p>
+
+<p>ブロッキングが意味するところを示す例をいくつか見てみましょう。</p>
+
+<p>この <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> の例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">デモ参照</a>）では、ボタンをクリックすると時間の掛かる処理（日時を 1000 万回計算し、最後に計算された日時をコンソールに出力）を実行し、DOM に段落を 1 つ追加します。</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>この例を実行する際は、JavaScript コンソールを開き、その後にボタンをクリックしてください ― 日時の計算が終わり、コンソールにメッセージが出力されるまで段落が現れないことに気が付くでしょう。コードは順番に実行され、前の処理が終わるまで後の処理は実行されません。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: 先ほどの例はまったく非現実的です。現実のウェブアプリでは日時を 1000 万回計算することはないでしょう！　しかしながら、基本的な考え方の理解には役立ちます。</p>
+</div>
+
+<p>2 つ目の例の <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> では（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">デモ参照</a>）、実際のページでも遭遇しうる、もう少し現実的な例をシミュレーションします。ユーザーインターフェイスのレンダリングによってユーザーの操作がブロックされるのです。この例では、ボタンは 2 つあります。</p>
+
+<ul>
+ <li>"Fill canvas" ボタンは、クリックすると使用可能な {{htmlelement("canvas")}} を 100 万個の青い円でいっぱいにします。</li>
+ <li>"Click me for alert" ボタンは、クリックするとアラートメッセージを表示します。</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>もし1つ目のボタンを押し、その後素早く2つ目のボタンを押すと、円の描画が終わるまでアラートが表示されないことが分かるでしょう。1つ目の処理が完了するまで 2つ目の処理がブロックされています。</p>
+
+<div class="blockIndicator note">
+<p><strong>注</strong>: ええ、この事例は見苦しく、ブロッキングの影響を真似ているものです。しかし、これは現実のアプリケーション開発者が軽減させようと常に戦っている、ありふれた問題です。</p>
+</div>
+
+<p>何故こうなるのでしょうか？　その答えは、一般的に言えば JavaScript は<strong>シングルスレッド</strong>だからです。ここで、<strong>スレッド</strong>の概念を紹介する必要があります。</p>
+
+<h2 id="Threads" name="Threads">スレッド</h2>
+
+<p><strong>スレッド</strong>とは、基本的にプログラムがタスクを完了させるのに使用できる、単一のプロセスです。各スレッドは 1 度に 1 つのタスクを実行することしかできません。</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>各タスクは順次実行されます。すなわち、あるタスクが完了しなければ、その次のタスクは開始されません。</p>
+
+<p>先述のように、現在では多くのコンピューターは複数のコアを持つため、一度に複数のことをすることができます。マルチスレッドをサポートするプログラミング言語は、複数のコアを使用して同時に複数のタスクを完了させることができます。</p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_is_single-threaded" name="JavaScript_is_single-threaded">JavaScript はシングルスレッド</h3>
+
+<p>従来より JavaScript はシングルスレッドです。複数のコアを利用しても、<strong>メインスレッド</strong>と呼ばれる単一のスレッド上でタスクを実行できるだけでしょう。これまでの例は、次のように実行されます。</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>少し経ってから、JavaScript はこういった問題に役立つ、いくつかのツールを手に入れました。<a href="/ja/docs/Web/API/Web_Workers_API">Web workers</a> によって worker と呼ばれる別個のスレッドに JavaScript の処理の一部を移すことが可能となり、そのことで複数の JavaScript のコードを同時に実行することができるようになります。一般的に worker は、ユーザーの操作がブロックされないように、高コストな処理をメインスレッドとは別のところで実行するために使用されます。</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>このことを念頭に置いて、再び <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">デモ参照</a>）をブラウザーの JavaScript コンソールを開いた状態で見てみましょう。こちらは先ほどの 1000 万回の日時計算を行う例を別の worker スレッド上で行うよう書き換えたものです。今回はボタンをクリックすると、ブラウザーは日時の計算が完了する前に段落を表示することができます。1 つ目の処理は、もう 2 つ目の処理をブロックしていません。</p>
+
+<h2 id="Asynchronous_code" name="Asynchronous_code">非同期なコード</h2>
+
+<p>Web worker はかなり便利ですが、制限もあります。主要なものとして、Web worker は {{Glossary("DOM")}} にアクセスできません —— Worker に直接ユーザーインターフェイスを更新させるようなことはできません。100 万個の青い円を worker 内部で描画させることはできないのです。基本的にはただ計算ができる、ということです。</p>
+
+<p>2 つ目の問題は、worker によって実行されるコードはブロックしないとは言え、根本的には依然として同期的であるということです。このことは、ある関数が先行する複数の関数の結果に頼っている場合に問題となります。次のスレッドの図について考えてみましょう。</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>このような場合、例えばタスク A は画像をサーバーから取得するような処理を、タスク B が次にその画像に対してフィルターを適用するような処理をしていると考えてみましょう。もしタスク A を実行し、その直後にタスク B を実行したとすれば、まだ画像が取得できていないためにエラーが発生するでしょう。</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>このような場合、例えばタスク D はタスク B と タスク C の両方の結果を利用していると考えてみましょう。もし両方の結果が同時に利用可能になることを保証できるのであれば、これで問題ないでしょうが、そのようなことはまれです。もしタスク D の入力のうち 1 つがまだ利用可能となっていない時にタスク D を実行しようとすれば、エラーが投げられるでしょう。</p>
+
+<p>このような問題を解決するために、ブラウザーを利用して特定の処理を非同期に実行することができます。<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> のような機能を利用することで、ある処理（例：サーバーからの画像の取得）を実行し、その結果が返ってくるまで別の処理の実行を待たせることができるのです。</p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>この Promise の処理はどこか別の場所で行われるため、非同期処理が実行されている間にメインスレッドがブロックされることはありません。</p>
+
+<p>次の記事では、どうすれば非同期処理を書けるのかを見ていきましょう。わくわくしますよね？　読み進めましょう！</p>
+
+<h2 id="Conclusion" name="Conclusion">結論</h2>
+
+<p>現代のソフトウェアデザインは、一度に複数のことをプログラムに実行させるために、ますます非同期処理を中心とした議論が行われています。より新しく、より強力な API を利用すればするほど、非同期処理が唯一の解決先であるような事例が見つかっていくでしょう。かつては非同期なコードを書くのは困難なことでした。慣れるにはまだ時間が掛かりますが、以前よりだいぶ楽になりました。このモジュールの残りの部分では、なぜ非同期なコードが重要なのか、そして上で説明した問題を回避するコードをどのようにして設計すればよいのかを掘り下げていきます。</p>
+
+<h2 id="In_this_module" name="In_this_module">このモジュール内</h2>
+
+<ul>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Concepts">非同期プログラミングの一般的概念</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/ja/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md b/files/ja/web/api/performance/onresourcetimingbufferfull/index.md
deleted file mode 100644
index 7c13934198..0000000000
--- a/files/ja/web/api/performance/onresourcetimingbufferfull/index.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-tags:
-  - API
-  - プロパティ
-  - リファレンス
-  - ウェブパフォーマンス
-browser-compat: api.Performance.onresourcetimingbufferfull
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-{{APIRef("Resource Timing API")}}
-
-**`onresourcetimingbufferfull`** プロパティは、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるイベントハンドラーです。このイベントは、ブラウザーのリソースタイミングパフォーマンスバッファーがいっぱいになったときに発生します。
-
-{{AvailableInWorkers}}
-
-## 構文
-
-```js
-callback = performance.onresourcetimingbufferfull = buffer_full_cb;
-```
-
-### 返値
-
-- callback
-  - : [イベントハンドラー](/ja/docs/Web/Events/Event_handlers)で、 {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベントが発生したときに呼び出されるものです。
-</dl>
-
-## 例
-
-次の例では、 `onresourcetimingbufferfull` プロパティにコールバック関数を設定します。
-
-```js
-function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // リソースバッファーが一杯になったときのコールバックを設定
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-<body onload="init()">
-```
-
-## 仕様書
-
-{{Specifications}}
-
-## ブラウザーの互換性
-
-{{Compat}}
-
-## 関連情報
-
-- {{domxref("Performance/resourcetimingbufferfull_event", "resourcetimingbufferfull")}} イベント
-- {{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}
-- {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}
diff --git a/files/ja/web/api/window/onappinstalled/index.html b/files/ja/web/api/window/onappinstalled/index.html
deleted file mode 100644
index f59a7a86fb..0000000000
--- a/files/ja/web/api/window/onappinstalled/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Window.onappinstalled
-slug: Web/API/Window/onappinstalled
-tags:
-  - API
-  - Event Handler
-  - Property
-  - Reference
-  - Window
-  - web manifest
-translation_of: Web/API/Window/onappinstalled
-original_slug: Web/API/Window/oninstall
----
-<div>{{APIRef}}</div>
-
-<p>{{domxref("Window")}} オブジェクトの <code><strong>onappinstalled</strong></code> プロパティは、<code><a href="/ja/docs/Web/API/Window/appinstalled_event">appinstalled</a></code> イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが <a href="/ja/Apps/Progressive">プログレッシブウェブアプリ (PWA)</a> としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js">window.onappinstalled = function(ev) {
-  console.log('アプリケーションがインストールされました。');
-};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-
-
-<p>{{Compat("api.Window.onappinstalled")}}</p>
-
-<h2 id="See_also" name="See_also">関連項目</h2>
-
-<ul>
- <li>{{ event("install") }}</li>
-</ul>
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index dec0d5b016..f8ecb5e8f5 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -313,6 +313,9 @@
 /ko/docs/Learn/HTML/Forms/Your_first_HTML_form	/ko/docs/Learn/Forms/Your_first_form
 /ko/docs/Learn/HTML/Howto/데이터_속성_사용하기	/ko/docs/Learn/HTML/Howto/Use_data_attributes
 /ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content	/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+/ko/docs/Learn/JavaScript/Asynchronous/Async_await	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/ko/docs/Learn/JavaScript/Asynchronous/Concepts	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/ko/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/ko/docs/conflicting/Learn/JavaScript/Asynchronous
 /ko/docs/Learn/JavaScript/Building_blocks/조건문	/ko/docs/Learn/JavaScript/Building_blocks/conditionals
 /ko/docs/Learn/JavaScript/Objects/Inheritance	/ko/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ko/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ko/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index b4a8b6a3ff..ecc1af296f 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -1888,22 +1888,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-11-28T09:53:12.946Z",
-    "contributors": [
-      "HerbertLim",
-      "chupark"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-11-17T21:41:39.368Z",
-    "contributors": [
-      "mochapoke",
-      "Plut0",
-      "chupark",
-      "eunjungleecub"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-11-17T21:53:14.519Z",
     "contributors": [
@@ -1918,12 +1902,6 @@
       "chupark"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-07-16T22:33:21.049Z",
-    "contributors": [
-      "cjkcc69"
-    ]
-  },
   "Learn/JavaScript/Building_blocks": {
     "modified": "2020-07-16T22:31:09.649Z",
     "contributors": [
@@ -17457,6 +17435,28 @@
       "Kaben"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-07-16T22:33:21.049Z",
+    "contributors": [
+      "cjkcc69"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-11-17T21:41:39.368Z",
+    "contributors": [
+      "mochapoke",
+      "Plut0",
+      "chupark",
+      "eunjungleecub"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-11-28T09:53:12.946Z",
+    "contributors": [
+      "HerbertLim",
+      "chupark"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2019-03-23T23:29:46.029Z",
     "contributors": [
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/index.html b/files/ko/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..19f9ffd02d
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,599 @@
+---
+title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>오랜 시간 동안 웹플랫폼은 자바스크립트 프로그래머가 일정한 시간이 흐른 뒤에 비동기적 코드를 실행할 수 있게하는 다양한 함수들을 제공해 왔다. 그리고 프로그래머가 중지시킬 때까지 코드 블록을 반복적으로 실행하기 위한 다음과 같은 함수들이 있다.</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.</dd>
+ <dt></dt>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.</dd>
+</dl>
+
+<p>이 함수들에 의해 설정된 비동기 코드는 메인 스레드에서 작동한다. 그러나 프로세서가 이러한 작업을 얼마나 많이 수행하는지에 따라, 코드가 반복되는 중간에 다른 코드를 어느 정도 효율적으로 실행할 수 있다. 어쨌든 이러한 함수들은 웹사이트나 응용 프로그램에서 일정한 애니메이션 및 기타 배경 처리를 실행하는 데 사용된다. 다음 섹션에서는 그것들을 어떻게 사용할 수 있는지 보여줄 것이다.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>앞에서 언급했듯이 setTimeout ()은 지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행한다. 그리고 다음과 같은 파라미터가 필요하다.:</p>
+
+<ul>
+ <li>실행할 함수 또는 다른 곳에 정의 된 함수 참조.</li>
+ <li>코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다. 왜 이 파라미터를 수행해야 하는지도 좀 더살펴 볼 것이다. </li>
+ <li>함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 타임아웃 콜백은 단독으로 실행되지 않기 때문에 지정된 시간이 지난 그 시점에 정확히  콜백 될 것이라는 보장은 없다. 그보다는 최소한 그 정도의 시간이 지난 후에 호출된다. 메인 스레드가 실행해야 할 핸들러를 찾기 위해 이런 핸들러들을 살펴보는 시점에 도달할 때까지 타임아웃 핸들러를 실행할 수 없다.</p>
+</div>
+
+<p>아래 예제에서 브라우저는 2초가 지나면 익명의 함수를 실행하고 경보 메시지를 띄울 것이다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>지정한 함수가 꼭 익명일 필요는 없다. 함수에 이름을 부여 할 수 있고, 다른 곳에서 함수를 정의하고 setTimeout ()에 참조(reference)를 전달할 수도 있다. 아래 코드는 위의 코드와 같은 실행 결과를 얻을 수 있다. </p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>예를 들자면 timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다. 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다. 특히 timeout 콜백의 코드라인이 여러 줄이라면 더욱 그렇다.  </p>
+
+<p>setTimeout ()은 나중에 타임아웃을 할 경우에 타임아웃을 참조하는데 사용하는 식별자 값을 리턴한다.  그 방법을 알아 보려면 아래{{anch("Clearing timeouts")}}을 참조하세요.</p>
+
+<h3 id="setTimeout_함수에_매개변수parameter_전달">setTimeout () 함수에 매개변수(parameter) 전달</h3>
+
+<p>setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다. 아래 예제처럼, 이전 함수를 리팩터링하여 전달된 매개변수의 사람 이름이 추가된 문장을 표시할 수 있다.</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>Say hello의 대상이 되는 사람이름은 <code>setTimeout()의 세번째 매개변수로 함수에 전달된다.</code></p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="timeout_취소">timeout 취소</h3>
+
+<p>마지막으로 타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>을 호출하여 타임아웃을 취소할 수 있다.  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>은  <code>setTimeout()</code>콜의 식별자를 매개변수로  <code>setTimeout()</code>에 전달한다. 위 예제의 타임아웃을 취소하려면 아래와 같이 하면 된다.</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 인사를 할 사람의 이름을 설정하고 별도의 버튼을 사용하여 인사말을 취소 할 수있는 약간 더 복잡한 폼양식 예제인  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 을 참조하세요.</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p>setTimeout ()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우 어떨까요?</p>
+
+<p>이럴 경우에 setInterval ()이 필요합니다. setInterval ()은 setTimeout ()과 매우 유사한 방식으로 작동합니다. 다만 setTimeout ()처럼 첫 번째 매개 변수(함수)가 타임아웃 후에 한번 실행되는게 아니라 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행되는 것이 차이점입니다.  setInterval() 호출의 후속 파라미터로 실행 중인 함수에 필요한 파라미터를 전달할 수도 있다.</p>
+
+<p>예를 들어 봅시다. 다음 함수는 새 Date() 객체를 생성한 후에 ToLocaleTimeString()을 사용하여 시간데이터를 문자열로 추출한 다음 UI에 표시합니다. 그리고 setInterval()을 사용하여 초당 한 번 함수(displayTime)를 실행하면 초당 한 번 업데이트되는 디지털 시계와 같은 효과를 만들어냅니다.(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>): </p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>setTimeout()과 같이 setInterval()도 식별자 값을 리턴하여 나중에 interval을 취소해야 할 때 사용한다.</p>
+
+<h3 id="interval_취소">interval 취소</h3>
+
+<p>setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 이 상태를 중지하는 방법이 필요합니다. 그렇지 않으면 브라우저가 추가 작업을 완료 할 수 없거나, 현재 처리 중인 애니메이션이 완료되었을 때 오류가 발생할 수 있습니다. setTimeout()과 같은 방식으로 setInterval () 호출에 의해 반환 된 식별자를 clearInterval () 함수에 전달하여 이 작업을 취소할수 있습니다.</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="능동학습_자신만의_스톱워치를_만들기.">능동학습 : 자신만의 스톱워치를 만들기.</h4>
+
+<p>위에서 모두 설명해 드렸으니, 과제를 드리겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> 예제를 수정하여 자신만의 간단한 스톱워치를 만들어 보세요.</p>
+
+<p>위에서 설명(디지털 시계)한 것처럼 시간을 표시해야 하고, 이 예제에서는 아래 기능을 추가하세요.</p>
+
+<ul>
+ <li>스톱워치를 실행시키는 "Start" 버튼. </li>
+ <li>일시정지나 종료시키는 "Stop" 버튼.</li>
+ <li>시간을 0으로 설정하는 "Reset" 버튼.</li>
+ <li>실제 시간을 표시하지 말고 경과된 시간을 초단위로 표시..</li>
+</ul>
+
+<p>몇가지 힌트를 드립니다.</p>
+
+<ul>
+ <li>버튼 마크업은 여러분이 원하는 대로 구성하고 스타일링 하세요. 자바스크립트 버튼 레퍼런스를 가져올 수 있는 후크를 포함한 semantic HTML을 사용하세요.</li>
+ <li> 0에서 시작하여 상수 루프를 이용하여 1 초 단위로 증가하는 변수를 작성해 보세요.</li>
+ <li>앞서 설명한 Date () 객체를 사용하지 않고 이 예제를 작성하는 것이 더 쉽지만 정확도는 떨어집니다. 정확히 1000ms 후에 콜백이 시작된다고 보장 할 수는 없기 때문입니다. 보다 정확한 방법은 startTime = Date.now ()를 실행하여 사용자가 시작 버튼을 클릭했을 때 정확한 timestamp을 얻은 다음 Date.now ()-startTime을 실행하여 시간(milliseconds)을 얻어 냅니다.</li>
+ <li>시, 분, 초 단위의 시간을 별도의 변수를 통해 계산한 다음 각 루프 반복 후에 문자열로 함께 표시해 보세요. 두 번째 카운터에서 하나씩 해결할 수 있습니다.</li>
+ <li>어떻게 계산할 것인지 생각해 봅시다.
+  <ul>
+   <li>1시간은 3600초 입니다.</li>
+   <li>분단위 시간은 시간을 60으로 나눈 값에서 시간단위를 제거한 값입니다. 그리고 초단위 시간은 그 값에서 분단위 시간을 제거한 값입니다(예 :3700초를 60초로 나누면 3600초(시단위) + 100초(분단위), 분단위를 다시 60으로 나누면 60초(분단위) + 40초(초단위))</li>
+  </ul>
+ </li>
+ <li>시간값이 10밀리세컨드이하면 화면의 시간을 0으로 표시하세요. 더 일반적인 시계처럼 보일 겁니다.</li>
+ <li>스톱워치를 정지시키기 위해 interval을 취소해 보세요. 스톱워치를 리셋하기 위해 시간 카운터를 0으로 설정하고, interval을 취소한 후에 화면을 즉시 업데이트 하세요.</li>
+ <li>스타트 버튼이 클릭되면 버튼을 즉시 비활성화 시키고 스톱/리셋버튼이 클릭되면 다시 활성화해 보세요. 그렇지 않고 스타트 버튼이 여러번 클릭되면 setInterval()이 중복 실행되어서 실행 오류가 발생할 수 있습니다.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="setTimeout과_setInterval에서_주의해야할_것_들">setTimeout()과 setInterval()에서 주의해야할 것 들</h2>
+
+<p>setTimeout()과 setInterval()에는 몇가지 주의해야 할 것들이 있습니다. 어떤 것인지 한번 살펴보겠습니다.</p>
+
+<h3 id="순환_timeouts">순환 timeouts</h3>
+
+<p>setTimeout()을 사용하는 또 다른 방법입니다. 바로 setInterval()을 사용하는 대신 setTimeout()을 이용해 같은코드를 반복적으로 실행시키는 방법입니다.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds: 아래 예제에서는 setTimeout()이 주어진 함수를 100밀리세컨드마다 실행합니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>위 예제를 아래 예제와 비교해 보세요. 아래 예제는 setInterval()을 사용하여 같은 결과를 얻을 수 있습니다.</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="그렇다면_순환_setTimeout과_setInterval은_어떻게_다를까요">그렇다면 순환 setTimeout()과 setInterval()은 어떻게 다를까요?</h4>
+
+<p>두 방법의 차이는 미묘합니다.</p>
+
+<ul>
+ <li>순환 setTimeout ()은 실행과 실행 사이에 동일한 지연을 보장합니다.  위의 경우 100ms입니다. 코드가 실행 된 후 다시 실행되기 전에 100 ms 동안 대기하므로 간격은 코드 실행 시간에 관계없이 동일합니다.</li>
+ <li>setInterval ()을 사용하는 예제는 약간 다르게 작동합니다. 설정된 간격에는 실행하려는 코드를 실행하는 데 걸리는 시간이 포함됩니다. 코드를 실행하는 데 40ms가 걸리다면 간격이 60ms에 불과합니다.</li>
+ <li>setTimeout ()을 재귀적으로 사용할 때 각 반복은 다음 반복을 실행하기 전에 또 하나의 대기시간을 설정합니다. 즉, setTimeout ()의 두 번째 매개 변수의 값은 코드를 다시 실행하기 전에 대기 할 또 하나의 시간을 지정합니다.</li>
+</ul>
+
+<p>코드가 지정한 시간 간격보다 실행 시간이 오래 걸리면 순환 setTimeout ()을 사용하는 것이 좋습니다. 이렇게하면 코드 실행 시간에 관계없이 실행 간격이 일정하게 유지되어 오류가 발생하지 않습니다.</p>
+
+<h3 id="즉시_timeouts">즉시 timeouts</h3>
+
+<p>setTimeout()의 값으로 0을 사용하면 메인 코드 스레드가 실행된 후에 가능한 한 빨리 지정된 콜백 함수의 실행을 예약할 수 있다.</p>
+
+<p>예를 들어 아래 코드 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 는 "Hello"가 포함된 alert를 출력 한 다음 첫 번째 경고에서 OK를 클릭하자마자 "World"가 포함된 alert를 출력합니다.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>이것은 모든 메인 스레드의 실행이 완료되자마자 실행되도록 코드 블록을 설정하려는 경우 유용할 할 수 있습니다. 비동기 이벤트 루프에 배치하면 곧바로 실행될 겁니다.</p>
+
+<h3 id="clearTimeout_와_clearInterval의_취소기능">clearTimeout() 와 clearInterval()의 취소기능</h3>
+
+<p>clearTimeout ()과 clearInterval ()은 모두 동일한 entry를 사용하여 대상 메소드(setTimeout () 또는 setInterval ())을 취소합니다. 흥미롭게도 이는 setTimeout () 또는 setInterval ()을 지우는 데 clearTimeout ()과 clearInterval ()메소드 어느 것을 사용해도 무방합니다.</p>
+
+<p>그러나 일관성을 유지하려면 clearTimeout ()을 사용하여 setTimeout () 항목을 지우고 clearInterval ()을 사용하여 setInterval () 항목을 지우십시오. 혼란을 피하는 데 도움이됩니다.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p>requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. 근본적으로 setInterval ()의 최신 버전입니다. 브라우저가 다음에 디스플레이를 다시 표시하기 전에 지정된 코드 블록을 실행하여 애니메이션이 실행되는 환경에 관계없이 적절한 프레임 속도로 실행될 수 있도록합니다.</p>
+
+<p>setInterval ()을 사용함에 있어 알려진 문제점을 개선하기위해 만들어졌습니다. 예를 들어 장치에 최적화 된 프레임 속도로 실행되지 않는 문제,  때로는 프레임을 빠뜨리는 문제,  탭이 활성 탭이 아니거나 애니메이션이 페이지를 벗어난 경우에도 계속 실행되는 문제 등등이다 . <a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS에서 이에 대해 자세히 알아보십시오.</a></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: requestAnimationFrame() 사용에 관한 예제들은 이 코스의 여러곳에서 찾아볼 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a> 와 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a> 의 예제를 찾아 보세요.</p>
+</div>
+
+<p>이 메소드는 화면을 다시 표시하기 전에 호출 할 콜백을 인수로 사용합니다. 이것이 일반적인 패턴입니다. 아래는 사용예를 보여줍니다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>그 발상은 애니메이션을 업데이트하는 함수 (예 : 스프라이트 이동, 스코어 업데이트, 데이터 새로 고침 등)를 정의한 후 그것을 호출하여 프로세스를 시작하는 것입니다. 함수 블록의 끝에서 매개 변수로 전달 된 함수 참조를 사용하여 requestAnimationFrame ()을 호출하면 브라우저가 다음 화면을 재표시할 때 함수를 다시 호출하도록 지시합니다. 그런 다음 requestAnimationFrame ()을 반복적으로 호출하므로 계속 실행되는 것입니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 어떤 간단한  DOM 애니메이션을 수행하려는 경우,   <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> 은 JavaScript가 아닌 브라우저의 내부 코드로 직접 계산되므로 속도가 더 빠릅니다. 그러나 더 복잡한 작업을 수행하고 DOM 내에서 직접 액세스 할 수 없는 객체(예 :<a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects)를 포함하는 경우 대부분의 경우 requestAnimationFrame ()이 더 나은 옵션입니다. </p>
+</div>
+
+<h3 id="여러분의_애니메이션의_작동속도는_얼마나_빠른가요">여러분의 애니메이션의 작동속도는 얼마나 빠른가요?</h3>
+
+<p>부드러운 애니메이션을 구현은 직접적으로 프레임 속도에 달려 있으며, 프레임속도는 초당 프레임 (fps)으로 측정됩니다. 이 숫자가 높을수록 애니메이션이 더 매끄럽게 보입니다.</p>
+
+<p>일반적으로 화면 재생률는 60Hz이므로 웹 브라우저를 사용할 때 여러분이 설정할 수 있는 가장 빠른 프레임 속도는 초당 60 프레임 (FPS)입니다. 이 속도보다 빠르게 설정하면 과도한 연산이 실행되어 화면이 더듬거리고 띄엄띄엄 표시될 수 있다. 이런 현상을 프레임 손실 또는 쟁크라고 한다. </p>
+
+<p>재생률 60Hz의 모니터에 60FPS를 달성하려는 경우 각 프레임을 렌더링하기 위해 애니메이션 코드를 실행하려면 약 16.7ms(1000/60)가 필요합니다. 그러므로 각 애니메이션 루프를 통과 할 때마다 실행하려고 하는 코드의 양을 염두에 두어야합니다.</p>
+
+<p>requestAnimationFrame()은 불가능한 경우에도 가능한한 60FPS 값에 가까워 지려고 노력합니다. 실제로 복잡한 애니메이션을 느린 컴퓨터에서 실행하는 경우 프레임 속도가 떨어집니다. requestAnimationFrame ()은 항상 사용 가능한 것을 최대한 활용합니다.</p>
+
+<h3 id="requestAnimationFrame이_setInterval_setTimeout과_다른점은">requestAnimationFrame()이 setInterval(), setTimeout()과 다른점은?</h3>
+
+<p>requestAnimationFrame () 메소드가 이전에 살펴본 다른 메소드와 어떻게 다른지에 대해 조금 더 이야기하겠습니다. 위의 코드를 다시 살펴보면;</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>setInterval()을 사용하여 위와 같은 작업을 하는 방법을 살펴봅시다.</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>앞에서언급했듯이 requestAnimationFrame ()은 시간 간격을 지정하지 않습니다. requestAnimationFrame ()은 현재 상황에서 최대한 빠르고 원활하게 실행됩니다. 어떤 이유로 애니메이션이 화면에 표시되지 않으면 브라우저는 그 애니메이션을 실행하는 데 시간을 낭비하지 않습니다.</p>
+
+<p>반면에 setInterval ()은 특정 시간간격을 필요로 합니다. 1000 ms/60Hz 계산을 통해 최종값 16.6에 도달 한 후 반올림(17)했습니다. 이때 반올림하는 것이 좋습니다. 그 이유는 반내림(16)을하면 60fps보다 빠르게 애니메이션을 실행하려고 하게 되지만 애니메이션의 부드러움에 아무런 영향을 미치지 않기 때문입니다. 앞에서 언급했듯이 60Hz가 표준 재생률입니다.</p>
+
+<h3 id="timestamp를_포함하기">timestamp를 포함하기</h3>
+
+<p>requestAnimationFrame() 함수에 전달 된 실제 콜백에는 requestAnimationFrame()이 실행되기 시작한 이후의 시간을 나타내는 timestamp를  매개변수로 제공할 수 있습니다. 장치 속도에 관계없이 특정 시간과 일정한 속도로 작업을 수행할 수 있으므로 유용합니다. 사용하는 일반적인 패턴은 다음과 같습니다.</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="브라우저_지원">브라우저 지원</h3>
+
+<p>requestAnimationFrame()은 setInterval() / setTimeout()보다 좀 더 최신 브라우저에서 지원됩니다. 가장 흥미롭게도 Internet Explorer 10 이상에서 사용할 수 있습니다. 따라서 별도의 코드로 이전 버전의 IE를 지원해야할 필요가 없다면, requestAnimationFrame()을 사용하지 않을 이유가 없습니다.</p>
+
+<h3 id="간단한_예">간단한 예</h3>
+
+<p>지금까지 이론적으로는 충분히 살펴보았습니다. 그러면 직접 requestAnimationFrame() 예제를 작성해 봅시다. 우리는 간단한 "스피너 애니메이션"을 만들 것입니다. 여러분들이 앱 사용중 서버 과부하일 때 이것을 자주 보았을 겁니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 실제로는 CSS 애니메이션을 사용하여 이러한 종류의 간단한 애니메이션을 실행해야 합니다. 그러나 이러한 종류의 예제는 requestAnimationFrame() 사용법을 보여주는 데 매우 유용하며, 각 프레임에서 게임의 디스플레이를 업데이트하는 것과 같이 좀 더 복잡한 작업을 수행 할 때 이러한 종류의 기술을 사용하는 것이 좋습니다.</p>
+</div>
+
+<ol>
+ <li>
+  <p>먼저 HTML 템플릿을 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">여기</a>에서.가져옵니다.</p>
+ </li>
+ <li>
+  <p>&lt;body&gt;안에 빈 &lt;div&gt; 요소를 삽입합니다. 그리고  ↻캐릭터를 그 안에 추가합니다. 이 예제에서 이 원형 화살표가 회전하게됩니다.</p>
+ </li>
+ <li>
+  <p>아래 CSS를 HTML 템플릿에 여러분이 원하는 방식으로 적용하세요. 이 CSS는 페이지 배경을 빨간색으로, &lt;body&gt;의 height를 html height의 100%로 설정합니다. 그리고 &lt;div&gt;를 수직, 수평으로 &lt;body&gt; 중앙에 위치 시킵니다.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>&lt;/body&gt; 태크 위에 &lt;script&gt;를 추가하세요.</p>
+ </li>
+ <li>
+  <p>&lt;script&gt; 안에 아래 자바스크립트 코드를 추가하세요. 여기에서 &lt;div&gt;의 참조를 상수로 저장하고, rotateCount 변수를 0으로 설정하고, 나중에 requestAnimationFrame()의 시작 시간을 저장할 startTime 변수를 null로 설정하고, 그리고 requestAnimationFrame() 콜의 참조를 저장할 초기화하지 않은 rAF 변수를 선언합니다.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>그 아래에 draw() 함수를 추가합니다. 이 함수는 timestamp 매개변수를 포함하는 애니메이션 코드 작성에 사용됩니다.</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>draw() 함수안데 다음 코드를 추가합니다. if 조건문으로 startTime이 정의되지 않았다면 startTime을 정의합니다 (루프 반복의 첫번째에만 작동합니다).  그리고 스피너를 회전시키는 rotateCount 변수값을 설정합니다(현재 timestamp는 시작 timestamp를 3으로 나눈 것이라서 그리 빠르지 않습니다).</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>draw() 함수 안의 이전 코드 아래에 다음 블록을 추가합니다. 이렇게하면 rotateCount 값이 359보다 큰지 확인합니다 (예 : 360, 완전한 원). 그렇다면 값을 모듈러 360 (즉, 값을 360으로 나눌 때 남은 나머지)으로 설정하여 원 애니메이션이 합리적인 낮은 값으로 중단없이 계속 될 수 있습니다. 꼭 이렇게 해야되는 것은 아니지만 "128000도" 같은 값보다는 0~359 도의 값으로 작업하는 것이 더 쉽습니다.</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>다음으로 아래 코드를 추가하세요. 실제 스피너를 회전시키는 코드입니다.
+  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
+ </li>
+ <li>
+  <p> draw() 함수 제일 아래에 다음 코드를 추가합니다. 이 코드는 모든 작업의 키 포인트입니다. draw() 함수를 매개변수로 가져오는 requestAnimationFrame() 콜을 저장하기 위해 앞에서 정의한  rAF 변수를 설정합니다. 이 코드는 애니메이션을 실행시키고, 가능한한 60fps에 근사하게 draw() 함수를 계속 실행합니다.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="requestAnimationFrame_call의_취소">requestAnimationFrame() call의 취소</h3>
+
+<p>cancelAnimationFrame() 메소드를 호출하여 requestAnimationFrame()을 취소할 수 있다. (접두어가 "clear"가 아니고 "cancel"임에 유의) requestAnimationFrame()에 의해서 리턴된 rAF 변수값을 전달받아 취소한다. </p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if(posX &gt; width/2) {
+  newStartPos = -((width/2) + 102);
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that works out how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this.</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to our spinner, so we can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is very similar to the version seen in the simple spinner example we looked at earlier:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
+ </li>
+ <li>
+  <p>So add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
+   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
+   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it, you're all done.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..7e3d68c37d
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,160 @@
+---
+title: 일반적인 비동기 프로그래밍 개념
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - 비동기
+  - 비동기 프로그래밍
+  - 자바스크립트
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">선행 조건:</th>
+   <td>기초적인 컴퓨터 언어 능력,  Javascript에 대한 기초적인 이해가 필요합니다. </td>
+  </tr>
+  <tr>
+   <th scope="row">학습 목적: </th>
+   <td>비동기적 프로그래밍이 작동하는 기초적인 원리에 대해 이해하는 것입니다. 그리고 이 개념이 어떻게 웹브라우저와 자바스크립트에서 압도적인 지위를 차지하기 되었는지 알아봅니다. </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="비동기적Asynchronous_이란">'비동기적'(Asynchronous) 이란?</h2>
+
+<p>일반적으로, 프로그램의 코드는 순차적으로 진행됩니다. 한번에 한가지 사건만 발생하면서 말입니다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 합니다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,  전체 프로그램이 모두 멈춘 것처럼 보입니다. </p>
+
+<p>예를들면, 맥 유저라면 종종 회전하는 무지개색 커서(비치볼)를 본 적이 있을 것입니다. 이 커서는 오퍼레이팅 시스템이 이렇게 말하고 있는 것입니다. "당신이 지금 사용하고 있는 시스템은 지금 멈춰서서 뭔가가 끝나기를 기다려야만 합니다. 그리고 이 과정은 당신이 지금 무슨 일이 일어나고있는지 궁금해 할 만큼 오래 걸리고 있습니다."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>이것은 당황스러운 경험이며, 특히 요즘과 같이 컴퓨터가 여러개 프로세서를 돌리는 시대에는 컴퓨터 성능을 효율적으로 쓰지 못하는 처사입니다. 당신이 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 의미가 없습니다 .그 동안 다른 작업을 수행할 수 있고, 이것이 비동기 프로그래밍의 기본입니다. 이러한 작업을 비동기적으로 실행할 수 있는 API를 제공하는 것은 당신이 사용하고 있는 프로그래밍 환경(웹 개발의 경우 웹브라우저) 에 달려 있습니다.</p>
+
+<h2 id="Blocking_code">Blocking code</h2>
+
+<p>비동기 기법은 특히 웹 프로그래밍에 매우 유용합니다. 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 <strong>blocking </strong>이라고 부릅니다. 자세히 정의하자면, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상 입니다..</p>
+
+<p>Blocking의 몇 가지 예를 살펴보겠습니다.</p>
+
+<p>여기 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> 예시가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.) 그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 앞의 예제는 매우 비현실적입니다. 실제 웹 앱에서 날짜를 천만번 계산할 일은 없습니다. 실제로 보여주기 위해 극단적인 예시를 들었을 뿐입니다..</p>
+</div>
+
+<p>두 번째 예제를 살펴보겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>),  페이지에 UI가 모두 표시되기 전 까지 사용자의 입력을 막는 좀 더 현실적인 예시입니다. 이번 예시에는 두 가지 버튼을 사용합니다. :</p>
+
+<ul>
+ <li>"Fill canvas" 버튼을 클릭하면 {{htmlelement("canvas")}} 태그에 100만개의 파란색 원을 채웁니다. (실행하면 원이 너무 많아서 원이 아니라 배경이 그냥 파란색으로 채워집니다.)</li>
+ <li>"Click me for alert" 버튼은 사용자에게 메시지를 출력합니다.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: OK, 이 예시가 Blocking 효과를 설명하기에는 구리지만, 실제로 개발자가 겪는 일반적인 문제입니다.</p>
+</div>
+
+<p>왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 <strong>single threaded</strong>이기 때문입니다. 이 시점에서 <strong>threads</strong>의 개념을 소개할 필요가 있겠군요</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p><strong>Thread</strong> 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. :</p>
+
+<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>위의 예시처럼 각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 합니다.</p>
+
+<p>앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다. Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다. :</p>
+
+<pre class="notranslate">Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_is_single_threaded">JavaScript is single threaded</h3>
+
+<p>자바스크립트는 전통적으로 싱글 thread입니다. 컴퓨터가 여러 개의 CPU를 가지고 있어도 <strong>main thread</strong>라 불리는 단일 thread에서만 작업을 실행할 수 있습니다. 위의 예시는 아래처럼 실행됩니다. :</p>
+
+<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>JavaScript는 이러한 문제를 해결하기 위해 몇 가지 툴을 도입했습니다. <a href="/ko/docs/Web/API/Web_Workers_API">Web workers</a>는 여러 개의 JavaScript 청크를 동시에 실행할 수 있도록 worker라고 불리는 별도의 스레드로 보낼 수 있습니다. 따라서 시간이 오래 걸리는 처리는 woker를 사용해 처리하면 blocking 발생을 막을 수 있습니다..</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>위의 내용을 잘 기억하시고 다음 예제를 살펴보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>), JavaScript 콘솔을 함께 열어주세요. 이전 예시는 날짜를 천만 번 계산하고 페이지에 문장을 출력했지만, 이번엔 천만번 계산 전 문장을 페이지에 출력해줍니다. 더이상 첫 번째 작업이 두 번째 작업을 차단하지 않습니다.</p>
+
+<h2 id="Asynchronous_code">Asynchronous code</h2>
+
+<p>Web worker는 꽤 유용하지만 이들도 한계가 있습니다. 주요한 내용은 Web worker는 {{Glossary("DOM")}} 에 접근할 수 없습니다. — UI를 업데이트하도록 worker에게 어떠한 지시도 직접 할 수 없습니다. 두 번째 예시에서 worker는 100만개의 파란색 원을 만들 수 없습니다. 단순히 숫자만 계산합니다.</p>
+
+<p>두 번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행된다는 것 입니다. 이러한 문제는 함수를 사용할 때 발생합니다. 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return 받아야 할 경우 입니다. 동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 사용자가 원하는 기능을 제대로 실행할 수 없습니다.</p>
+
+<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+
+<p>이 예시에서 Task A는 서버로부터 이미지를 가져오고 Task B는 그 이미지에 필터를 적용하는 것과 같은 작업을 수행한다고 가정합니다. Task A를 실행하고 결과를 반환할 시간도 없이 Task B를 실행해버리면 에러가 발생할 것 입니다. 왜냐햐면 Task A에서 이미지를 완전히 가져온 상태가 아니기 때문이죠.</p>
+
+<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>이번 예시에선 Task D가 Task B와 Task C의 결과를 모두 사용한다고 가정합니다. Task B와 Task C가 동시에 아주 빠르게 결과를 반환하면 매우 이상적이겠지만, 현실은 그렇지 않습니다. Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생합니다.</p>
+
+<p>이러한 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있습니다. 바로 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 사용하는것 입니다. 아래 예시처럼 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있습니다. :</p>
+
+<pre class="notranslate">Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>위의 작업은 다른 곳에서 처리가 되므로, 비동기 작업이 진행되는 동안 main thread가 차단되지 않습니다.</p>
+
+<p>이번 문서에서 다룬 내용은 매우 중요한 내용입니다. 다음 문서에선 비동기 코드를 어떻게 쓸 수 있는지 살펴볼 계획이므로 끝까지 읽어주시면 좋겠습니다.</p>
+
+<h2 id="결론">결론</h2>
+
+<p>현대의 소프트웨어 설계는 프로그램이 한 번에 두 가지 이상의 일을 할 수 있도록 비동기 프로그래밍을 중심으로 돌아가고 있습니다. 보다 새롭고 강력한 API를 이용하면서, 비동기로 작업해야만 하는 사례가 많아질 것입니다. 예전에는 비동기 코드를 쓰기가 힘들었습니다. 여전히 아직 어렵지만, 훨씬 쉬워졌습니다. 이 모듈의 나머지 부분에서는 비동기 코드가 왜 중요한지, 위에서 설명한 일부 문제들을 방지하는 코드 설계 방법에 대해 자세히 알아봅시다.</p>
+
+<h2 id="이번_module_에서는..">이번 module 에서는..</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">일반적인 비동기 프로그래밍 개념</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">비동기 자바스크립트 소개</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">협동하는 비동기 자바스크립트: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Promises와 함께하는 우아한 비동기 프로그래밍</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">비동기 프로그래밍을 쉽게 만드는 방법: async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">올바른 접근 방식 선택하기</a></li>
+</ul>
diff --git a/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..bbe8ee7812
--- /dev/null
+++ b/files/ko/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,414 @@
+---
+title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">필수조건:</th>
+   <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td>
+  </tr>
+  <tr>
+   <th scope="row">목표:</th>
+   <td>async/await에 대한 이해</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_basics_of_asyncawait">async/await의 기초</h2>
+
+<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
+
+<h3 id="The_async_keyword">비동기 키워드</h3>
+
+<p>먼저 비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async 함수</a>로 만들기 위하여 function()앞에 <code>async</code> 키워드를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
+
+<p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p>
+
+<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>기본적으로 두 가지는 모두 같습니다.</p>
+
+<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>이전에 봤던 내용과 비슷하죠?.</p>
+
+<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
+
+<h3 id="The_await_keyword">비동기 키워드</h3>
+
+<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
+
+<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p>
+
+<p>여기 간단한 예가 있습니다. :</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
+
+<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2>
+
+<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p>
+
+<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">예제</a> (여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">소스코드</a>를 볼 수 있습니다.).</p>
+
+<h3 id="But_how_does_it_work">어떻게 작동할까요?</h3>
+
+<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
+
+<p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>fulfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
+
+<p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
+
+<p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
+
+<h3 id="Adding_error_handling">오류 처리 추가</h3>
+
+<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
+
+<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p>
+
+<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p>
+
+<p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">소스 코드</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">소스 코드</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">이전에 글에서 본 예제</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
+
+<p>async/await 스타일로 변경한 코드는 아래와 같습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">데모</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">소스 코드</a>) :</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+  }
+
+  return content;
+
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p>
+
+<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
+
+<div class="blockIndicator note">
+  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code>비동기 블록 대신 비동기 함수 내에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">예제</a>에서도 확인이 가능합니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">소스 코드</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">async/await의 단점</h2>
+
+<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
+
+<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
+
+<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p>
+
+<p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
+
+<p>두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">소스 코드</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">소스 코드</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
+
+<pre class="brush: js notranslate">async function makeResult(items) {
+   let newArr = [];
+   for(let i=0; i &lt; items.length; i++) {
+     newArr.push('word_'+i);
+   }
+   return newArr;
+ }
+
+ async function getResult() {
+   let result = await makeResult(items); // Blocked on this line
+   useThatResult(result); // Will not be executed before makeResult() is done
+ }
+ </pre>
+
+<p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p>
+
+<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p>
+
+<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p>
+
+<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p>
+
+<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p>
+
+<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2>
+
+<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를 <code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">브라우저 지원</h2>
+
+<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다.
+  promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다.
+  주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p>
+
+<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p>
+
+<h2 id="Conclusion">결론</h2>
+
+<p>async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">이 모듈에서</h2>
+
+<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>
diff --git a/files/ko/learn/javascript/asynchronous/async_await/index.html b/files/ko/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index 92a9d81dc6..0000000000
--- a/files/ko/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,413 +0,0 @@
----
-title: async와 await를 사용하여 비동기 프로그래밍을 쉽게 만들기
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Javascript에 대한 최신 추가 사항은 ECMAScript 2017 JavaScript 에디션의 일부인 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 그리고 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 키워드는 ECMAScript2017에 추가되었습니다. 이 기능들은 기본적으로 비동기 코드를 쓰고 Promise를 더 읽기 더 쉽도록 만들어줍니다. 비동식 코드는 구식 동기코드를 읽기 쉽게 만들기 때문에 학습할 가치가 있습니다. 이 글은 당신이 비동기에 알아야할 것을 알려줍니다. </p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">필수조건:</th>
-   <td>기본 컴퓨터 사용능력, 자바스크립트 기초, 비동기코드에 대한 이해</td>
-  </tr>
-  <tr>
-   <th scope="row">목표:</th>
-   <td>async/await에 대한 이해</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="The_basics_of_asyncawait">async/await의 기초</h2>
-
-<p>async/await 코드는 두 가지 부분으로 나눠져있습니다.</p>
-
-<h3 id="The_async_keyword">비동기 키워드</h3>
-
-<p>먼저 비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async 함수</a>로 만들기 위하여 function()앞에 <code>async</code> 키워드를 추가합니다. async function()은 <code>await</code> 키워드가 비동기 코드를 호출할 수 있게 해주는 함수 입니다.</p>
-
-<p>브라우저의 JavaScript 콘솔에서 아래와 같이 입력해보세요. :</p>
-
-<pre class="brush: js notranslate">function hello() { return "Hello" };
-hello();</pre>
-
-<p>위의 함수는 "Hello"를 반환합니다. — 특별할게 없죠?</p>
-
-<p>그러면 함수 앞에 async 키워드를 추가하면 어떻게 될까요?? 아래처럼 작성해봅시다.:</p>
-
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>이제 코드가 Promise를 반환합니다. 이것이 async 기능의 특징 중 하나 입니다. — 이 키워드를 사용하면 반환받는 값은 Promise가 됩니다..</p>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>을 사용하여 아래와 같이 만들 수도 있습니다. :</p>
-
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>화살표 함수를 사용하면 아래처럼 쓸 수 있습니다. :</p>
-
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>기본적으로 두 가지는 모두 같습니다.</p>
-
-<p>실제로는 fulfil Promise가 반환되기 때문에 반환된 값을 사용하기 위해선 <code>.then()</code> 블럭을 사용해야 합니다. :</p>
-
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>짧게 표현하면 아래와 같이 쓸 수 있습니다.</p>
-
-<pre class="brush: js notranslate">hello().then(console.log)</pre>
-
-<p>이전에 봤던 내용과 비슷하죠?.</p>
-
-<p>정리하면, <code>async</code> 를 함수와 같이 사용하면 결과를 직접 반환하는게 아니라 Promise를 반환하게 합니다. 또한 동기식 함수는 <code>await</code>사용을 위한 지원과 함께 실행되는 잠재적인 오버헤드를 피할 수 있습니다. 함수가  <code>async</code>라고 선언될 때 필요한 핸들링만 추가하면 JavaScript엔진이 우리가 만든 프로그램을 최적화 할 수 있습니다. 끝내주죠?</p>
-
-<h3 id="The_await_keyword">비동기 키워드</h3>
-
-<p>비동기 함수를 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 키워드와 함께 쓰면 그 장점이 확실히 보입니다. 이것은 어떠한 Promise기반 함수 앞에 놓을 수 있습니다. 그리고 우리의 코드의 Promise가 fulfil될 때 까지 잠시 중단하고, 결과를 반환합니다. 그리고 실행을 기다리는 다른 코드들을 중지시키지 않고 그대로 실행되게 합니다.</p>
-
-<p><code>await</code> 키워드는 웹 API를 포함하여 Promise를 반환하는 함수를 호출할 때 사용할 수 있습니다.</p>
-
-<p>여기 간단한 예가 있습니다. :</p>
-
-<pre class="brush: js notranslate">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>물론 위의 예시는 그다지 쓸모있진 않습니다. 다만 어떻게 구문을 작성해야 하는지는 잘 나타내줍니다. 이제 실제 사례를 살펴봅시다.</p>
-
-<h2 id="Rewriting_promise_code_with_asyncawait">async/await와 함께 다시 쓰는 promise code</h2>
-
-<p>이전 문서에서 봤던 간단한 fetch() 예제를 살펴봅시다. :</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>지금 시점에서 우리는 Promise가 어떻게 작동하는지 잘 이해하고 있습니다. 그렇다면 지금부터 이 예제를 async/await 를 사용하여 더 간단하게 만들어봅시다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>바꾸고 나니 더 이해하기 쉬워졌습니다. — 더 이상의 <code>.then()</code> 블럭은 찾아 볼 수 없습니다.</p>
-
-<p><code>async</code> 키워드가 함수를 Promise로 바꾸었기, 이제 promise 와 await의 하이브리드 접근방식을 사용하기 위해 코드를 리팩토링 할 수 있으며, 두 번째 <code>.then()</code>블럭을 함수 내부의 블럭으로 가져와 더 유연하게 만들 수 있습니다.</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>예제를 직접 만들어보거나, 여기서 결과를 확인할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">예제</a> (여기서 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">소스코드</a>를 볼 수 있습니다.).</p>
-
-<h3 id="But_how_does_it_work">어떻게 작동할까요?</h3>
-
-<p>함수 안에 코드를 작성했고, <code>function</code> 키워드 앞에 <code>async</code> 키워드를 썼다는 것을 알 수 있습니다. 꼭 이렇게 써야합니다!! 비동기 코드를 실행할 블럭을 정의하려면 비동기 함수를 생성해야 합니다. <code>await</code>는 <code>async function</code> 안에서만 쓸 수 있습니다.</p>
-
-<p><code>myFetch()</code> 함수 내에 코드가 이전의 Promise버전과 매우 유사하지만, 다른점이 있습니다. <code>.then()</code>블럭을 사용하여 작업을 이어가는 대신 메서드 호출 전에 <code>await</code> 키워드를 사용하여 반환된 결과를 변수에 할당합니다. <code>await</code> 키워드는 JavaScript 런타임이 이 라인에서 비동기 코드를 일시 중지하여 비동기 함수 호출이 결과를 반환할 때 까지 기다리게 합니다. 그러나 외부의 다른 동기 코드는 실행될 수 있도록 합니다. 작업이 완료되면 코드는 계속 이어져서 실행됩니다. 예를들면 아래와 같습니다. :</p>
-
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
-
-<p>fulfilled된 <code>fetch()</code> Promise에서 반환된 응답은 해당 응답이 사용할 수 있게 되면 <code>response</code> 변수에 할당됩니다. 그리고 parser는 해당 응답이 발생할 때 까지 이 라인에서 일시 중지됩니다. response가 사용 가능하게 되면, parser 는 다음 라인으로 이동하게 되고 그 라인에서 <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> 을 생성하게 됩니다. 이라인도 Promise기반 비동기 메서드를 호출하므로, 여기서도<code>await</code> 을 사용합니다. 비동기 작업 결과가 반환되면, <code>myFetch()</code> 함수가 그 결과를 반환합니다.</p>
-
-<p><code>myFetch()</code> 함수를 호출하면, Promise를 반환하므로, 따라서 화면에 Blob을 표시해주는 <code>.then()</code> 코드 블럭 체이닝 할 수 있습니다.</p>
-
-<p>여기까지 왔으면 이 방법이 멋있다고 생각해야합니다! 왜냐하면 <code>.then()</code> 블럭이 줄어들고 대부분이 동기 코드처럼 보이기 때문에 정말 직관적입니다.</p>
-
-<h3 id="Adding_error_handling">오류 처리 추가</h3>
-
-<p>그리고 오류 처리를 하려면 몇 가지 옵션이 있습니다.</p>
-
-<p>동기식 코드에서 쓰는 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 구문을 <code>async</code>/<code>await</code>구조에서 사용할 수 있습니다. 이 예제는 위에서 설명한 첫 번째 코드를 수정한 것 입니다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p><code>catch() {}</code> 블록은 <code>e</code> 라고 부르는 에러 오브젝트를 통과시킵니다. 이제 콘솔에 코드가 던져준 에러 메시지를 출력할 수 있습니다.</p>
-
-<p>아래 코드는 처음 예제를 리팩토링한 두 번째 버전의 코드 입니다. 이 하이브리드 접근법을 사용하는 코드에서 에러를 탐지하고 싶으면 <code>.catch()</code> 블럭을 <code>.then()</code> 호출의 마지막에 작성합니다. :</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>이는 <code>.catch()</code> 블럭이 async 함수 호출과 Promise 체인 모두에서 발생하는 오류를 잡을 수 있기 때문입니다. 여기서 <code>try</code>/<code>catch</code> 블럭을 사용했더라도, <code>myFetch()</code> 에서 발생한 unhandled에러를 잡아낼 수 있습니다.</p>
-
-<p>위의 예제 모두를 GitHub에서 찾아볼 수 있습니다. :</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">소스 코드</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">소스 코드</a>)</li>
-</ul>
-
-<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
-
-<p>async/await는 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>의 상위에 만들어져 있기 때문에 Promise의 모든 기능을 사용할 수 있습니다. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> 을 포함해서 말이죠 — 아래 보이는 코드처럼 <code>Promise.all()</code> 앞에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 사용하여 동기식 코드처럼 작성할 수 있습니다. 이전 문서를 확인해봅시다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">이전에 글에서 본 예제</a>. 새로운 버전과 비교하기 위해 탭을 분리 해보세요.</p>
-
-<p>async/await 스타일로 변경한 코드는 아래와 같습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">데모</a> 그리고 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">소스 코드</a>) :</p>
-
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-  }
-
-  return content;
-
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>몇 가지 사항을 조금 수정했을 뿐인데 <code>fetchAndDecode()</code>함수를 쉽게 비동기 함수로 변환했습니다. <code>Promise.all()</code> 라인을 살펴보세요:</p>
-
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>여기에 <code>await</code> 을 사용하여 세 가지 Promise의 결과가 반환되었을 때 <code>values</code> 배열에 담을 수 있습니다. 그리고 마치 동기화 코드처럼 보이죠. 우리가 작업한건 <code>displayContent()</code>에 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">async</span></font>키워드를 추가하고, 모든 코드를<code>.then()</code> 블럭 바깥으로 빼냈습니다. 또한 아주 적은양의 코드 수정도 했죠. 이렇게 하니 더 단순하고, 유용하고 읽기 쉬운 프로그램이 되었습니다.</p>
-
-<p>마지막으로 에러를 다루기 위해 <code>.catch()</code> 블럭을 <code>displayContent()</code> 함수를 호출하는 곳에 추가했습니다. 이렇게 하면 두 함수에서 발생하는 에러를 처리할 수 있습니다.</p>
-
-<div class="blockIndicator note">
-  <p><strong>Note</strong>: <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code>비동기 블록 대신 비동기 함수 내에서 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 동기 블록을 사용하여 작업이 어떻게 진행되었는지에 대한 최종 보고서를 표시할 수 있습니다. <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">예제</a>에서도 확인이 가능합니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">소스 코드</a>).</p>
-</div>
-
-<h2 id="The_downsides_of_asyncawait">async/await의 단점</h2>
-
-<p>앞서 봤듯이 async/await은 매우 유용하지만 고려해야 할 몇 가지 단점이 있습니다.</p>
-
-<p>Async/await 는 우리의 코드를 마치 동기식 코드처럼 보이게 합니다. 그리고 어떤 면에서는 정말로 동기적으로 행동합니다. 함수 블럭에 여러 개의 <code>await</code> 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 <code>await</code> 을 차단합니다. 그 동안 다른 태스크는 계속 실행이 되지만 정의한 함수 내에서는 동기적으로 작동할 것 입니다.</p>
-
-<p>이 말은 우리가 작성한 코드가 바로 이어지는 수 많은 Promise에 의해 느려질 수 있다는 것을 의미합니다. 각 <code>await</code> 는 이전의 작업이 끝날 때 까지 기다립니다(Promise 체이닝과 혼동하지 마세요). 그런데 우리가 원하는건 기다리는게 아니고 일제히 실행되는 것 입니다.</p>
-
-<p>이 문제를 완화할 수 있는 패턴이 있습니다. — 모든 <code>Promise</code> 오브젝트를 변수에 저장하여 미리 실행되게 하고 변수가 사용 가능할 때 꺼내서 쓰는 것 입니다. 어떻게 작동하는지 한번 살펴봅시다.</p>
-
-<p>두 가지 예시를 보여 드리겠습니다. — 느린 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">소스 코드</a>) 그리고 빠른 비동기 작업 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">소스 코드</a>)입니다. 두 예제에서  마치 비동기 작업인 것 처럼 보이기 위해 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 을 사용했습니다. :</p>
-
-<pre class="brush: js notranslate">async function makeResult(items) {
-   let newArr = [];
-   for(let i=0; i &lt; items.length; i++) {
-     newArr.push('word_'+i);
-   }
-   return newArr;
- }
- 
- async function getResult() {
-   let result = await makeResult(items); // Blocked on this line
-   useThatResult(result); // Will not be executed before makeResult() is done
- }
- </pre>
-
-<p>그리고 세 가지 <code>timeoutPromise()</code> 함수를 호출하는 <code>timeTest()</code>함수를 만들었습니다.</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  ...
-}</pre>
-
-<p>그리고 두 개 예제 모두 시작 시간을 기록하고, <code>timeTest()</code> Promise가 fulfilled된 시간을 저장하여 두 시간의 차를 계산해 작업이 얼마나 걸렸는지 사용자에게 보여줍니다. :</p>
-
-<pre class="brush: js notranslate">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p><code>timeTest()</code> 함수만 두 예제에서 차이가 있습니다.</p>
-
-<p><code>slow-async-await.html</code> 예제이서, <code>timeTest()</code> 함수는 아래와 같이 생겼습니다. :</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>아주 간단하게 <code>timeoutPromise()</code> 함수를 직접 호출했습니다. 각 작업은 3초씩 걸립니다. 그리고 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 키워드를 사용했기 때문에 이전 await 작업이 끝나야 다음으로 진행됩니다. — 첫 번째 예제를 실행하면, alert 박스에서 약 9초(9000밀리초)가 걸렸음을 확인할 수 있습니다.</p>
-
-<p>다음으로 <code>fast-async-await.html</code> 예제이서, <code>timeTest()</code> 은 아래와 같이 생겼습니다. :</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>여기선 세 가지 <code>Promise</code> 오브젝트를 변수에 저장하여 동시에 작업을 시작하도록 했습니다.</p>
-
-<p>그리고 그 변수에 await을 사용하여 결과를 호출합니다. — 작업이 거의 동시에 시작됐기 때문에, Promise도 거의 동시에 fulfilled될 것 입니다. 두 번째 예제를 실행하면 거의 3초(3000밀리초) 만에 작업이 끝났음을 확인할 수 있습니다.</p>
-
-<p>코드를 주의깊게 테스트 하고, 성능이 떨어지기 시작하면 위의 상황을 의심해봐야 합니다.</p>
-
-<p>다른 아주 사소한 단점은 비동기로 실행될 Promise가 있다면 async함수 안에 항상 await을 써야한다는 것 입니다.</p>
-
-<h2 id="Asyncawait_class_methods">Async/await class 메서드</h2>
-
-<p>마지막으로 보여줄 내용은 <code>async</code> 키워드를 class/object의 메서드에 사용하여 Promise를 반환하게 만들 수 있다는 것 입니다. 그리고 <code>await</code> 를 그 안에 넣을 수도 있습니다. 다음 문서를 살펴보세요 &gt; <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, 그리고 보이는 코드를 <code>async</code> 메서드로 수정한 아래의 내용과 비교 해보세요 :</p>
-
-<pre class="brush: js notranslate">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>이제 클래스의 첫 번째 메서드를 아래와 같이 사용할 수 있습니다. :</p>
-
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support">브라우저 지원</h2>
-
-<p>async/await 사용 여부를 결정할 때 고려해야 할 한가지 사항은 이전 브라우저에 대한 지원입니다. 
-  promises와 마찬가지로 대부분의 최신 브라우저에서 사용할 수 있습니다. 
-  주요 지원 문제는 Internet Explorer 그리고 Opera Mini에서 발생합니다.</p>
-
-<p>async/await을 사용하는데 브라우저 지원이 걱정되는 경우 <a href="https://babeljs.io/">BabelJS</a> 라이브러리를 사용하는 것을 고려해 볼 수 있습니다. BabelJS는 최신 자바스크립트를 사용하여 애플리케이션을 작성하고 사용자 브라우저에 필요한 변경사항을 Babel이 파악할 수 있도록 지원합니다. async/await를 지원하지 않는 브라우저를 만나면 Babel은 이전 브라우저에서 작동하는 polyfill를 자동으로 제공합니다.</p>
-
-<h2 id="Conclusion">결론</h2>
-
-<p>async/await를 사용하면 읽기 쉽고 유지보수가 편리한 비동기 코드를 간단하게 작성할 수 있습니다. 브라우저 지원이 다른 비동기 코드에 비해 제한적이기는 하지만 현재는 물론 미래에도 사용을 위해 배울 가치는 충분합니다.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">이 모듈에서</h2>
-
-<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>
diff --git a/files/ko/learn/javascript/asynchronous/concepts/index.html b/files/ko/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 8b1a12bf46..0000000000
--- a/files/ko/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: 일반적인 비동기 프로그래밍 개념
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - 비동기
-  - 비동기 프로그래밍
-  - 자바스크립트
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>이 문서에서는 비동기적 프로그래밍과 관련된 몇개의 개념들을 살펴볼 것입니다. 그리고 이것들이 웹브라우저와 자바스크립트에서 어떻게 보이는지도 살펴볼 것입니다. 이 모듈의 다른 문서들을 공부하기 전에, 이 문서에 나와있는 개념들을 먼저 학습하십시오.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">선행 조건:</th>
-   <td>기초적인 컴퓨터 언어 능력,  Javascript에 대한 기초적인 이해가 필요합니다. </td>
-  </tr>
-  <tr>
-   <th scope="row">학습 목적: </th>
-   <td>비동기적 프로그래밍이 작동하는 기초적인 원리에 대해 이해하는 것입니다. 그리고 이 개념이 어떻게 웹브라우저와 자바스크립트에서 압도적인 지위를 차지하기 되었는지 알아봅니다. </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="비동기적Asynchronous_이란">'비동기적'(Asynchronous) 이란?</h2>
-
-<p>일반적으로, 프로그램의 코드는 순차적으로 진행됩니다. 한번에 한가지 사건만 발생하면서 말입니다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 합니다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,  전체 프로그램이 모두 멈춘 것처럼 보입니다. </p>
-
-<p>예를들면, 맥 유저라면 종종 회전하는 무지개색 커서(비치볼)를 본 적이 있을 것입니다. 이 커서는 오퍼레이팅 시스템이 이렇게 말하고 있는 것입니다. "당신이 지금 사용하고 있는 시스템은 지금 멈춰서서 뭔가가 끝나기를 기다려야만 합니다. 그리고 이 과정은 당신이 지금 무슨 일이 일어나고있는지 궁금해 할 만큼 오래 걸리고 있습니다."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>이것은 당황스러운 경험이며, 특히 요즘과 같이 컴퓨터가 여러개 프로세서를 돌리는 시대에는 컴퓨터 성능을 효율적으로 쓰지 못하는 처사입니다. 당신이 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 의미가 없습니다 .그 동안 다른 작업을 수행할 수 있고, 이것이 비동기 프로그래밍의 기본입니다. 이러한 작업을 비동기적으로 실행할 수 있는 API를 제공하는 것은 당신이 사용하고 있는 프로그래밍 환경(웹 개발의 경우 웹브라우저) 에 달려 있습니다.</p>
-
-<h2 id="Blocking_code">Blocking code</h2>
-
-<p>비동기 기법은 특히 웹 프로그래밍에 매우 유용합니다. 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있습니다. 이러한 현상을 <strong>blocking </strong>이라고 부릅니다. 자세히 정의하자면, 사용자의 입력을 처리하느라 웹 앱이 프로세서에 대한 제어권을 브라우저에게 반환하지 않는 현상 입니다..</p>
-
-<p>Blocking의 몇 가지 예를 살펴보겠습니다.</p>
-
-<p>여기 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> 예시가 있습니다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 하나의 버튼에 클릭 이벤트리스너를 지정하여 시간이 오래 걸리는 처리를 하도록하였습니다. (날짜를 천만번 계산하고 마지막에 콘솔에 날짜를 출력합니다.) 그리고 처리가 끝나면 페이지에 간단한 문장을 한 줄 출력합니다. :</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>이 예제를 실행할 때 JavaScript 콘솔을 열고 버튼을 클릭하면, 콘솔에 메시지가 출력되기 전 까지 페이지에 문장이 나타나지 않는다는 것을 알 수 있습니다. 코드는 위에서 아래로 순차적으로 실행되며, 아래쪽 코드는 위쪽 코드의 처리가 끝날 때 까지 실행되지 않습니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 앞의 예제는 매우 비현실적입니다. 실제 웹 앱에서 날짜를 천만번 계산할 일은 없습니다. 실제로 보여주기 위해 극단적인 예시를 들었을 뿐입니다..</p>
-</div>
-
-<p>두 번째 예제를 살펴보겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>),  페이지에 UI가 모두 표시되기 전 까지 사용자의 입력을 막는 좀 더 현실적인 예시입니다. 이번 예시에는 두 가지 버튼을 사용합니다. :</p>
-
-<ul>
- <li>"Fill canvas" 버튼을 클릭하면 {{htmlelement("canvas")}} 태그에 100만개의 파란색 원을 채웁니다. (실행하면 원이 너무 많아서 원이 아니라 배경이 그냥 파란색으로 채워집니다.)</li>
- <li>"Click me for alert" 버튼은 사용자에게 메시지를 출력합니다.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>첫 번째 버튼을 클릭한 후 두 번째 버튼을 바로 클릭하면 경고 박스가 나타나지 않는 것을 확인할 수 있습니다. 첫 번째 버튼은 이벤트가 끝나기 전 까지 다음 작동을 막아버립니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: OK, 이 예시가 Blocking 효과를 설명하기에는 구리지만, 실제로 개발자가 겪는 일반적인 문제입니다.</p>
-</div>
-
-<p>왜 이런 현상이 발생할까요? 답은 자바스크립트는 기본적으로 <strong>single threaded</strong>이기 때문입니다. 이 시점에서 <strong>threads</strong>의 개념을 소개할 필요가 있겠군요</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p><strong>Thread</strong> 는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스 입니다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있습니다. :</p>
-
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>위의 예시처럼 각 작업은 순차적으로 실행되며, 다음 작업을 시작하려면 앞의 작업이 완료되어야 합니다.</p>
-
-<p>앞서 말했듯이, 많은 컴퓨터들이 현재 여러 개의 CPU코어를 가지고 있기 때문에, 한 번에 여러가지 일을 수행할 수 있습니다. Multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 수 있습니다. :</p>
-
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_is_single_threaded">JavaScript is single threaded</h3>
-
-<p>자바스크립트는 전통적으로 싱글 thread입니다. 컴퓨터가 여러 개의 CPU를 가지고 있어도 <strong>main thread</strong>라 불리는 단일 thread에서만 작업을 실행할 수 있습니다. 위의 예시는 아래처럼 실행됩니다. :</p>
-
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>JavaScript는 이러한 문제를 해결하기 위해 몇 가지 툴을 도입했습니다. <a href="/ko/docs/Web/API/Web_Workers_API">Web workers</a>는 여러 개의 JavaScript 청크를 동시에 실행할 수 있도록 worker라고 불리는 별도의 스레드로 보낼 수 있습니다. 따라서 시간이 오래 걸리는 처리는 woker를 사용해 처리하면 blocking 발생을 막을 수 있습니다..</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>위의 내용을 잘 기억하시고 다음 예제를 살펴보세요. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>), JavaScript 콘솔을 함께 열어주세요. 이전 예시는 날짜를 천만 번 계산하고 페이지에 문장을 출력했지만, 이번엔 천만번 계산 전 문장을 페이지에 출력해줍니다. 더이상 첫 번째 작업이 두 번째 작업을 차단하지 않습니다.</p>
-
-<h2 id="Asynchronous_code">Asynchronous code</h2>
-
-<p>Web worker는 꽤 유용하지만 이들도 한계가 있습니다. 주요한 내용은 Web worker는 {{Glossary("DOM")}} 에 접근할 수 없습니다. — UI를 업데이트하도록 worker에게 어떠한 지시도 직접 할 수 없습니다. 두 번째 예시에서 worker는 100만개의 파란색 원을 만들 수 없습니다. 단순히 숫자만 계산합니다.</p>
-
-<p>두 번째 문제는 worker에서 실행되는 코드는 차단되지 않지만 동기적으로 실행된다는 것 입니다. 이러한 문제는 함수를 사용할 때 발생합니다. 어떤 함수가 일의 처리를 위해 이전의 여러 프로세스의 결과를 return 받아야 할 경우 입니다. 동기적으로 실행되면 함수 실행에 필요한 매개변수를 받아올 수 없는 경우가 생기므로 함수는 사용자가 원하는 기능을 제대로 실행할 수 없습니다.</p>
-
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
-
-<p>이 예시에서 Task A는 서버로부터 이미지를 가져오고 Task B는 그 이미지에 필터를 적용하는 것과 같은 작업을 수행한다고 가정합니다. Task A를 실행하고 결과를 반환할 시간도 없이 Task B를 실행해버리면 에러가 발생할 것 입니다. 왜냐햐면 Task A에서 이미지를 완전히 가져온 상태가 아니기 때문이죠.</p>
-
-<pre class="notranslate">  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>이번 예시에선 Task D가 Task B와 Task C의 결과를 모두 사용한다고 가정합니다. Task B와 Task C가 동시에 아주 빠르게 결과를 반환하면 매우 이상적이겠지만, 현실은 그렇지 않습니다. Task D가 사용될 때 Task B, Task C 둘 중 어느 값이라도 입력이 되지 않을경우 에러가 발생합니다.</p>
-
-<p>이러한 문제를 해결하기 위해 브라우저를 통해 특정 작업을 비동기적으로 실행할 수 있습니다. 바로 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 를 사용하는것 입니다. 아래 예시처럼 Task A가 서버에서 이미지를 가져오는 동안 Task B를 기다리게 할 수 있습니다. :</p>
-
-<pre class="notranslate">Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>위의 작업은 다른 곳에서 처리가 되므로, 비동기 작업이 진행되는 동안 main thread가 차단되지 않습니다.</p>
-
-<p>이번 문서에서 다룬 내용은 매우 중요한 내용입니다. 다음 문서에선 비동기 코드를 어떻게 쓸 수 있는지 살펴볼 계획이므로 끝까지 읽어주시면 좋겠습니다.</p>
-
-<h2 id="결론">결론</h2>
-
-<p>현대의 소프트웨어 설계는 프로그램이 한 번에 두 가지 이상의 일을 할 수 있도록 비동기 프로그래밍을 중심으로 돌아가고 있습니다. 보다 새롭고 강력한 API를 이용하면서, 비동기로 작업해야만 하는 사례가 많아질 것입니다. 예전에는 비동기 코드를 쓰기가 힘들었습니다. 여전히 아직 어렵지만, 훨씬 쉬워졌습니다. 이 모듈의 나머지 부분에서는 비동기 코드가 왜 중요한지, 위에서 설명한 일부 문제들을 방지하는 코드 설계 방법에 대해 자세히 알아봅시다.</p>
-
-<h2 id="이번_module_에서는..">이번 module 에서는..</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">일반적인 비동기 프로그래밍 개념</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">비동기 자바스크립트 소개</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">협동하는 비동기 자바스크립트: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Promises와 함께하는 우아한 비동기 프로그래밍</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">비동기 프로그래밍을 쉽게 만드는 방법: async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">올바른 접근 방식 선택하기</a></li>
-</ul>
diff --git a/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 378f0a5f55..0000000000
--- a/files/ko/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,598 +0,0 @@
----
-title: 'Cooperative asynchronous JavaScript: Timeouts and intervals'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">이 장에서는 자바스크립트가 설정된 시간이 경과하거나 혹은 정해진 시간 간격(예 : 초당 설정된 횟수)으로 비동기 코드를 작동하는 전형적인 방법을 살펴본다. 그리고 이 방법들이 어떤 것에 유용한지 얘기해 보고, 그 본질적인 문제에 대해 살펴본다.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introduction">Introduction</h2>
-
-<p>오랜 시간 동안 웹플랫폼은 자바스크립트 프로그래머가 일정한 시간이 흐른 뒤에 비동기적 코드를 실행할 수 있게하는 다양한 함수들을 제공해 왔다. 그리고 프로그래머가 중지시킬 때까지 코드 블록을 반복적으로 실행하기 위한 다음과 같은 함수들이 있다.</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>특정 시간이 경과한 뒤에 특정 코드블록을 한번 실행한다.</dd>
- <dt></dt>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>각각의 호출 간에 일정한 시간 간격으로 특정 코드블록을 반복적으로 실행한다.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>setInterval()의 최신 버전; 그 코드가 실행되는 환경에 관계없이 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.</dd>
-</dl>
-
-<p>이 함수들에 의해 설정된 비동기 코드는 메인 스레드에서 작동한다. 그러나 프로세서가 이러한 작업을 얼마나 많이 수행하는지에 따라, 코드가 반복되는 중간에 다른 코드를 어느 정도 효율적으로 실행할 수 있다. 어쨌든 이러한 함수들은 웹사이트나 응용 프로그램에서 일정한 애니메이션 및 기타 배경 처리를 실행하는 데 사용된다. 다음 섹션에서는 그것들을 어떻게 사용할 수 있는지 보여줄 것이다.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>앞에서 언급했듯이 setTimeout ()은 지정된 시간이 경과 한 후 특정 코드 블록을 한 번 실행한다. 그리고 다음과 같은 파라미터가 필요하다.:</p>
-
-<ul>
- <li>실행할 함수 또는 다른 곳에 정의 된 함수 참조.</li>
- <li>코드를 실행하기 전에 대기 할 밀리세컨드 단위의 시간 간격 (1000밀리세컨드는 1 초)을 나타내는 숫자. 값을 0으로 지정하면(혹은 이 값을 모두 생략하면) 함수가 즉시 실행된다. 왜 이 파라미터를 수행해야 하는지도 좀 더살펴 볼 것이다. </li>
- <li>함수가 실행될 때 함수에 전달해야할 파라미터를 나타내는 0이상의 값.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 타임아웃 콜백은 단독으로 실행되지 않기 때문에 지정된 시간이 지난 그 시점에 정확히  콜백 될 것이라는 보장은 없다. 그보다는 최소한 그 정도의 시간이 지난 후에 호출된다. 메인 스레드가 실행해야 할 핸들러를 찾기 위해 이런 핸들러들을 살펴보는 시점에 도달할 때까지 타임아웃 핸들러를 실행할 수 없다.</p>
-</div>
-
-<p>아래 예제에서 브라우저는 2초가 지나면 익명의 함수를 실행하고 경보 메시지를 띄울 것이다. (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>지정한 함수가 꼭 익명일 필요는 없다. 함수에 이름을 부여 할 수 있고, 다른 곳에서 함수를 정의하고 setTimeout ()에 참조(reference)를 전달할 수도 있다. 아래 코드는 위의 코드와 같은 실행 결과를 얻을 수 있다. </p>
-
-<pre class="brush: js">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>예를 들자면 timeout 함수와 이벤트에 의해 중복 호출되는 함수를 사용하려면 이 방법이 유용할 수 있다. 이 방법은 코드라인을 깔끔하게  정리하는 데 도움을 준다. 특히 timeout 콜백의 코드라인이 여러 줄이라면 더욱 그렇다.  </p>
-
-<p>setTimeout ()은 나중에 타임아웃을 할 경우에 타임아웃을 참조하는데 사용하는 식별자 값을 리턴한다.  그 방법을 알아 보려면 아래{{anch("Clearing timeouts")}}을 참조하세요.</p>
-
-<h3 id="setTimeout_함수에_매개변수parameter_전달">setTimeout () 함수에 매개변수(parameter) 전달</h3>
-
-<p>setTimeout () 내에서 실행되는 함수에 전달하려는 모든 매개변수는 setTimeout () 매개변수 목록 끝에 추가하여 전달해야 한다. 아래 예제처럼, 이전 함수를 리팩터링하여 전달된 매개변수의 사람 이름이 추가된 문장을 표시할 수 있다.</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert('Hello ' + who + '!');
-}</pre>
-
-<p>Say hello의 대상이 되는 사람이름은 <code>setTimeout()의 세번째 매개변수로 함수에 전달된다.</code></p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="timeout_취소">timeout 취소</h3>
-
-<p>마지막으로 타임아웃이 생성되면(setTimeout()이 실행되면) 특정시간이 경과하기 전에 <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>을 호출하여 타임아웃을 취소할 수 있다.  <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>은  <code>setTimeout()</code>콜의 식별자를 매개변수로  <code>setTimeout()</code>에 전달한다. 위 예제의 타임아웃을 취소하려면 아래와 같이 하면 된다.</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 인사를 할 사람의 이름을 설정하고 별도의 버튼을 사용하여 인사말을 취소 할 수있는 약간 더 복잡한 폼양식 예제인  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 을 참조하세요.</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p>setTimeout ()은 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 그러나 애니메이션의 경우와 같이 코드를 반복해서 실행해야 할 경우 어떨까요?</p>
-
-<p>이럴 경우에 setInterval ()이 필요합니다. setInterval ()은 setTimeout ()과 매우 유사한 방식으로 작동합니다. 다만 setTimeout ()처럼 첫 번째 매개 변수(함수)가 타임아웃 후에 한번 실행되는게 아니라 두 번째 매개 변수에 주어진 시간까지 반복적으로 실행되는 것이 차이점입니다.  setInterval() 호출의 후속 파라미터로 실행 중인 함수에 필요한 파라미터를 전달할 수도 있다.</p>
-
-<p>예를 들어 봅시다. 다음 함수는 새 Date() 객체를 생성한 후에 ToLocaleTimeString()을 사용하여 시간데이터를 문자열로 추출한 다음 UI에 표시합니다. 그리고 setInterval()을 사용하여 초당 한 번 함수(displayTime)를 실행하면 초당 한 번 업데이트되는 디지털 시계와 같은 효과를 만들어냅니다.(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>): </p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>setTimeout()과 같이 setInterval()도 식별자 값을 리턴하여 나중에 interval을 취소해야 할 때 사용한다.</p>
-
-<h3 id="interval_취소">interval 취소</h3>
-
-<p>setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 이 상태를 중지하는 방법이 필요합니다. 그렇지 않으면 브라우저가 추가 작업을 완료 할 수 없거나, 현재 처리 중인 애니메이션이 완료되었을 때 오류가 발생할 수 있습니다. setTimeout()과 같은 방식으로 setInterval () 호출에 의해 반환 된 식별자를 clearInterval () 함수에 전달하여 이 작업을 취소할수 있습니다.</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="능동학습_자신만의_스톱워치를_만들기.">능동학습 : 자신만의 스톱워치를 만들기.</h4>
-
-<p>위에서 모두 설명해 드렸으니, 과제를 드리겠습니다. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a> 예제를 수정하여 자신만의 간단한 스톱워치를 만들어 보세요.</p>
-
-<p>위에서 설명(디지털 시계)한 것처럼 시간을 표시해야 하고, 이 예제에서는 아래 기능을 추가하세요.</p>
-
-<ul>
- <li>스톱워치를 실행시키는 "Start" 버튼. </li>
- <li>일시정지나 종료시키는 "Stop" 버튼.</li>
- <li>시간을 0으로 설정하는 "Reset" 버튼.</li>
- <li>실제 시간을 표시하지 말고 경과된 시간을 초단위로 표시..</li>
-</ul>
-
-<p>몇가지 힌트를 드립니다.</p>
-
-<ul>
- <li>버튼 마크업은 여러분이 원하는 대로 구성하고 스타일링 하세요. 자바스크립트 버튼 레퍼런스를 가져올 수 있는 후크를 포함한 semantic HTML을 사용하세요.</li>
- <li> 0에서 시작하여 상수 루프를 이용하여 1 초 단위로 증가하는 변수를 작성해 보세요.</li>
- <li>앞서 설명한 Date () 객체를 사용하지 않고 이 예제를 작성하는 것이 더 쉽지만 정확도는 떨어집니다. 정확히 1000ms 후에 콜백이 시작된다고 보장 할 수는 없기 때문입니다. 보다 정확한 방법은 startTime = Date.now ()를 실행하여 사용자가 시작 버튼을 클릭했을 때 정확한 timestamp을 얻은 다음 Date.now ()-startTime을 실행하여 시간(milliseconds)을 얻어 냅니다.</li>
- <li>시, 분, 초 단위의 시간을 별도의 변수를 통해 계산한 다음 각 루프 반복 후에 문자열로 함께 표시해 보세요. 두 번째 카운터에서 하나씩 해결할 수 있습니다.</li>
- <li>어떻게 계산할 것인지 생각해 봅시다.
-  <ul>
-   <li>1시간은 3600초 입니다.</li>
-   <li>분단위 시간은 시간을 60으로 나눈 값에서 시간단위를 제거한 값입니다. 그리고 초단위 시간은 그 값에서 분단위 시간을 제거한 값입니다(예 :3700초를 60초로 나누면 3600초(시단위) + 100초(분단위), 분단위를 다시 60으로 나누면 60초(분단위) + 40초(초단위))</li>
-  </ul>
- </li>
- <li>시간값이 10밀리세컨드이하면 화면의 시간을 0으로 표시하세요. 더 일반적인 시계처럼 보일 겁니다.</li>
- <li>스톱워치를 정지시키기 위해 interval을 취소해 보세요. 스톱워치를 리셋하기 위해 시간 카운터를 0으로 설정하고, interval을 취소한 후에 화면을 즉시 업데이트 하세요.</li>
- <li>스타트 버튼이 클릭되면 버튼을 즉시 비활성화 시키고 스톱/리셋버튼이 클릭되면 다시 활성화해 보세요. 그렇지 않고 스타트 버튼이 여러번 클릭되면 setInterval()이 중복 실행되어서 실행 오류가 발생할 수 있습니다.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="setTimeout과_setInterval에서_주의해야할_것_들">setTimeout()과 setInterval()에서 주의해야할 것 들</h2>
-
-<p>setTimeout()과 setInterval()에는 몇가지 주의해야 할 것들이 있습니다. 어떤 것인지 한번 살펴보겠습니다.</p>
-
-<h3 id="순환_timeouts">순환 timeouts</h3>
-
-<p>setTimeout()을 사용하는 또 다른 방법입니다. 바로 setInterval()을 사용하는 대신 setTimeout()을 이용해 같은코드를 반복적으로 실행시키는 방법입니다.</p>
-
-<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every 100 milliseconds: 아래 예제에서는 setTimeout()이 주어진 함수를 100밀리세컨드마다 실행합니다.</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>위 예제를 아래 예제와 비교해 보세요. 아래 예제는 setInterval()을 사용하여 같은 결과를 얻을 수 있습니다.</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="그렇다면_순환_setTimeout과_setInterval은_어떻게_다를까요">그렇다면 순환 setTimeout()과 setInterval()은 어떻게 다를까요?</h4>
-
-<p>두 방법의 차이는 미묘합니다.</p>
-
-<ul>
- <li>순환 setTimeout ()은 실행과 실행 사이에 동일한 지연을 보장합니다.  위의 경우 100ms입니다. 코드가 실행 된 후 다시 실행되기 전에 100 ms 동안 대기하므로 간격은 코드 실행 시간에 관계없이 동일합니다.</li>
- <li>setInterval ()을 사용하는 예제는 약간 다르게 작동합니다. 설정된 간격에는 실행하려는 코드를 실행하는 데 걸리는 시간이 포함됩니다. 코드를 실행하는 데 40ms가 걸리다면 간격이 60ms에 불과합니다.</li>
- <li>setTimeout ()을 재귀적으로 사용할 때 각 반복은 다음 반복을 실행하기 전에 또 하나의 대기시간을 설정합니다. 즉, setTimeout ()의 두 번째 매개 변수의 값은 코드를 다시 실행하기 전에 대기 할 또 하나의 시간을 지정합니다.</li>
-</ul>
-
-<p>코드가 지정한 시간 간격보다 실행 시간이 오래 걸리면 순환 setTimeout ()을 사용하는 것이 좋습니다. 이렇게하면 코드 실행 시간에 관계없이 실행 간격이 일정하게 유지되어 오류가 발생하지 않습니다.</p>
-
-<h3 id="즉시_timeouts">즉시 timeouts</h3>
-
-<p>setTimeout()의 값으로 0을 사용하면 메인 코드 스레드가 실행된 후에 가능한 한 빨리 지정된 콜백 함수의 실행을 예약할 수 있다.</p>
-
-<p>예를 들어 아래 코드 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 는 "Hello"가 포함된 alert를 출력 한 다음 첫 번째 경고에서 OK를 클릭하자마자 "World"가 포함된 alert를 출력합니다.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>이것은 모든 메인 스레드의 실행이 완료되자마자 실행되도록 코드 블록을 설정하려는 경우 유용할 할 수 있습니다. 비동기 이벤트 루프에 배치하면 곧바로 실행될 겁니다.</p>
-
-<h3 id="clearTimeout_와_clearInterval의_취소기능">clearTimeout() 와 clearInterval()의 취소기능</h3>
-
-<p>clearTimeout ()과 clearInterval ()은 모두 동일한 entry를 사용하여 대상 메소드(setTimeout () 또는 setInterval ())을 취소합니다. 흥미롭게도 이는 setTimeout () 또는 setInterval ()을 지우는 데 clearTimeout ()과 clearInterval ()메소드 어느 것을 사용해도 무방합니다.</p>
-
-<p>그러나 일관성을 유지하려면 clearTimeout ()을 사용하여 setTimeout () 항목을 지우고 clearInterval ()을 사용하여 setInterval () 항목을 지우십시오. 혼란을 피하는 데 도움이됩니다.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p>requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. 근본적으로 setInterval ()의 최신 버전입니다. 브라우저가 다음에 디스플레이를 다시 표시하기 전에 지정된 코드 블록을 실행하여 애니메이션이 실행되는 환경에 관계없이 적절한 프레임 속도로 실행될 수 있도록합니다.</p>
-
-<p>setInterval ()을 사용함에 있어 알려진 문제점을 개선하기위해 만들어졌습니다. 예를 들어 장치에 최적화 된 프레임 속도로 실행되지 않는 문제,  때로는 프레임을 빠뜨리는 문제,  탭이 활성 탭이 아니거나 애니메이션이 페이지를 벗어난 경우에도 계속 실행되는 문제 등등이다 . <a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS에서 이에 대해 자세히 알아보십시오.</a></p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: requestAnimationFrame() 사용에 관한 예제들은 이 코스의 여러곳에서 찾아볼 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a> 와 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a> 의 예제를 찾아 보세요.</p>
-</div>
-
-<p>이 메소드는 화면을 다시 표시하기 전에 호출 할 콜백을 인수로 사용합니다. 이것이 일반적인 패턴입니다. 아래는 사용예를 보여줍니다.</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>그 발상은 애니메이션을 업데이트하는 함수 (예 : 스프라이트 이동, 스코어 업데이트, 데이터 새로 고침 등)를 정의한 후 그것을 호출하여 프로세스를 시작하는 것입니다. 함수 블록의 끝에서 매개 변수로 전달 된 함수 참조를 사용하여 requestAnimationFrame ()을 호출하면 브라우저가 다음 화면을 재표시할 때 함수를 다시 호출하도록 지시합니다. 그런 다음 requestAnimationFrame ()을 반복적으로 호출하므로 계속 실행되는 것입니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 어떤 간단한  DOM 애니메이션을 수행하려는 경우,   <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> 은 JavaScript가 아닌 브라우저의 내부 코드로 직접 계산되므로 속도가 더 빠릅니다. 그러나 더 복잡한 작업을 수행하고 DOM 내에서 직접 액세스 할 수 없는 객체(예 :<a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects)를 포함하는 경우 대부분의 경우 requestAnimationFrame ()이 더 나은 옵션입니다. </p>
-</div>
-
-<h3 id="여러분의_애니메이션의_작동속도는_얼마나_빠른가요">여러분의 애니메이션의 작동속도는 얼마나 빠른가요?</h3>
-
-<p>부드러운 애니메이션을 구현은 직접적으로 프레임 속도에 달려 있으며, 프레임속도는 초당 프레임 (fps)으로 측정됩니다. 이 숫자가 높을수록 애니메이션이 더 매끄럽게 보입니다.</p>
-
-<p>일반적으로 화면 재생률는 60Hz이므로 웹 브라우저를 사용할 때 여러분이 설정할 수 있는 가장 빠른 프레임 속도는 초당 60 프레임 (FPS)입니다. 이 속도보다 빠르게 설정하면 과도한 연산이 실행되어 화면이 더듬거리고 띄엄띄엄 표시될 수 있다. 이런 현상을 프레임 손실 또는 쟁크라고 한다. </p>
-
-<p>재생률 60Hz의 모니터에 60FPS를 달성하려는 경우 각 프레임을 렌더링하기 위해 애니메이션 코드를 실행하려면 약 16.7ms(1000/60)가 필요합니다. 그러므로 각 애니메이션 루프를 통과 할 때마다 실행하려고 하는 코드의 양을 염두에 두어야합니다.</p>
-
-<p>requestAnimationFrame()은 불가능한 경우에도 가능한한 60FPS 값에 가까워 지려고 노력합니다. 실제로 복잡한 애니메이션을 느린 컴퓨터에서 실행하는 경우 프레임 속도가 떨어집니다. requestAnimationFrame ()은 항상 사용 가능한 것을 최대한 활용합니다.</p>
-
-<h3 id="requestAnimationFrame이_setInterval_setTimeout과_다른점은">requestAnimationFrame()이 setInterval(), setTimeout()과 다른점은?</h3>
-
-<p>requestAnimationFrame () 메소드가 이전에 살펴본 다른 메소드와 어떻게 다른지에 대해 조금 더 이야기하겠습니다. 위의 코드를 다시 살펴보면;</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>setInterval()을 사용하여 위와 같은 작업을 하는 방법을 살펴봅시다.</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>앞에서언급했듯이 requestAnimationFrame ()은 시간 간격을 지정하지 않습니다. requestAnimationFrame ()은 현재 상황에서 최대한 빠르고 원활하게 실행됩니다. 어떤 이유로 애니메이션이 화면에 표시되지 않으면 브라우저는 그 애니메이션을 실행하는 데 시간을 낭비하지 않습니다.</p>
-
-<p>반면에 setInterval ()은 특정 시간간격을 필요로 합니다. 1000 ms/60Hz 계산을 통해 최종값 16.6에 도달 한 후 반올림(17)했습니다. 이때 반올림하는 것이 좋습니다. 그 이유는 반내림(16)을하면 60fps보다 빠르게 애니메이션을 실행하려고 하게 되지만 애니메이션의 부드러움에 아무런 영향을 미치지 않기 때문입니다. 앞에서 언급했듯이 60Hz가 표준 재생률입니다.</p>
-
-<h3 id="timestamp를_포함하기">timestamp를 포함하기</h3>
-
-<p>requestAnimationFrame() 함수에 전달 된 실제 콜백에는 requestAnimationFrame()이 실행되기 시작한 이후의 시간을 나타내는 timestamp를  매개변수로 제공할 수 있습니다. 장치 속도에 관계없이 특정 시간과 일정한 속도로 작업을 수행할 수 있으므로 유용합니다. 사용하는 일반적인 패턴은 다음과 같습니다.</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="브라우저_지원">브라우저 지원</h3>
-
-<p>requestAnimationFrame()은 setInterval() / setTimeout()보다 좀 더 최신 브라우저에서 지원됩니다. 가장 흥미롭게도 Internet Explorer 10 이상에서 사용할 수 있습니다. 따라서 별도의 코드로 이전 버전의 IE를 지원해야할 필요가 없다면, requestAnimationFrame()을 사용하지 않을 이유가 없습니다.</p>
-
-<h3 id="간단한_예">간단한 예</h3>
-
-<p>지금까지 이론적으로는 충분히 살펴보았습니다. 그러면 직접 requestAnimationFrame() 예제를 작성해 봅시다. 우리는 간단한 "스피너 애니메이션"을 만들 것입니다. 여러분들이 앱 사용중 서버 과부하일 때 이것을 자주 보았을 겁니다.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 실제로는 CSS 애니메이션을 사용하여 이러한 종류의 간단한 애니메이션을 실행해야 합니다. 그러나 이러한 종류의 예제는 requestAnimationFrame() 사용법을 보여주는 데 매우 유용하며, 각 프레임에서 게임의 디스플레이를 업데이트하는 것과 같이 좀 더 복잡한 작업을 수행 할 때 이러한 종류의 기술을 사용하는 것이 좋습니다.</p>
-</div>
-
-<ol>
- <li>
-  <p>먼저 HTML 템플릿을 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">여기</a>에서.가져옵니다.</p>
- </li>
- <li>
-  <p>&lt;body&gt;안에 빈 &lt;div&gt; 요소를 삽입합니다. 그리고  ↻캐릭터를 그 안에 추가합니다. 이 예제에서 이 원형 화살표가 회전하게됩니다.</p>
- </li>
- <li>
-  <p>아래 CSS를 HTML 템플릿에 여러분이 원하는 방식으로 적용하세요. 이 CSS는 페이지 배경을 빨간색으로, &lt;body&gt;의 height를 html height의 100%로 설정합니다. 그리고 &lt;div&gt;를 수직, 수평으로 &lt;body&gt; 중앙에 위치 시킵니다.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>&lt;/body&gt; 태크 위에 &lt;script&gt;를 추가하세요.</p>
- </li>
- <li>
-  <p>&lt;script&gt; 안에 아래 자바스크립트 코드를 추가하세요. 여기에서 &lt;div&gt;의 참조를 상수로 저장하고, rotateCount 변수를 0으로 설정하고, 나중에 requestAnimationFrame()의 시작 시간을 저장할 startTime 변수를 null로 설정하고, 그리고 requestAnimationFrame() 콜의 참조를 저장할 초기화하지 않은 rAF 변수를 선언합니다.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>그 아래에 draw() 함수를 추가합니다. 이 함수는 timestamp 매개변수를 포함하는 애니메이션 코드 작성에 사용됩니다.</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>draw() 함수안데 다음 코드를 추가합니다. if 조건문으로 startTime이 정의되지 않았다면 startTime을 정의합니다 (루프 반복의 첫번째에만 작동합니다).  그리고 스피너를 회전시키는 rotateCount 변수값을 설정합니다(현재 timestamp는 시작 timestamp를 3으로 나눈 것이라서 그리 빠르지 않습니다).</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>draw() 함수 안의 이전 코드 아래에 다음 블록을 추가합니다. 이렇게하면 rotateCount 값이 359보다 큰지 확인합니다 (예 : 360, 완전한 원). 그렇다면 값을 모듈러 360 (즉, 값을 360으로 나눌 때 남은 나머지)으로 설정하여 원 애니메이션이 합리적인 낮은 값으로 중단없이 계속 될 수 있습니다. 꼭 이렇게 해야되는 것은 아니지만 "128000도" 같은 값보다는 0~359 도의 값으로 작업하는 것이 더 쉽습니다.</p>
-
-  <pre class="brush: js">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>다음으로 아래 코드를 추가하세요. 실제 스피너를 회전시키는 코드입니다.
-  <pre class="brush: js">spinner.style.transform = 'rotate(' + rotateCount + 'deg)';</pre>
- </li>
- <li>
-  <p> draw() 함수 제일 아래에 다음 코드를 추가합니다. 이 코드는 모든 작업의 키 포인트입니다. draw() 함수를 매개변수로 가져오는 requestAnimationFrame() 콜을 저장하기 위해 앞에서 정의한  rAF 변수를 설정합니다. 이 코드는 애니메이션을 실행시키고, 가능한한 60fps에 근사하게 draw() 함수를 계속 실행합니다.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
-</div>
-
-<h3 id="requestAnimationFrame_call의_취소">requestAnimationFrame() call의 취소</h3>
-
-<p>cancelAnimationFrame() 메소드를 호출하여 requestAnimationFrame()을 취소할 수 있다. (접두어가 "clear"가 아니고 "cancel"임에 유의) requestAnimationFrame()에 의해서 리턴된 rAF 변수값을 전달받아 취소한다. </p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible, but what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem for example in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example we have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation; if we showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. We therefore throttled the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So we are only cycling a sprite once every 13 animation frames. OK, so it's actually about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js">if(posX &gt; width/2) {
-  newStartPos = -((width/2) + 102);
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that works out how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For example, in our spinner example we could make it appear to move slower by only increasing our <code>rotateCount</code> by one on each frame instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For our final section of this article, we'll create a 2-player reaction game. Here we have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying "PLAYERS GO!!" — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this.</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> — this contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. We just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables we'll need in the rest of the code:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to our spinner, so we can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count — how much we want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time — will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. This simply takes two numerical inputs and returns a random number between the two. We'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add in the <code>draw()</code> function, which animates the spinner. This is very similar to the version seen in the simple spinner example we looked at earlier:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>We'll also define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>OK, enough preparation.  Let's make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so we can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. We also add an event listener to our button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: You'll see that in this example we are calling <code>setTimeout()</code> without storing the return value (so not <code>let myTimeout = setTimeout(functionName, interval)</code>). This works and is fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier.</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are then asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which we should define next.</p>
- </li>
- <li>
-  <p>So add the following function to your code next:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First we cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next we display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>We then attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to our document — when any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, we include the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and we can use this to respond to specific key presses with specific actions.</li>
-   <li>We first log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", we display a message to say that Player 1 won, and when <code>e.key</code> is "l", we display a message to say Player 2 won. Note that this will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key.</li>
-   <li>Regardless of which one of the player control keys was pressed, we remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. We also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as we explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it, you're all done.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them — since these still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index b1d7aa2343..3363b351ae 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -391,9 +391,13 @@
 /pt-BR/docs/Learn/Common_questions/Que_software_eu_preciso	/pt-BR/docs/Learn/Common_questions/What_software_do_I_need
 /pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador	/pt-BR/docs/Learn/Common_questions/What_are_browser_developer_tools
 /pt-BR/docs/Learn/Common_questions/o_que_e_um_web_server	/pt-BR/docs/Learn/Common_questions/What_is_a_web_server
-/pt-BR/docs/Learn/JavaScript/Asynchronous/Conceitos	/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts
-/pt-BR/docs/Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta	/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Async_await	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Conceitos	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous
 /pt-BR/docs/Learn/JavaScript/Asynchronous/Introdução	/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing
+/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/pt-BR/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas	/pt-BR/docs/Learn/JavaScript/First_steps/Silly_story_generator
 /pt-BR/docs/Learn/JavaScript/First_steps/Matematica	/pt-BR/docs/Learn/JavaScript/First_steps/Math
 /pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript	/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index 5b2ed45493..c050bf05f2 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -2036,19 +2036,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Choosing_the_right_approach": {
-    "modified": "2020-10-15T22:33:23.228Z",
-    "contributors": [
-      "manoelbjr"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-10-06T09:57:59.299Z",
-    "contributors": [
-      "joseluizmonteirojr",
-      "bellammuniz"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-07-16T22:33:17.985Z",
     "contributors": [
@@ -2062,13 +2049,6 @@
       "luan0ap"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-07-16T22:33:21.635Z",
-    "contributors": [
-      "vbarcellos",
-      "bellammuniz"
-    ]
-  },
   "Learn/JavaScript/Building_blocks": {
     "modified": "2020-07-16T22:31:10.224Z",
     "contributors": [
@@ -16274,6 +16254,26 @@
       "LeonardoPacheco"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-10-15T22:33:23.228Z",
+    "contributors": [
+      "manoelbjr"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-10-06T09:57:59.299Z",
+    "contributors": [
+      "joseluizmonteirojr",
+      "bellammuniz"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df": {
+    "modified": "2020-07-16T22:33:21.635Z",
+    "contributors": [
+      "vbarcellos",
+      "bellammuniz"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2020-06-07T23:51:22.220Z",
     "contributors": [
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..e1ffe62fbe
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,524 @@
+---
+title: Escolhendo a abordagem correta
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
+
+<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Code_example">Code example</h3>
+
+<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="Pitfalls">Pitfalls</h3>
+
+<ul>
+ <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
+ <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
+ <li>Async callbacks just aren't very graceful.</li>
+ <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
+ <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
+</ul>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
+
+<h3 id="Further_information">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_2">Code example</h3>
+
+<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="Pitfalls_2">Pitfalls</h3>
+
+<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
+ <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Browser_compatibility_2">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="Further_information_2">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_3">Code example</h3>
+
+<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="Pitfalls_3">Pitfalls</h3>
+
+<ul>
+ <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_3">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="Further_information_3">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_4">Code example</h3>
+
+<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
+
+<pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+    if(!startTime) {
+        startTime = timestamp;
+    }
+
+    rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+        rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Pitfalls_4">Pitfalls</h3>
+
+<ul>
+ <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_4">Browser compatibility</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="Further_information_4">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_5">Code example</h3>
+
+<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="Pitfalls_5">Pitfalls</h3>
+
+<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>or even:</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
+
+<h3 id="Browser_compatibility_5">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="Further_information_5">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_6">Code example</h3>
+
+<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="Pitfalls_6">Pitfalls</h3>
+
+<ul>
+ <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
+</ul>
+
+<h3 id="Browser_compatibility_6">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="Further_information_6">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_7">Code example</h3>
+
+<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="Pitfalls_7">Pitfalls</h3>
+
+<ul>
+ <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
+ <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
+</ul>
+
+<h3 id="Browser_compatibility_7">Browser compatibility</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="Further_information_7">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..1d472307c8
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,156 @@
+---
+title: Conceitos gerais da programação assíncrona
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Assíncrono">Assíncrono?</h2>
+
+<p>Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.</p>
+
+<p>Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da <strong>programação assincrona</strong>. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.</p>
+
+<h2 id="Bloqueio_de_código">Bloqueio de código</h2>
+
+<p>Técnicas <strong>async</strong> (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de <strong>blocking</strong>; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.</p>
+
+<p>Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.</p>
+
+<p>No nosso exemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">veja aqui</a>), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:</p>
+
+<pre class="brush: js notranslate">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.</p>
+</div>
+
+<p>No nosso segundo exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">veja aqui</a>), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:</p>
+
+<ul>
+ <li>Um botão "Fill canvas" que quando for clicado renderiza 1 milhão de círculos azuis no elemento {{htmlelement("canvas")}} .</li>
+ <li>Um botão "Clique-me" que mostra um alerta quando clicado.</li>
+</ul>
+
+<pre class="brush: js notranslate">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.</p>
+</div>
+
+<p>E por quê isso acontece? A resposta é que o JavaScript é <strong>single threaded</strong>. E é neste ponto que precisamos introduzir a você o conceito de <strong>threads</strong>.</p>
+
+<h2 id="Threads">Threads</h2>
+
+<p>Uma <strong>thread</strong> é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:</p>
+
+<pre class="notranslate">Tarefa A --&gt; Tarefa B --&gt; Tarefa C</pre>
+
+<p>Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.</p>
+
+<p>Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:</p>
+
+<pre class="notranslate">Thread 1: Tarefa A --&gt; Tarefa B
+Thread 2: Tarefa C --&gt; Tarefa D</pre>
+
+<h3 id="JavaScript_é_single_threaded">JavaScript é single threaded</h3>
+
+<p>JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de <strong>main thread</strong> (thread principal). Nosso exemplo de cima é executado assim:</p>
+
+<pre class="notranslate">Main thread: Renderizar circulos no canvas --&gt; Mostrar alert()</pre>
+
+<p>Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.</p>
+
+<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa C
+Worker thread: Tarefa pesada B</pre>
+
+<p>Com isso em mente, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">veja aqui</a>), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma thread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira operação não bloqueia a segunda.</p>
+
+<h2 id="Código_assíncrono">Código assíncrono</h2>
+
+<p>Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.</p>
+
+<p>O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:</p>
+
+<pre class="notranslate">Main thread: Tarefa A --&gt; Tarefa B</pre>
+
+<p>Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.</p>
+
+<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa B --&gt; |Tarefa D|
+Worker thread: Tarefa C ---------------&gt; |      |</pre>
+
+<p>Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.</p>
+
+<p>Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: </p>
+
+<pre class="notranslate">Main thread: Tarefa A                   Tarefa B
+    Promise:       |___operação async___|</pre>
+
+<p>Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.</p>
+
+<p>Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.</p>
+
+<h2 id="Conclusão">Conclusão</h2>
+
+<p>O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.</p>
+
+<h2 id="Nesse_módulo">Nesse módulo</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introduzindo o JavaScript assíncrono</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Código elegante usando as Promises</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Facilitando a programação async com async e await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem certa</a></li>
+</ul>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..04a2b90ba4
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,556 @@
+---
+title: Tornando mais fácil a programação assíncrona com async e await
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Adições mais recentes à linguagem JavaScript são as <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">funções assíncronas</a> e a palavra-chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></code>, adicionadas no ECMAScript 2017. Esses recursos atuam basicamente como um syntactic sugar em cima de promises, tornando o código assíncrono mais fácil de escrever e ler. Isso faz com que o código assíncrono pareça mais com o código síncrono old-school, então vale a pena aprender. Este artigo fornece o que você precisa saber.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Conhecimento básico de informática, uma compreensão razoável dos fundamentos do JavaScript, uma compreensão de código assíncrono em geral e promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender o uso do async/await.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="O_basico_de_async_await">O básico de async/await</h2>
+
+<div><p>Existem duas formas de usar async/await no seu código.</p></div>
+
+<h3 id="A_palavra_chave_async">A palavra-chave async</h3>
+
+<div><p>Em primeiro lugar, temos a palavra-chave <code>async</code>, que você coloca antes de uma declaração de função para transformá-la em uma função assíncrona. Uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">função assíncrona</a> é uma função que espera a possibilidade de a palavra-chave await ser usada para invocar código assíncrono.</p>
+
+  <p>Experimente digitar as seguintes linhas no console JS do seu navegador.</p>
+
+  <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>A funcão retorna "Hello" — nada de especial, certo?</p>
+
+    <p>Mas o que acontece se transformar-mos isso em uma função assíncrona? Tente o seguinte:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Ah. A invocação da função agora retorna uma promise. Isso é uma das características das funções assíncronas — seus valores de retorno são garantidos para serem convertidos em promises.</p>
+
+    <p>Você também pode criar uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">expressão de função assíncrona</a>, assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
+      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>E você pode usar arrow functions:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Tudo isso faz basicamente a mesma coisa.</p>
+
+    <p>Para consumir o valor retornado quando a promise é finalizada, desde que esteja retornando uma promise, podemos usar um bloco <code>.then()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>ou mesmo de forma simplificada</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
+
+    <p>Como vimos no último artigo.</p>
+
+    <p>Então a palavra-chave <code>async</code> é adicionada nas funções para dizer a elas para retornar uma promise ao invés de diretamente retornar uma valor.</p>
+  </div>
+
+  <h3 id="A_palavra_chave_await">A palavra-chave await</h3>
+
+  <div>
+    <p>A vantagem de uma função assíncrona só se torna aparente quando você a combina com a palavra-chave <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a>. <code>await</code> só funciona dentro de funções assíncronas no código JavaScript regular, no entanto, pode ser usado por conta própria com <a href="/pt-BR/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
+
+    <p><code>await</code> pode ser colocado na frente de qualquer função assíncrona baseada em promise para pausar seu código nessa linha até que a promise seja resolvida e, em seguida, retornar o valor resultante.</p>
+
+    <p>Você pode usar <code>await</code> quando chamar qualquer função que retorne uma Promise, incluindo funções de API web.</p>
+
+    <p>Aqui está um exemplo comum:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Com certeza, o exemplo acima não é muito útil, porém serve para ilustrar a sintaxe. Vamos seguir em frente e ver um exemplo real.</p>
+  </div>
+
+  <h2 id="Reescrevendo_codigo_baseado_em_promises_com_asyncawait">Reescrevendo código baseado em promises com async/await</a></h2>
+
+  <div>
+    <p>Vejamos um exemplo simples de busca que vimos no artigo anterior:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Por enquanto, você precisa ter um entendimento razoável das promises e como elas funcionam, mas vamos converter isso para usar async/await e ver o quão simples as coisas se tornam:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Isto faz o código muito mais simples and fácil de entender — sem mais blocos <code>.then()</code> em todo lugar!</p>
+
+    <p>Visto que a palavra-chave <code>async</code> transforma a funcão em uma promise, você pode refatorar seu código para usar uma abordagem de promises e await, trazendo a segunda metade da funcão para um novo bloco e torná-la mais flexível:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Você pode tentar fazer o exemplo sozinho, ou rodar o nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
+  </div>
+
+  <h3 id="but_how_does_it_work">Mas como isso funciona?</h3>
+
+  <div>
+    <p>Você notará que empacotamos o código dentro de uma função, e incluímos a palavra-chave <code>async</code> antes da palavra-chave<code>function</code>. Isso é necessário — você tem que criar uma função assíncrona para definir o bloco de código no qual você executará seu código assíncrono; como falamos mais cedo, <code>await</code> só funciona dentro de funções assíncronas.</p>
+
+    <p>Dentro da definição da função <code>myFetch()</code> você pode ver que o código se parece muito à versão anterior com promise, , mas tem algumas diferenças. Ao invés de precisar encadear um bloco <code>.then()</code> no final de cada método baseado em promise, você apenas adiciona a palavra-chave <code>await</code> antes de cada chamada de método, e então atribui o resultado a variável. A palavra-chave <code>await</code> faz com que o JavaScript pause seu código em tempo de execução nesta linha, não permitindo mais &nbsp;nenhum código ser executado nesse meio tempo até que a chamada de função assíncrona retorne seu resultado — muito útil se o código subsequente depender desse resultado!</p>
+
+    <p>Assim que estiver completo, seu código continua a ser executado começando na próxima linha. Por exemplo:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>A resposta retornada pela promise <code>fetch()</code> preenchida é atribuída a variável <code>response</code> quando a resposta estiver disponível, e o parser pausa nesta linha até que isso ocorra. Uma vez que a resposta está disponível, o parser move para a próxima linha, o qual cria o <code><a href="/pt-BR/docs/Web/API/Blob">Blob</a></code> fora dele. Esta linha também invoca um método assíncrono baseado em promise, assim podemos usar <code>await</code> aqui também. Quando o resultado da operação retorna, retornamos isso fora da funcão <code>myFetch()</code>.</p>
+
+    <p>Isso significa que quando nós chamamos a função <code>myFetch()</code>, isso retorna uma promise, então podemos encadear um <code>.then()</code> no final, dentro do qual lidamos com a exibição do blob na tela.</p>
+
+    <p>Provavelmente você já está pensando "isso é realmente demais!", e você está certo — menos blocos <code>.then()</code> para envolver o código, e quase sempre se parece com um código síncrono, por isso é muito intuitivo.</p>
+  </div>
+
+  <h3 id="adding_error_handling">Adicionando tratamento de erros</h3>
+
+  <div>
+    <p>E se você deseja adicionar tratamento de erros, você tem algumas opções.</p>
+
+    <p>Você pode usar uma estrutura <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>  síncrona com <code>async</code>/<code>await</code>. Este exemplo se expande da primeira versão do código que mostramos acima:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">try</span> <span class="token punctuation">{</span>
+        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span>
+        <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Ao bloco <code>catch() {}</code> é passado um objeto de erro, qual nós chamamos <code>e</code>; agora podemos registrar isso no console, e isso nos fornecerá uma mensagem de erro detalhada mostrando onde o erro foi gerado no código.</p>
+
+    <p>Se você quiser usar a segunda versão (refatorada) do código que mostramos acima, seria melhor apenas continuar a abordagem híbrida e encadear um bloco <code>.catch()</code> no final da chamada <code>.then()</code>, dessa forma:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+    <span class="token punctuation">}</span>
+
+    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
+    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Isso ocorre porque o bloco <code>.catch()</code> vai pegar os erros que ocorrem em ambos, na chamada de função com async e com cadeia de promises. Se você usou bloco <code>try</code>/<code>catch</code> aqui, você ainda pode obter erros não tratados na função <code>myFetch()</code> quando ela for chamada.</p>
+
+    <p>Você pode encontrar esses dois exemplos no GitHub:</p>
+
+    <ul>
+     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">simple-fetch-async-await-try-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
+     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">simple-fetch-async-await-promise-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
+    </ul>
+  </div>
+
+  <h2 id="awaiting_a_promise.all">Esperando um Promise.all()</h2>
+
+  <div>
+    <p>async/await é construído em cima de <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, por isso é compatível com todos os recursos oferecidos por promises. Isso inclui <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — você pode esperar felizmente uma chamada <code>Promise.all()</code> para obter todos os resultados retornados em uma variável de uma forma que se pareça com um código síncrono simples. De novo, vamos voltar para <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html" class="external" rel=" noopener">um exemplo que vimos em nosso artigo anterior</a>. Mantenha-o aberto em uma guia separada para que você possa comparar e contrastar com a nova versão mostrada abaixo.</p>
+
+    <p>Convertendo este para async/await (veja <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">demonstração ao vivo</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">código-fonte</a>), isso agora parece assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> content<span class="token punctuation">;</span>
+
+      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+        <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'blob'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">return</span> content<span class="token punctuation">;</span>
+
+
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> coffee <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> tea <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'tea.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'description.txt'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> objectURL1 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> objectURL2 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> descText <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> image1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> image2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      image1<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL1<span class="token punctuation">;</span>
+      image2<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL2<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image1<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image2<span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">let</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> descText<span class="token punctuation">;</span>
+      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
+    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Você notará que a função <code>fetchAndDecode()</code> foi convertida facilmente em uma função assíncrona com apenas algumas alterações. Veja a linha do <code>Promise.all()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Usando <code>await</code> aqui podemos obter todos os resultados das três promises retornadas no array <code>values</code>, quando todos eles estão disponíveis, de uma forma que se parece muito com o código síncrono. Tivemos que envolver todo o código em uma nova função assíncrona, <code>displayContent()</code>, e não reduzimos o código em muitas linhas, mas ser capaz de mover a maior parte do código para fora do bloco <code>.then()</code> fornece uma simplificação agradável e útil, deixando-nos com um programa muito mais legível.</p>
+
+    <p>Para tratamento de erros, nós incluímos um bloco <code>.catch()</code> no nossa chamada <code>displayContent()</code>; isso vai lidar com os erros que ocorrem em ambas as funções.</p>
+
+    <div class="notecard note">
+    <p><strong>Nota</strong>: Também é possível usar um bloco <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> síncrono na função assíncrona, no lugar de um bloco assíncrono<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, para mostrar um relatório final sobre como foi a operação — você pode ver isso em ação no nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
+    </div>
+  </div>
+
+  <h2 id="handling_asyncawait_slowdown">Tratando lentidão com async/await</h2>
+
+  <div>
+    <p>Async/await faz seu código parecer síncrono e, de certa forma, faz com que se comporte de maneira mais síncrona. A palavra-chave <code>await</code> bloqueia a execução de todo o código que o segue até que a promise seja cumprida, exatamente como faria com uma operação síncrona. Ele permite que outras tarefas continuem sendo executadas enquanto isso, mas o código com await é bloqueado. Por exemplo:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">makeResult</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'word_'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+      <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">makeResult</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Blocked on this line</span>
+      <span class="token function">useThatResult</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will not be executed before makeResult() is done</span>
+    <span class="token punctuation">}</span>
+
+    </code></pre></div>
+
+    <p>Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada <code>await</code> vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await.</p>
+
+    <p>Vejamos esses dois exemplos — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">slow-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">código-fonte</a>) e <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">fast-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">código-fonte</a>). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>Cada um deles inclui uma função assíncrona <code>timeTest()</code> que espera três chamadas <code>timeoutPromise()</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token operator">...</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Cada um termina registrando um horário de início, vendo quanto tempo a promise <code>timeTest()</code> leva para completar, em seguida, registrando um horário de término e relatando quanto tempo a operação levou no total:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Isso é a função <code>timeTest()</code> que difere em cada caso.</p>
+
+    <p>No exemplo <code>slow-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Aqui esperamos diretamente todas as três chamadas <code>timeoutPromise()</code>, fazendo cada uma a cada 3 segundos. Cada chamada subsequente é forçada a esperar até que a última termine — se você executar o primeiro exemplo, você verá a caixa de alerta relatando um tempo total de execução de cerca de 9 segundos.</p>
+
+    <p>No exemplo <code>fast-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromise1 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromise2 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromise3 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">await</span> timeoutPromise1<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromise2<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromise3<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span></code></pre></div>
+
+    <p>Aqui nós armazenamos os três objetos <code>Promise</code> em variáveis, que tem o efeito de desencadear seus processos associados, todos rodando simultaneamente.</p>
+
+    <p>A seguir, aguardamos seus resultados — porque todas as promises começaram a ser processadas essencialmente ao mesmo tempo, as promises serão cumpridas todas ao mesmo tempo; ao executar o segundo exemplo, você verá a caixa de alerta relatando um tempo total de execução de pouco mais de 3 segundos!</p>
+  </div>
+
+  <h3 id="handling_errors">Tratamento de erros</h3>
+
+  <div>
+    <p>Há um problema com o padrão acima, no entanto — pode levar a erros não tratados.</p>
+
+    <p>Vamos atualizar os exemplos anteriores, desta vez adicionando uma promise rejeitada e uma declaração <code>catch</code> no final:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
+    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>No exemplo acima, o erro é tratado corretamente, e o alerta aparece após aproximadamente 7 segundos.</p>
+
+    <p>Agora no segundo padrão:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">await</span> timeoutPromiseResolve1<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromiseReject2<span class="token punctuation">;</span>
+      <span class="token keyword">await</span> timeoutPromiseResolve3<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Neste exemplo, temos um erro não tratado no console (depois de 2 segundos), e o alerta aparece após aproximadamente 5 segundos.</p>
+
+    <p>Para iniciar as promises em paralelo e detectar o erro corretamente, nós poderíamos usar <code>Promise.all()</code>, como discutido anteriormente:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
+          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+      <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>timeoutPromiseResolve1<span class="token punctuation">,</span> timeoutPromiseReject2<span class="token punctuation">,</span> timeoutPromiseResolve3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">return</span> results<span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
+      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
+      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
+
+    <p>Neste exemplo, o erro é tratado corretamente após aproximadamente 2 segundos e também vemos o alerta após aproximadamente 2 segundos.</p>
+
+    <p>A <code>Promise.all()</code> rejeita quando qualquer uma das promises de entrada é rejeitada. Se você deseja que todas as promises sejam cumpridas e, em seguida, usar alguns de seus valores retornados, mesmo quando alguns deles são rejeitados, você pode usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a>.</p>
+  </div>
+
+  <h2 id="asyncawait_class_methods">Async/await em métodos de classe</a></h2>
+
+  <div>
+    <p>Como nota final, antes de prosseguirmos, você pode até adicionar <code>async</code> na frente de métodos de classe / objeto para fazê-los retornar promises, e <code>await</code> promises dentro deles. Dê uma olhada no artigo <a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">Código de classe ES que vimos em nosso JavaScript orientado a objetos</a>. em seguida, olhe para nossa versão modificada com um método <code>async</code>:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
+      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender<span class="token punctuation">,</span> interests</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">{</span>
+          first<span class="token punctuation">,</span>
+          last
+        <span class="token punctuation">}</span><span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
+        <span class="token keyword">this</span><span class="token punctuation">.</span>interests <span class="token operator">=</span> interests<span class="token punctuation">;</span>
+      <span class="token punctuation">}</span>
+
+      <span class="token keyword">async</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi! I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">;</span>
+
+      <span class="token function">farewell</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> has left the building. Bye for now!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+      <span class="token punctuation">}</span><span class="token punctuation">;</span>
+    <span class="token punctuation">}</span>
+
+    <span class="token keyword">let</span> han <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Han'</span><span class="token punctuation">,</span> <span class="token string">'Solo'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'male'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Smuggling'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+
+    <p>O primeiro método da classe agora pode ser usado assim:</p>
+
+    <div class="code-example"><pre class="brush: js notranslate"><code>han<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
+  </div>
+
+  <h2 id="browser_support"><a href="#browser_support" title="Permalink to Browser support">Suporte de navegador</a></h2>
+
+  <div>
+    <p>Uma consideração ao decidir se deve usar async/await é o suporte para navegadores mais antigos. Eles estão disponíveis em versões modernas da maioria dos navegadores, o mesmo que promises; os principais problemas de suporte vêm com o Internet Explorer e o Opera Mini.</p>
+
+    <p>Se você deseja usar async/await, mas está preocupado com o suporte a navegadores mais antigos, pode considerar o uso da biblioteca <a href="https://babeljs.io/" class="external" rel=" noopener">BabelJS</a> — isso permite que você escreva seus aplicativos usando o JavaScript mais recente e deixe Babel descobrir quais mudanças, se houver, são necessárias para os navegadores de seu usuário. Ao encontrar um navegador que não suporta async/await, o polyfill do Babel pode fornecer automaticamente substitutos que funcionam em navegadores mais antigos.</p>
+  </div>
+
+  <h2 id="Conclusao">Conclusão</h2>
+
+  <p>E aí está - async/await fornecem uma maneira agradável e simplificada de escrever código assíncrono que é mais simples de ler e manter. Mesmo com o suporte do navegador sendo mais limitado do que outros mecanismos de código assíncrono no momento da escrita, vale a pena aprender e considerar o uso, agora e no futuro.</p>
+
+  <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+  <h2 id="Neste_modulo">Neste módulo</h2>
+
+  <ul>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing">Introdução ao JavaScript Async</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Promises">Programação elegante com Promises</a></li>
+    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem correta</a></li>
+   </ul>
+</div>
diff --git a/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..07c4f43719
--- /dev/null
+++ b/files/pt-br/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,625 @@
+---
+title: Timeouts e intervalos
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">Este tutorial é sobre os métodos tradicionais que o JavaScript tem disponíveis para executar códigos assíncronamente depois que um dado período de tempo tenha passado, ou em um intervalo (um número de segundos por segundo), discute suas utilidades e considera seus problemas.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Pré-requisitos:</th>
+   <td>Entendimento básico sobre informáticas e fundamentos do JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender loops e intervalos assíncronos e para o que eles servem.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introdução">Introdução</h2>
+
+<p>Por um longo tempo, a plataforma web tem oferecido à programadores JavaScript um número de funções que permitem que eles executem código assíncronamente depois de um determinado intervalo de tempo, e executar um bloco de código de modo assíncrono repetidamente até que você o mande parar.</p>
+
+<p>Essas funções são:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Executa um bloco específico uma vez depois de um determinado tempo</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Executa um bloco específico repetidamente com um intervalo fixo entre cada chamada.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>Uma versão moderna de <code>setInterval()</code>. Ela executa um  bloc de código específico antes do navegador renderizar a tela novamento, permitindo que seja executada em uma taxa de quadros adequada, independentemente do ambiente em que está sendo executado.</dd>
+</dl>
+
+<p>O código executado por estas funções é executado na main thread (depois do dado intervalo).</p>
+
+<div>
+<p>É importante saber que você pode (e irá) executar outros códigos antes que uma chamada <code>setTimeout()</code> é executada, ou entre iterações de <code>setInterval()</code>. Dependendo de como essas operações são intensas, elas podem atrasar o seu código async ainda mais, já que o código async só é executado depois que a main thread terminar seu processamento (ou seja, quando a fila estiver vazia). Você aprenderá mais sobre isso enquanto fazemos nosso progresso neste artigo.</p>
+</div>
+
+<p>De qualquer forma, essas funções são usadas para executar animações constantes e outros processamentos em um web site ou aplicação. Nas seções a seguir, nós vamos te mostrar como elas podem ser usadas.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>Como foi dito anteriormente, o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros:</p>
+
+<ul>
+ <li>Uma função a ser executada, ou uma referência de uma função definida em outro lugar.</li>
+ <li>Um número representando o intervalo de tempo em milissegundos (1000 milissegundos equivalem a 1 segundo) para esperar antes de executar o código. Se você especificar um valor de 0 (ou simplesmente omitir o valor), a função será executada assim que possível (mas não imediatamente).</li>
+ <li>Zero ou mais valores que representam quaisquer parâmetros que você quiser passar para a função quando ela for executada.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>NOTA:</strong> O tempos especificafo <strong>não</strong> é o tempo garantido de execução, mas sim o tempo míniimo de execução. As callback que você passa para essas funções não podem ser executadas até que a main thread esteja vazia.</p>
+
+<p>Como consequência, códigos como <code>setTimeout(fn, 0)</code><em> </em>serão executados assim que a fila estiver vazia, <strong>não</strong> imediatamente. Se você executar código como <code>setTimeout(fn, 0)</code> e depois imediatamente executar um loop que conta de 1 a 10 bilhões, sua callback será executada depois de alguns segundos.</p>
+</div>
+
+<p>No exemplo a seguir, o navegador vai esperar dois segundos antes de executar a função anônima, e depois vai mostrar a mensagem de alerta (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja aqui</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja o código</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>As funções especificadas não tem que  ser anônimas. Você pode dar o nome da função, e até mesmo definir ela em outro lugar e passar uma referência para o timeout <code>setTimeout()</code>. As versões a seguir do código são equivalentes à primeira:</p>
+
+<pre class="brush: js notranslate">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>Isso pode ser útil se você tem uma função que precisa ser chamada de um timeout e também em resposta à um evento, por exemplo. Mas também pode servir para manter seu código organizado, especialmente se a callback timetout é mais do que algumas linhas de código.</p>
+
+<p><code>setTimeout()</code> retorna um valor identificador que pode ser usado para se referir ao timeout depois, como em quando você que pará-lo. Veja {{anch("Cancelando timetous")}} (abaixo) e aprenda como fazer isso.</p>
+
+<h3 id="Passando_parâmetros_para_uma_função_setTimeout">Passando parâmetros para uma função setTimeout()</h3>
+
+<p>Quaisquer parâmetros que você quiser passar para a função sendo executada dentro do <code>setTimeout()</code> devem ser passados como parâmetros adicionais no final da lista.</p>
+
+<p>Por exemplo, você pode mudar a função anterior para que ela diga oi para qualquer nome que foi passada para ela:</p>
+
+<pre class="brush: js notranslate">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Agora, você pode passar o nome da pessoa no <code>setTimeout()</code> como um terceiro parâmetro:</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Cancelando_timeouts">Cancelando timeouts</h3>
+
+<p>Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passando para o identificador a chamada <code>setTimeout()</code> como um parâmetreo. então para cancelar o timeout acima, você fará isso:</p>
+
+<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Veja <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> para uma demonstração mais desenvolvida que te permite colocar o nome da pessoa a dizer oi em um formulário, e cancelar a saudação usando um botão separado (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">veja aqui o código fonte</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout()</code> funciona perfeitamento quando você precisa executar algum código depois de um período de tempo. Mas o que acontece quando voc~e precisa executar o código de novo e de novo — por exemplo, no caso de uma animação?</p>
+
+<p>É aí que o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> entra. Ele funciona de uma maneira muito similar à <code>setTimeout()</code>, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de <code>setInterval()</code>.</p>
+
+<p>Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, tira uma string de tempo usando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando <code>setInterval()</code>, criando o efeito de um relógio digital que é atualizado uma vez por segundo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja aqui</a>, e também <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja o código</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Assim como o <code>setTimeout()</code>, o <code>setInterval()</code> também retorna um valor identificador que você pode usar depois para cancelar o intervalo.</p>
+
+<h3 id="Cancelando_intervalos">Cancelando intervalos</h3>
+
+<p><code>setInterval()</code> continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por <code>setInterval()</code> para a função <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:</p>
+
+<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Aprendizado_ativo_Criando_seu_próprio_cronômetro!">Aprendizado ativo: Criando seu próprio cronômetro!</h4>
+
+<p>Com tudo isso dito, nós temos um desafio para você. Faça uma cópia do nosso exemplo <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code>, e o modifique para criar seu próprio cronômetro.</p>
+
+<p>Você precisa mostrar um tempo na tela como antes, mas nesse exemplo você vai precisar de:</p>
+
+<ul>
+ <li>Um botão de "início" para fazer o cronômetro começar a contar.</li>
+ <li>Um botão de "parar" para parar ou pausar o tempo.</li>
+ <li>Um botão de "reset" para resetar o tempo em 0.</li>
+ <li>O display do tempo para mostrar o número de segundos passados.</li>
+</ul>
+
+<p>Here's a few hints for you:</p>
+
+<ul>
+ <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
+ <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
+ <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
+ <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
+ <li>How would you calculate them? Have a think about it:
+  <ul>
+   <li>The number of seconds in an hour is <code>3600</code>.</li>
+   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
+   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
+  </ul>
+ </li>
+ <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
+ <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
+ <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="Coisas_para_se_manter_em_mente_sobre_o_setTimeout_e_o_setInterval">Coisas para se manter em mente sobre o setTimeout() e o setInterval()</h2>
+
+<p>Existem algumas coisinhas que devemos sempre lembrar quando estamos trabalhando com <code>setTimeout()</code> e<code>setInterval()</code>:</p>
+
+<h3 id="Timeouts_recursivos">Timeouts recursivos</h3>
+
+<p>Há outra maneira de usar o  <code>setTimeout()</code>: você pode chamá-lo recusivamnete para executar o mesmo código repetidas vezes, ao invés de usar o <code>setInterval()</code>.</p>
+
+<p>O exemplo abaixo usa um <code>setTimeout()</code> recursivo para executar a função passada a cada <code>100</code> millissegundos:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="Qual_a_diferença_entre_o_setTimeout_recursivo_e_o_setInterval">Qual a diferença entre o <code>setTimeout()</code> recursivo e o <code>setInterval()</code>?</h4>
+
+<p>A diferença entre as duas versões é bem sútil.</p>
+
+<ul>
+ <li>O <code>setTimeout()</code> recursivo garante que o mesmo intervalo entre as execuções (por exemplo, <code>100</code>ms no exemplo acima). O código será executado, depois esperar <code>100</code> milissegundos antes de fazer isso de novo— então o intervalo será o mesmo, idependente do tempo que o código leva para ser executado.</li>
+ <li>O exemplo usando <code>setInterval()</code> faz as coisas um pouco diferentes.O intervalo escolhido inclui o tempo necessário para executar o código que você deseja executar. Digamos que o código leva <code>40</code> milissegundos de execução — o intervalo acaba levando apenas <code>60</code> milissegundos.</li>
+ <li>Quando usamos o <code>setTimeout()</code> recursivamente, cada iteração pode calcular um delay diferente antes de executar a próxima iteração. Em outras palavras, o valor do segundo parâmetro pode especificar um tempo diferente em milissegundos para esperar antes de rodar o código de novo.</li>
+</ul>
+
+<p>Quando seu código tem o potencial para levar mais tempo do que lhe foi atribuido, é melhor usar o <code>setTimeout()</code> recursivo — isso irá manter o intervalo de tempo constant entre execuções independente do quanto tempo o código levar para ser executado, e você não terá erros.</p>
+
+<h3 id="Timeouts_imediatos">Timeouts imediatos</h3>
+
+<p>Usar zero como o valor para <code>setTimeout()</code> faz a execução da callback ser o mais rápido o possível, mas apenas depois que a main thread for terminada.</p>
+
+<p>Por exemplo, o código abaixo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">veja funcionar aqui</a>) mostra um alert que contém um <code>"Hello"</code>, depois um  alert que contém <code>"World"</code> assim que você clicar em OK no primeiro alerta.</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>Isso pode ser útil em casos onde você quer fazer um bloco de código ser executado assim que a main thread acabar o seu processamento — colocar no loop de eventos async, assim ele vai ser executado logo depois.</p>
+
+<h3 id="Cancelando_com_clearTimeout_ou_clearInterval">Cancelando com clearTimeout() ou clearInterval()</h3>
+
+<p><code>clearTimeout()</code> e <code>clearInterval()</code> usam a mesma lista de entradas para cancelamento. Isso significa que você pode usar os dois para cancelar um <code>setTimeout()</code> ou <code>setInterval()</code>.</p>
+
+<p>Mas mesmo assim, você deve usar o <code>clearTimeout()</code> para entradas <code>setTimeout()</code> e <code>clearInterval()</code> para entradas <code>setInterval()</code>. Isso evita confusões.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de <code>setInterval()</code> — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada.</p>
+
+<p>Ela foi criada em resposta à problemas ocorridos com <code>setInterval()</code>, que por exemplo não roda em uma taxa de quadros otimizada para o dispositivo, e às vezes diminui os frames, continua a rodar mesmo se a guia não esiver ativa ou se a animação for rolada para fora da página, etc.</p>
+
+<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Leia mais sobre isso em CreativeJS</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Você pode encontrar exemplos do uso de <code>requestAnimationFrame()</code> em outros lugares do curso — por exemplo em <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, e <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
+</div>
+
+<p>O método toma como argumentos uma callback a  ser invocada antes da renovação. Esse é o padrão geral que você verá usado em:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>A ideia é definir uma função em que sua animação é atualizada (e.g. seus spritas se movem, a pontuação é atualizada, dados são recarregados, etc). Depois, você inicia o processo. No final do bloco da função você chama  <code>requestAnimationFrame()</code> com a referência da função passada como parâmetro, e isso instrui o navegador a chamar a função de novo na próxima renovação. Isso é executado continuamente, já que o código está chamando <code>requestAnimationFrame()</code> recursivamente.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Se você quer realizar algum tipo de animação na DOM constantemente, <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> são provavelemente mais rápidas. elas são calculadas diretamente pelo código interno do navegador, ao invés de JavaScript.</p>
+
+<p>Se, no entanto, você está fazendo algo mais complexo e envolvendo objetos que não são diretamente assessados da DOM (como <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> ou objetos <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> é a melhor opção na maioria dos casos</p>
+</div>
+
+<h3 id="Qual_a_velocidade_da_sua_animação">Qual a velocidade da sua animação?</h3>
+
+<p>A suavidade da sua animação é diretamente dependente na frame rate da sua animação e é medida em frames per second (fps). The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). Quanto maior esse número, mais suave será a sua animação, até certo ponto.</p>
+
+<p>Já que a maioria das tela tem uma taxa de atualização de 60Hz, a frame rate mais rápida que você pode ter é de 60fps quando trabalhando com web browsers. No entanto, mais frames significa mais processamento, o que pode ser causar uma queda de quadros e travamento.</p>
+
+<p>Se você tem um monitos com uma taxa de atualização de 60Hz e você quer atingir 60FPS você tem pelo menos 16.7 milissegundos (<code>1000 / 60</code>) para executar sua animação em cada frame. Isso é um lembrete de que você vai precisar estar atento à quantidade de código que você vai tentar executar em cada iteração do loop de animação.</p>
+
+<p><code>requestAnimationFrame()</code> sempre tenta ficar o mais próximo possível de 60 FPS. Às vezes, isso não é possível — se você tem uma animação bem complexa e você está executando ela em um computador lento, sua frame rate será menor. Em todos os casos, o <code>requestAnimationFrame()</code> sempre vai fazer o melhor que pode com o que ele tem dísponivel.</p>
+
+<h3 id="Como_o_requestAnimationFrame_se_diferencia_de_setInterval_e_setTimeout">Como o requestAnimationFrame() se diferencia de setInterval() e setTimeout()?</h3>
+
+<p>Vamos falar um pouco sobre como o método <code>requestAnimationFrame()</code> se diferencia dos outros métodos vistos anteriormente. Olhando com o código anterior:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Vamos ver isso usando o <code>setInterval()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>Como foi dito anteriormente, você não especifica um intervalo de tempo para <code>requestAnimationFrame()</code>. O método se executa o mais rápido e suave o possível nas condições atuais. O navegador também não perde tempo executando uma animação se ela está fora da tela por algum motivo, etc.</p>
+
+<p><code>setInterval()</code>, por outro lado, exige que um  intervalo de tempo seja especificado. Nós chegamos ao valor final de 17 por meio da formula <em>1000 milliseconds / 60Hz</em>, e depois arredondamos o resultado. Arredondar é uma boa ideia; se você tivesse arredondado para baixo, o navegador pode tentar executar a animação mais rápido do que 60  FPS, e não faria nenhuma diferênça na suavidade da animação de qualquer forma. Como foi dito antes, 60Hz é a taxa de atualização padrão.</p>
+
+<h3 id="Incluindo_um_timestamp">Incluindo um timestamp</h3>
+
+<p>A callback passada para a função <code>requestAnimationFrame()</code> pode ser dada um parâmetro támbem: um valor <em>timestamp</em>, que representa o tempo desde que o  <code>requestAnimationFrame()</code> começou a rodar.</p>
+
+<p>Isso é útil, permite que você execute coisas em  um tempo específico e em passo constante, independente do quão rápido ou lento é o seu dispositivo. O padão geral que você usaria se parece um pouco com isso:</p>
+
+<pre class="brush: js notranslate">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Suporte_do_navegador">Suporte do navegador</h3>
+
+<p><code>requestAnimationFrame()</code> é suportado em navegadores mais recentes do que <code>setInterval()</code>/<code>setTimeout()</code>.  Curiosamente, está disponível no Internet Explorer 10 e além.</p>
+
+<p>Então, você não precisa dar suporte para versões mais velhas do IE, não há poruqe não usar o  <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
+
+<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
+ </li>
+ <li>
+  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is circular arrow character will act as our spinner for this example.</p>
+ </li>
+ <li>
+  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
+
+  <pre class="brush: css notranslate">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
+
+  <pre class="brush: js notranslate">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by <code>360</code>) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like <code>"128000 degrees"</code>.</p>
+
+  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>Next, below the previous block add the following line to actually rotate the spinner:
+  <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
+
+  <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
+</div>
+
+<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
+
+<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
+
+<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
+
+<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js notranslate">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So the code only cycles the sprite once every 13 animation frames.</p>
+
+<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js notranslate">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that calculates how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this:</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to the spinner, so you can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. It simply takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js notranslate">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js notranslate">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js notranslate">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js notranslate">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
+ </li>
+ <li>
+  <p>Add the following function to your code next:</p>
+
+  <pre class="brush: js notranslate">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
+   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!)</li>
+   <li>Regardless of which one of the player control keys was pressed,  remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it—you're all done!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/async_await/index.html b/files/pt-br/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index dd6a558cfe..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,556 +0,0 @@
----
-title: Tornando mais fácil a programação assíncrona com async e await
-slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
-original_slug: Learn/JavaScript/Asynchronous/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Adições mais recentes à linguagem JavaScript são as <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">funções assíncronas</a> e a palavra-chave <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a></code>, adicionadas no ECMAScript 2017. Esses recursos atuam basicamente como um syntactic sugar em cima de promises, tornando o código assíncrono mais fácil de escrever e ler. Isso faz com que o código assíncrono pareça mais com o código síncrono old-school, então vale a pena aprender. Este artigo fornece o que você precisa saber.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Conhecimento básico de informática, uma compreensão razoável dos fundamentos do JavaScript, uma compreensão de código assíncrono em geral e promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender o uso do async/await.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="O_basico_de_async_await">O básico de async/await</h2>
-
-<div><p>Existem duas formas de usar async/await no seu código.</p></div>
-
-<h3 id="A_palavra_chave_async">A palavra-chave async</h3>
-
-<div><p>Em primeiro lugar, temos a palavra-chave <code>async</code>, que você coloca antes de uma declaração de função para transformá-la em uma função assíncrona. Uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function">função assíncrona</a> é uma função que espera a possibilidade de a palavra-chave await ser usada para invocar código assíncrono.</p>
-  
-  <p>Experimente digitar as seguintes linhas no console JS do seu navegador.</p>
-
-  <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>A funcão retorna "Hello" — nada de especial, certo?</p>
-  
-    <p>Mas o que acontece se transformar-mos isso em uma função assíncrona? Tente o seguinte:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Ah. A invocação da função agora retorna uma promise. Isso é uma das características das funções assíncronas — seus valores de retorno são garantidos para serem convertidos em promises.</p>
-
-    <p>Você também pode criar uma <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/async_function">expressão de função assíncrona</a>, assim:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
-      <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>E você pode usar arrow functions:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token keyword">let</span> <span class="token function-variable function">hello</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">"Hello"</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Tudo isso faz basicamente a mesma coisa.</p>
-  
-    <p>Para consumir o valor retornado quando a promise é finalizada, desde que esteja retornando uma promise, podemos usar um bloco <code>.then()</code>:</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>ou mesmo de forma simplificada</p>
-
-    <div class="code-example"><pre class="brush: js notranslate"><span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span></pre><button aria-hidden="false" type="button" class="copy-icon"><span class="visually-hidden">Copiar para área de transferência</span></button></div>
-
-    <p>Como vimos no último artigo.</p>
-
-    <p>Então a palavra-chave <code>async</code> é adicionada nas funções para dizer a elas para retornar uma promise ao invés de diretamente retornar uma valor.</p>
-  </div>
-
-  <h3 id="A_palavra_chave_await">A palavra-chave await</h3>
-  
-  <div>
-    <p>A vantagem de uma função assíncrona só se torna aparente quando você a combina com a palavra-chave <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/await">await</a>. <code>await</code> só funciona dentro de funções assíncronas no código JavaScript regular, no entanto, pode ser usado por conta própria com <a href="/pt-BR/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
-
-    <p><code>await</code> pode ser colocado na frente de qualquer função assíncrona baseada em promise para pausar seu código nessa linha até que a promise seja resolvida e, em seguida, retornar o valor resultante.</p>
-    
-    <p>Você pode usar <code>await</code> quando chamar qualquer função que retorne uma Promise, incluindo funções de API web.</p>
-    
-    <p>Aqui está um exemplo comum:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> greeting <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Com certeza, o exemplo acima não é muito útil, porém serve para ilustrar a sintaxe. Vamos seguir em frente e ver um exemplo real.</p>
-  </div>
-  
-  <h2 id="Reescrevendo_codigo_baseado_em_promises_com_asyncawait">Reescrevendo código baseado em promises com async/await</a></h2>
-  
-  <div>
-    <p>Vejamos um exemplo simples de busca que vimos no artigo anterior:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">myBlob</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Por enquanto, você precisa ter um entendimento razoável das promises e como elas funcionam, mas vamos converter isso para usar async/await e ver o quão simples as coisas se tornam:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'There has been a problem with your fetch operation: '</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Isto faz o código muito mais simples and fácil de entender — sem mais blocos <code>.then()</code> em todo lugar!</p>
-    
-    <p>Visto que a palavra-chave <code>async</code> transforma a funcão em uma promise, você pode refatorar seu código para usar uma abordagem de promises e await, trazendo a segunda metade da funcão para um novo bloco e torná-la mais flexível:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Você pode tentar fazer o exemplo sozinho, ou rodar o nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
-  </div>
-  
-  <h3 id="but_how_does_it_work">Mas como isso funciona?</h3>
-  
-  <div>
-    <p>Você notará que empacotamos o código dentro de uma função, e incluímos a palavra-chave <code>async</code> antes da palavra-chave<code>function</code>. Isso é necessário — você tem que criar uma função assíncrona para definir o bloco de código no qual você executará seu código assíncrono; como falamos mais cedo, <code>await</code> só funciona dentro de funções assíncronas.</p>
-    
-    <p>Dentro da definição da função <code>myFetch()</code> você pode ver que o código se parece muito à versão anterior com promise, , mas tem algumas diferenças. Ao invés de precisar encadear um bloco <code>.then()</code> no final de cada método baseado em promise, você apenas adiciona a palavra-chave <code>await</code> antes de cada chamada de método, e então atribui o resultado a variável. A palavra-chave <code>await</code> faz com que o JavaScript pause seu código em tempo de execução nesta linha, não permitindo mais &nbsp;nenhum código ser executado nesse meio tempo até que a chamada de função assíncrona retorne seu resultado — muito útil se o código subsequente depender desse resultado!</p>
-    
-    <p>Assim que estiver completo, seu código continua a ser executado começando na próxima linha. Por exemplo:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>A resposta retornada pela promise <code>fetch()</code> preenchida é atribuída a variável <code>response</code> quando a resposta estiver disponível, e o parser pausa nesta linha até que isso ocorra. Uma vez que a resposta está disponível, o parser move para a próxima linha, o qual cria o <code><a href="/pt-BR/docs/Web/API/Blob">Blob</a></code> fora dele. Esta linha também invoca um método assíncrono baseado em promise, assim podemos usar <code>await</code> aqui também. Quando o resultado da operação retorna, retornamos isso fora da funcão <code>myFetch()</code>.</p>
-    
-    <p>Isso significa que quando nós chamamos a função <code>myFetch()</code>, isso retorna uma promise, então podemos encadear um <code>.then()</code> no final, dentro do qual lidamos com a exibição do blob na tela.</p>
-    
-    <p>Provavelmente você já está pensando "isso é realmente demais!", e você está certo — menos blocos <code>.then()</code> para envolver o código, e quase sempre se parece com um código síncrono, por isso é muito intuitivo.</p>
-  </div>
-  
-  <h3 id="adding_error_handling">Adicionando tratamento de erros</h3>
-  
-  <div>
-    <p>E se você deseja adicionar tratamento de erros, você tem algumas opções.</p>
-    
-    <p>Você pode usar uma estrutura <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>  síncrona com <code>async</code>/<code>await</code>. Este exemplo se expande da primeira versão do código que mostramos acima:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">try</span> <span class="token punctuation">{</span>
-        <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span>
-        <span class="token keyword">let</span> myBlob <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>myBlob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-        document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token punctuation">}</span> <span class="token keyword">catch</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Ao bloco <code>catch() {}</code> é passado um objeto de erro, qual nós chamamos <code>e</code>; agora podemos registrar isso no console, e isso nos fornecerá uma mensagem de erro detalhada mostrando onde o erro foi gerado no código.</p>
-    
-    <p>Se você quiser usar a segunda versão (refatorada) do código que mostramos acima, seria melhor apenas continuar a abordagem híbrida e encadear um bloco <code>.catch()</code> no final da chamada <code>.then()</code>, dessa forma:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">myFetch</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">blob</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> objectURL <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Isso ocorre porque o bloco <code>.catch()</code> vai pegar os erros que ocorrem em ambos, na chamada de função com async e com cadeia de promises. Se você usou bloco <code>try</code>/<code>catch</code> aqui, você ainda pode obter erros não tratados na função <code>myFetch()</code> quando ela for chamada.</p>
-    
-    <p>Você pode encontrar esses dois exemplos no GitHub:</p>
-    
-    <ul>
-     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">simple-fetch-async-await-try-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
-     <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">simple-fetch-async-await-promise-catch.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html" class="external" rel=" noopener">código-fonte</a>)</li>
-    </ul>
-  </div>
-  
-  <h2 id="awaiting_a_promise.all">Esperando um Promise.all()</h2>
-  
-  <div>
-    <p>async/await é construído em cima de <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, por isso é compatível com todos os recursos oferecidos por promises. Isso inclui <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — você pode esperar felizmente uma chamada <code>Promise.all()</code> para obter todos os resultados retornados em uma variável de uma forma que se pareça com um código síncrono simples. De novo, vamos voltar para <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html" class="external" rel=" noopener">um exemplo que vimos em nosso artigo anterior</a>. Mantenha-o aberto em uma guia separada para que você possa comparar e contrastar com a nova versão mostrada abaixo.</p>
-    
-    <p>Convertendo este para async/await (veja <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">demonstração ao vivo</a> e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html" class="external" rel=" noopener">código-fonte</a>), isso agora parece assim:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> content<span class="token punctuation">;</span>
-    
-      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>response<span class="token punctuation">.</span>ok<span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTTP error! status: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>response<span class="token punctuation">.</span>status<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
-        <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'blob'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">blob</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'text'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-          content <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">return</span> content<span class="token punctuation">;</span>
-    
-    
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> coffee <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'coffee.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> tea <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'tea.jpg'</span><span class="token punctuation">,</span> <span class="token string">'blob'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> description <span class="token operator">=</span> <span class="token function">fetchAndDecode</span><span class="token punctuation">(</span><span class="token string">'description.txt'</span><span class="token punctuation">,</span> <span class="token string">'text'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> objectURL1 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> objectURL2 <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>values<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> descText <span class="token operator">=</span> values<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> image1 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> image2 <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'img'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      image1<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL1<span class="token punctuation">;</span>
-      image2<span class="token punctuation">.</span>src <span class="token operator">=</span> objectURL2<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image1<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>image2<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">let</span> para <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'p'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      para<span class="token punctuation">.</span>textContent <span class="token operator">=</span> descText<span class="token punctuation">;</span>
-      document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>para<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token function">displayContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span>
-    <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Você notará que a função <code>fetchAndDecode()</code> foi convertida facilmente em uma função assíncrona com apenas algumas alterações. Veja a linha do <code>Promise.all()</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> values <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>coffee<span class="token punctuation">,</span> tea<span class="token punctuation">,</span> description<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Usando <code>await</code> aqui podemos obter todos os resultados das três promises retornadas no array <code>values</code>, quando todos eles estão disponíveis, de uma forma que se parece muito com o código síncrono. Tivemos que envolver todo o código em uma nova função assíncrona, <code>displayContent()</code>, e não reduzimos o código em muitas linhas, mas ser capaz de mover a maior parte do código para fora do bloco <code>.then()</code> fornece uma simplificação agradável e útil, deixando-nos com um programa muito mais legível.</p>
-    
-    <p>Para tratamento de erros, nós incluímos um bloco <code>.catch()</code> no nossa chamada <code>displayContent()</code>; isso vai lidar com os erros que ocorrem em ambas as funções.</p>
-    
-    <div class="notecard note">
-    <p><strong>Nota</strong>: Também é possível usar um bloco <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> síncrono na função assíncrona, no lugar de um bloco assíncrono<code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code>, para mostrar um relatório final sobre como foi a operação — você pode ver isso em ação no nosso <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">exemplo ao vivo</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html" class="external" rel=" noopener">código-fonte</a>).</p>
-    </div>
-  </div>
-  
-  <h2 id="handling_asyncawait_slowdown">Tratando lentidão com async/await</h2>
-  
-  <div>
-    <p>Async/await faz seu código parecer síncrono e, de certa forma, faz com que se comporte de maneira mais síncrona. A palavra-chave <code>await</code> bloqueia a execução de todo o código que o segue até que a promise seja cumprida, exatamente como faria com uma operação síncrona. Ele permite que outras tarefas continuem sendo executadas enquanto isso, mas o código com await é bloqueado. Por exemplo:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">makeResult</span><span class="token punctuation">(</span><span class="token parameter">items</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> newArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
-      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> items<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        newArr<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'word_'</span><span class="token operator">+</span>i<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-      <span class="token keyword">return</span> newArr<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getResult</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">makeResult</span><span class="token punctuation">(</span>items<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Blocked on this line</span>
-      <span class="token function">useThatResult</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Will not be executed before makeResult() is done</span>
-    <span class="token punctuation">}</span>
-    
-    </code></pre></div>
-    
-    <p>Como resultado, seu código pode ser retardado por um número significativo de promises aguardadas acontecendo uma após a outra. Cada <code>await</code> vai esperar que o anterior termine, ao passo que, na verdade, o que você pode querer é que as promises comecem a ser processadas simultaneamente, como fariam se não estivéssemos usando async/await.</p>
-    
-    <p>Vejamos esses dois exemplos — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">slow-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html" class="external" rel=" noopener">código-fonte</a>) e <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">fast-async-await.html</a> (veja <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html" class="external" rel=" noopener">código-fonte</a>). Ambos começam com uma função promise personalizada que simula um processo assíncrono com uma chamada <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"done"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>Cada um deles inclui uma função assíncrona <code>timeTest()</code> que espera três chamadas <code>timeoutPromise()</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token operator">...</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Cada um termina registrando um horário de início, vendo quanto tempo a promise <code>timeTest()</code> leva para completar, em seguida, registrando um horário de término e relatando quanto tempo a operação levou no total:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Isso é a função <code>timeTest()</code> que difere em cada caso.</p>
-    
-    <p>No exemplo <code>slow-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Aqui esperamos diretamente todas as três chamadas <code>timeoutPromise()</code>, fazendo cada uma a cada 3 segundos. Cada chamada subsequente é forçada a esperar até que a última termine — se você executar o primeiro exemplo, você verá a caixa de alerta relatando um tempo total de execução de cerca de 9 segundos.</p>
-    
-    <p>No exemplo <code>fast-async-await.html</code>, <code>timeTest()</code> se parece com isso:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromise1 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromise2 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromise3 <span class="token operator">=</span> <span class="token function">timeoutPromise</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">await</span> timeoutPromise1<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromise2<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromise3<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span></code></pre></div>
-    
-    <p>Aqui nós armazenamos os três objetos <code>Promise</code> em variáveis, que tem o efeito de desencadear seus processos associados, todos rodando simultaneamente.</p>
-    
-    <p>A seguir, aguardamos seus resultados — porque todas as promises começaram a ser processadas essencialmente ao mesmo tempo, as promises serão cumpridas todas ao mesmo tempo; ao executar o segundo exemplo, você verá a caixa de alerta relatando um tempo total de execução de pouco mais de 3 segundos!</p>
-  </div>
-  
-  <h3 id="handling_errors">Tratamento de erros</h3>
-  
-  <div>
-    <p>Há um problema com o padrão acima, no entanto — pode levar a erros não tratados.</p>
-    
-    <p>Vamos atualizar os exemplos anteriores, desta vez adicionando uma promise rejeitada e uma declaração <code>catch</code> no final:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">await</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
-    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>No exemplo acima, o erro é tratado corretamente, e o alerta aparece após aproximadamente 7 segundos.</p>
-    
-    <p>Agora no segundo padrão:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">await</span> timeoutPromiseResolve1<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromiseReject2<span class="token punctuation">;</span>
-      <span class="token keyword">await</span> timeoutPromiseResolve3<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Neste exemplo, temos um erro não tratado no console (depois de 2 segundos), e o alerta aparece após aproximadamente 5 segundos.</p>
-    
-    <p>Para iniciar as promises em paralelo e detectar o erro corretamente, nós poderíamos usar <code>Promise.all()</code>, como discutido anteriormente:</p> 
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">function</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"successful"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">function</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token parameter">interval</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
-          <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-    <span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve1 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseReject2 <span class="token operator">=</span> <span class="token function">timeoutPromiseReject</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">const</span> timeoutPromiseResolve3 <span class="token operator">=</span> <span class="token function">timeoutPromiseResolve</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    
-      <span class="token keyword">const</span> results <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>timeoutPromiseResolve1<span class="token punctuation">,</span> timeoutPromiseReject2<span class="token punctuation">,</span> timeoutPromiseResolve3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">return</span> results<span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> startTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token function">timeTest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> finishTime <span class="token operator">=</span> Date<span class="token punctuation">.</span><span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token keyword">let</span> timeTaken <span class="token operator">=</span> finishTime <span class="token operator">-</span> startTime<span class="token punctuation">;</span>
-      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"Time taken in milliseconds: "</span> <span class="token operator">+</span> timeTaken<span class="token punctuation">)</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div>
-    
-    <p>Neste exemplo, o erro é tratado corretamente após aproximadamente 2 segundos e também vemos o alerta após aproximadamente 2 segundos.</p>
-    
-    <p>A <code>Promise.all()</code> rejeita quando qualquer uma das promises de entrada é rejeitada. Se você deseja que todas as promises sejam cumpridas e, em seguida, usar alguns de seus valores retornados, mesmo quando alguns deles são rejeitados, você pode usar <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a>.</p>
-  </div>
-  
-  <h2 id="asyncawait_class_methods">Async/await em métodos de classe</a></h2>
-  
-  <div>
-    <p>Como nota final, antes de prosseguirmos, você pode até adicionar <code>async</code> na frente de métodos de classe / objeto para fazê-los retornar promises, e <code>await</code> promises dentro deles. Dê uma olhada no artigo <a href="/pt-BR/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">Código de classe ES que vimos em nosso JavaScript orientado a objetos</a>. em seguida, olhe para nossa versão modificada com um método <code>async</code>:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code><span class="token keyword">class</span> <span class="token class-name">Person</span> <span class="token punctuation">{</span>
-      <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">first<span class="token punctuation">,</span> last<span class="token punctuation">,</span> age<span class="token punctuation">,</span> gender<span class="token punctuation">,</span> interests</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token punctuation">{</span>
-          first<span class="token punctuation">,</span>
-          last
-        <span class="token punctuation">}</span><span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">=</span> age<span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>gender <span class="token operator">=</span> gender<span class="token punctuation">;</span>
-        <span class="token keyword">this</span><span class="token punctuation">.</span>interests <span class="token operator">=</span> interests<span class="token punctuation">;</span>
-      <span class="token punctuation">}</span>
-    
-      <span class="token keyword">async</span> <span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        <span class="token keyword">return</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Hi! I'm </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    
-      <span class="token function">farewell</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
-        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">.</span>first<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> has left the building. Bye for now!</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-      <span class="token punctuation">}</span><span class="token punctuation">;</span>
-    <span class="token punctuation">}</span>
-    
-    <span class="token keyword">let</span> han <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'Han'</span><span class="token punctuation">,</span> <span class="token string">'Solo'</span><span class="token punctuation">,</span> <span class="token number">25</span><span class="token punctuation">,</span> <span class="token string">'male'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">'Smuggling'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-    
-    <p>O primeiro método da classe agora pode ser usado assim:</p>
-    
-    <div class="code-example"><pre class="brush: js notranslate"><code>han<span class="token punctuation">.</span><span class="token function">greeting</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>console<span class="token punctuation">.</span>log<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div>
-  </div>
-  
-  <h2 id="browser_support"><a href="#browser_support" title="Permalink to Browser support">Suporte de navegador</a></h2>
-  
-  <div>
-    <p>Uma consideração ao decidir se deve usar async/await é o suporte para navegadores mais antigos. Eles estão disponíveis em versões modernas da maioria dos navegadores, o mesmo que promises; os principais problemas de suporte vêm com o Internet Explorer e o Opera Mini.</p>
-    
-    <p>Se você deseja usar async/await, mas está preocupado com o suporte a navegadores mais antigos, pode considerar o uso da biblioteca <a href="https://babeljs.io/" class="external" rel=" noopener">BabelJS</a> — isso permite que você escreva seus aplicativos usando o JavaScript mais recente e deixe Babel descobrir quais mudanças, se houver, são necessárias para os navegadores de seu usuário. Ao encontrar um navegador que não suporta async/await, o polyfill do Babel pode fornecer automaticamente substitutos que funcionam em navegadores mais antigos.</p>
-  </div>
-
-  <h2 id="Conclusao">Conclusão</h2>
-
-  <p>E aí está - async/await fornecem uma maneira agradável e simplificada de escrever código assíncrono que é mais simples de ler e manter. Mesmo com o suporte do navegador sendo mais limitado do que outros mecanismos de código assíncrono no momento da escrita, vale a pena aprender e considerar o uso, agora e no futuro.</p>
-
-  <p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-  <h2 id="Neste_modulo">Neste módulo</h2>
-
-  <ul>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Introducing">Introdução ao JavaScript Async</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Promises">Programação elegante com Promises</a></li>
-    <li><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem correta</a></li>
-   </ul>
-</div>
\ No newline at end of file
diff --git a/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index e168a76aef..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: Escolhendo a abordagem correta
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-original_slug: Learn/JavaScript/Asynchronous/Escolhendo_abordagem_correta
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>To finish this module off, we'll provide a brief discussion of the different coding techniques and features we've discussed throughout, looking at which one you should use when, with recommendations and reminders of common pitfalls where appropriate. We'll probably add to this resource as time goes on.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
-
-<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Code_example">Code example</h3>
-
-<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="Pitfalls">Pitfalls</h3>
-
-<ul>
- <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
- <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
- <li>Async callbacks just aren't very graceful.</li>
- <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
- <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
-</ul>
-
-<h3 id="Browser_compatibility">Browser compatibility</h3>
-
-<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
-
-<h3 id="Further_information">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_2">Code example</h3>
-
-<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="Pitfalls_2">Pitfalls</h3>
-
-<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
- <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Browser_compatibility_2">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="Further_information_2">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_3">Code example</h3>
-
-<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="Pitfalls_3">Pitfalls</h3>
-
-<ul>
- <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_3">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="Further_information_3">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_4">Code example</h3>
-
-<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
-
-<pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-    if(!startTime) {
-        startTime = timestamp;
-    }
-
-    rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-        rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Pitfalls_4">Pitfalls</h3>
-
-<ul>
- <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_4">Browser compatibility</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="Further_information_4">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_5">Code example</h3>
-
-<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="Pitfalls_5">Pitfalls</h3>
-
-<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>or even:</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
-
-<h3 id="Browser_compatibility_5">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="Further_information_5">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_6">Code example</h3>
-
-<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
-
-<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="Pitfalls_6">Pitfalls</h3>
-
-<ul>
- <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
-</ul>
-
-<h3 id="Browser_compatibility_6">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="Further_information_6">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_7">Code example</h3>
-
-<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="Pitfalls_7">Pitfalls</h3>
-
-<ul>
- <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
- <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
-</ul>
-
-<h3 id="Browser_compatibility_7">Browser compatibility</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="Further_information_7">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/concepts/index.html b/files/pt-br/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 39ce5d5086..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,156 +0,0 @@
----
-title: Conceitos gerais da programação assíncrona
-slug: Learn/JavaScript/Asynchronous/Concepts
-translation_of: Learn/JavaScript/Asynchronous/Concepts
-original_slug: Learn/JavaScript/Asynchronous/Conceitos
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>Neste artigo, nós vamos ver um número de conceitos importantes relativos à programação assíncrona e como ela se parece em navegadores modernos e em JavaScript. Você deve entender estes conceitos antes de trabalhar com outros artigos neste módulo.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Conhecimentos básicos de informática e compreensão dos fundamentos de JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender os conceitos básicos da programação assíncrona e como ela se manifesta em navegadores e JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Assíncrono">Assíncrono?</h2>
-
-<p>Normalmente, o código de um programa é executado de forma direta, com uma coisa acontecendo por vez. Se uma função depende do resultado de outra função, ela tem que esperar o retorno do resultado, e até que isso aconteça, o programa inteiro praticamente para de funcionar da perspectiva do usuário.</p>
-
-<p>Usuários do Mac, por exemplo, conseguem ver isso como o cursor giratório em arco-íris (ou "beachball", como normalmente é chamado). Este cursor é o jeito do sistema operacional dizer: "o programa atual que você está usando teve que parar e esperar algo terminar de ser executado, e estava demorando tanto que fiquei preocupado se você estava pensando no que aconteceu."</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Essa é uma situação frustrante, e não faz bom uso do poder de processamento do computador — especialmente em uma era em que computadores tem múltiplos núcleos de processamento disponíveis. Não há sentido em ficar esperando por algo quando você pode deixar outra tarefa ser executada em um núcleo de processador diferente e deixar que ele te avise quando terminar. Isso te permite fazer mais coisas por enquanto, o que é a base da <strong>programação assincrona</strong>. Depende do ambiente de programação que você está usando (navegadores da Web, no caso de desenvolvimento da Web) para fornecer APIs que permitem executar essas tarefas de forma assíncrona.</p>
-
-<h2 id="Bloqueio_de_código">Bloqueio de código</h2>
-
-<p>Técnicas <strong>async</strong> (assíncronas) são muito úteis, principalmente na programação web. Quando um aplicativo web é executado em um navegador e executa um pedaço de código rigoroso sem retornar o controle para o navegador, ele pode parecer que travou. Isso é chamado de <strong>blocking</strong>; o navegador está bloqueado de continuar a manusear a entrada do usuário e de realizar outras tarefas até que o aplicativo web retorne o controle do processador.</p>
-
-<p>Vamos dar uma olhadinha em alguns exemplos para que você entenda o blocking.</p>
-
-<p>No nosso exemplo <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">veja aqui</a>), nós adicionamos um evento de click em um botão para que, quando clicado, ele executa uma tarefa pesada (calcula 10 milhões de datas e depois imprime a última delas no console) e depois adiciona um parágrafo no DOM:</p>
-
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Quando o exemplo for executado, abra seu console JavaScript e depois clique no botão  — você verá qua o parágrafo não aparece até que o programa termine de calcular as datas e imprimir a última no console. O código é executado na ordem em que ele aparece na fonte, e a operação seguinte só é executada depois que a primeira for terminada.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: O exemplo anterior não é muito realistico. Você nunca calcularia 10 milhões de datas em um aplicativo real! Mas isso serve par te dar um apoio sobre o assunto.</p>
-</div>
-
-<p>No nosso segundo exemplo <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">veja aqui</a>), nós simulamos algo mais realistico que você pode encontrar em uma página real. Nós bloqueamos a interatividade do usuário na renderização da UI. Neste exemplo, nós temos dois botões:</p>
-
-<ul>
- <li>Um botão "Fill canvas" que quando for clicado renderiza 1 milhão de círculos azuis no elemento {{htmlelement("canvas")}} .</li>
- <li>Um botão "Clique-me" que mostra um alerta quando clicado.</li>
-</ul>
-
-<pre class="brush: js notranslate">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Se você clicar no primeiro botão e imediatamente no segundo, você verá que a mensagem de alerta não aparece até que os círculos sejam totalmente renderizados. A primeira operação bloqueia a segunda até a sua finalização.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: OK, no nosso caso, isso é ruim e estamos bloqueando o código de propósito, mas isso é um problema comum que desenvolvedores de aplicativos reais sempre tentam resolver.</p>
-</div>
-
-<p>E por quê isso acontece? A resposta é que o JavaScript é <strong>single threaded</strong>. E é neste ponto que precisamos introduzir a você o conceito de <strong>threads</strong>.</p>
-
-<h2 id="Threads">Threads</h2>
-
-<p>Uma <strong>thread</strong> é basicamente um único processo que um programa pode usar para concluir tarefas. Cada thread só pode fazer uma tarefa de cada vez:</p>
-
-<pre class="notranslate">Tarefa A --&gt; Tarefa B --&gt; Tarefa C</pre>
-
-<p>Cada tarefa será executada sequencialmente; uma tarefa tem que ser concluída antes que a próxima possa ser iniciada.</p>
-
-<p>Como foi dito anteriormente, muitos computadores possuem múltiplos núcleos, para que possam fazer múltiplas coisas de uma vez só. Linguagens de programação que podem suportar múltiplas threads podem usar múltiplos processadores para concluir múltiplas tarefas simultâneamente:</p>
-
-<pre class="notranslate">Thread 1: Tarefa A --&gt; Tarefa B
-Thread 2: Tarefa C --&gt; Tarefa D</pre>
-
-<h3 id="JavaScript_é_single_threaded">JavaScript é single threaded</h3>
-
-<p>JavaScript é tradicionalmente single-threaded. Mesmo com múltiplos núcleos de processamento, você só pode fazê-lo executar tarefas em uma única thread, chamada de <strong>main thread</strong> (thread principal). Nosso exemplo de cima é executado assim:</p>
-
-<pre class="notranslate">Main thread: Renderizar circulos no canvas --&gt; Mostrar alert()</pre>
-
-<p>Depois de um tempo, o JavaScript ganhou algumas ferramentas para ajudar em tais problemas. As <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> te permitem mandar parte do processamento do JavaScript para uma thread separada. Você geralmente usaria uma worker para executar um processo pesado para que a UI não seja bloqueada.</p>
-
-<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa C
-Worker thread: Tarefa pesada B</pre>
-
-<p>Com isso em mente, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">veja aqui</a>), com o seu console JavaScript aberto. Isso é uma nova versão do nosso exemplo que calcula 10 milhões de datas em uma thread worker separada. Agora, quando você clica no botão, o navegador é capaz de mostrar o parágrafo antes que as datas sejam terminadas. A primeira operação não bloqueia a segunda.</p>
-
-<h2 id="Código_assíncrono">Código assíncrono</h2>
-
-<p>Web workers podem ser bem úteis, mas elas tem as suas limitações. Uma delas é que elas não são capazes de acessar a {{Glossary("DOM")}} — você não pode fazer com que uma worker faça algo diretamente para atualizar a UI. Nós não poderíamos renderizar nossos 1 milhão de círculos azuis na nossa worker; basicamente ela pode apenas fazer cálculos de números.</p>
-
-<p>O segundo problema é que, mesmo que o código executado em uma worker não cause um bloqueio, ele ainda é um código síncrono. Isso se torna um problema quando uma função depende dos resultados de processos anteriores para funcionar. Considere os diagramas a seguir:</p>
-
-<pre class="notranslate">Main thread: Tarefa A --&gt; Tarefa B</pre>
-
-<p>Nesse caso, digamos que a tarefa A está fazendo algo como pegar uma imagem do servidor e que a tarefa B faz algo com essa imagem, como colocar um filtro nela. Se você iniciar a tarefa A e depois tentar executar a tarefa B imediatamente, você obterá um erro, porque a imagem não estará disponível ainda.</p>
-
-<pre class="notranslate">  Main thread: Tarefa A --&gt; Tarefa B --&gt; |Tarefa D|
-Worker thread: Tarefa C ---------------&gt; |      |</pre>
-
-<p>Neste caso, digamos que a tarefa D faz uso dos resultados das tarefas B e C. Se nós pudermos garantir que esses resultados estejam disponíveis ao mesmo tempo, então tudo talvez esteja bem, mas isso não é garantido. Se a tarefa D tentar ser executada quando um dos resultados não estiver disponível, ela retornará um erro.</p>
-
-<p>Para consertarmos tais problemas, os browsers nos permitem executar certas operações de modo assíncrono. Recursos como <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> te permitem executar uma operação e depois esperar pelo resultado antes de executar outra operação: </p>
-
-<pre class="notranslate">Main thread: Tarefa A                   Tarefa B
-    Promise:       |___operação async___|</pre>
-
-<p>Já que a operação está acontecendo em outro lugar, a main thread não está bloqueada enquanto a operação assíncrona está sendo processada.</p>
-
-<p>Nós vamos começar a olhar em como podemos escrever código assíncrono no próximo artigo.</p>
-
-<h2 id="Conclusão">Conclusão</h2>
-
-<p>O design moderno de software gira em torno do uso de programação assíncrona, para permitir que os programas façam mais de uma coisa por vez. Ao usar APIs mais novas e mais poderosas, você encontrará mais casos em que a única maneira de fazer as coisas é assincronamente. Costumava ser difícil escrever código assíncrono. Ainda é preciso se acostumar, mas ficou muito mais fácil. No restante deste módulo, exploraremos ainda mais por que o código assíncrono é importante e como projetar o código que evita alguns dos problemas descritos acima.</p>
-
-<h2 id="Nesse_módulo">Nesse módulo</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Conceitos gerais da programação assíncrona</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introduzindo o JavaScript assíncrono</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Timeouts e intervalos</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Código elegante usando as Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Facilitando a programação async com async e await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Escolhendo a abordagem certa</a></li>
-</ul>
diff --git a/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index f483c33937..0000000000
--- a/files/pt-br/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,624 +0,0 @@
----
-title: Timeouts e intervalos
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">Este tutorial é sobre os métodos tradicionais que o JavaScript tem disponíveis para executar códigos assíncronamente depois que um dado período de tempo tenha passado, ou em um intervalo (um número de segundos por segundo), discute suas utilidades e considera seus problemas.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Pré-requisitos:</th>
-   <td>Entendimento básico sobre informáticas e fundamentos do JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objetivo:</th>
-   <td>Entender loops e intervalos assíncronos e para o que eles servem.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introdução">Introdução</h2>
-
-<p>Por um longo tempo, a plataforma web tem oferecido à programadores JavaScript um número de funções que permitem que eles executem código assíncronamente depois de um determinado intervalo de tempo, e executar um bloco de código de modo assíncrono repetidamente até que você o mande parar.</p>
-
-<p>Essas funções são:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Executa um bloco específico uma vez depois de um determinado tempo</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Executa um bloco específico repetidamente com um intervalo fixo entre cada chamada.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>Uma versão moderna de <code>setInterval()</code>. Ela executa um  bloc de código específico antes do navegador renderizar a tela novamento, permitindo que seja executada em uma taxa de quadros adequada, independentemente do ambiente em que está sendo executado.</dd>
-</dl>
-
-<p>O código executado por estas funções é executado na main thread (depois do dado intervalo).</p>
-
-<div>
-<p>É importante saber que você pode (e irá) executar outros códigos antes que uma chamada <code>setTimeout()</code> é executada, ou entre iterações de <code>setInterval()</code>. Dependendo de como essas operações são intensas, elas podem atrasar o seu código async ainda mais, já que o código async só é executado depois que a main thread terminar seu processamento (ou seja, quando a fila estiver vazia). Você aprenderá mais sobre isso enquanto fazemos nosso progresso neste artigo.</p>
-</div>
-
-<p>De qualquer forma, essas funções são usadas para executar animações constantes e outros processamentos em um web site ou aplicação. Nas seções a seguir, nós vamos te mostrar como elas podem ser usadas.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>Como foi dito anteriormente, o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executa um bloco de código particular depois que um determinado período de tempo passou. Ele toma os seguintes parâmetros:</p>
-
-<ul>
- <li>Uma função a ser executada, ou uma referência de uma função definida em outro lugar.</li>
- <li>Um número representando o intervalo de tempo em milissegundos (1000 milissegundos equivalem a 1 segundo) para esperar antes de executar o código. Se você especificar um valor de 0 (ou simplesmente omitir o valor), a função será executada assim que possível (mas não imediatamente).</li>
- <li>Zero ou mais valores que representam quaisquer parâmetros que você quiser passar para a função quando ela for executada.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>NOTA:</strong> O tempos especificafo <strong>não</strong> é o tempo garantido de execução, mas sim o tempo míniimo de execução. As callback que você passa para essas funções não podem ser executadas até que a main thread esteja vazia.</p>
-
-<p>Como consequência, códigos como <code>setTimeout(fn, 0)</code><em> </em>serão executados assim que a fila estiver vazia, <strong>não</strong> imediatamente. Se você executar código como <code>setTimeout(fn, 0)</code> e depois imediatamente executar um loop que conta de 1 a 10 bilhões, sua callback será executada depois de alguns segundos.</p>
-</div>
-
-<p>No exemplo a seguir, o navegador vai esperar dois segundos antes de executar a função anônima, e depois vai mostrar a mensagem de alerta (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja aqui</a>, e <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">veja o código</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>As funções especificadas não tem que  ser anônimas. Você pode dar o nome da função, e até mesmo definir ela em outro lugar e passar uma referência para o timeout <code>setTimeout()</code>. As versões a seguir do código são equivalentes à primeira:</p>
-
-<pre class="brush: js notranslate">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>Isso pode ser útil se você tem uma função que precisa ser chamada de um timeout e também em resposta à um evento, por exemplo. Mas também pode servir para manter seu código organizado, especialmente se a callback timetout é mais do que algumas linhas de código.</p>
-
-<p><code>setTimeout()</code> retorna um valor identificador que pode ser usado para se referir ao timeout depois, como em quando você que pará-lo. Veja {{anch("Cancelando timetous")}} (abaixo) e aprenda como fazer isso.</p>
-
-<h3 id="Passando_parâmetros_para_uma_função_setTimeout">Passando parâmetros para uma função setTimeout()</h3>
-
-<p>Quaisquer parâmetros que você quiser passar para a função sendo executada dentro do <code>setTimeout()</code> devem ser passados como parâmetros adicionais no final da lista.</p>
-
-<p>Por exemplo, você pode mudar a função anterior para que ela diga oi para qualquer nome que foi passada para ela:</p>
-
-<pre class="brush: js notranslate">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Agora, você pode passar o nome da pessoa no <code>setTimeout()</code> como um terceiro parâmetro:</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Cancelando_timeouts">Cancelando timeouts</h3>
-
-<p>Finalmente, se um timeout foi criado, você pode cancelá-lo antes que o tempo especificado tenha passado chamando <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passando para o identificador a chamada <code>setTimeout()</code> como um parâmetreo. então para cancelar o timeout acima, você fará isso:</p>
-
-<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Veja <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> para uma demonstração mais desenvolvida que te permite colocar o nome da pessoa a dizer oi em um formulário, e cancelar a saudação usando um botão separado (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">veja aqui o código fonte</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout()</code> funciona perfeitamento quando você precisa executar algum código depois de um período de tempo. Mas o que acontece quando voc~e precisa executar o código de novo e de novo — por exemplo, no caso de uma animação?</p>
-
-<p>É aí que o <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> entra. Ele funciona de uma maneira muito similar à <code>setTimeout()</code>, exceto que a função que você passar como primeiro parâmetro é executada repetidamente em não menos que um número determinado de milissegundos dado no segundo parâmetro, ao invés de apenas uma vez. Você também pode passar qualquer parâmetro sendo executado como um parâmetro subsequente da chamada de <code>setInterval()</code>.</p>
-
-<p>Vamos dar uma olhada em um exemplo. A função a seguir cria um novo objeto <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, tira uma string de tempo usando <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, e depois a mostra naUI. Em seguida, ela executa a função uma vez por segundo usando <code>setInterval()</code>, criando o efeito de um relógio digital que é atualizado uma vez por segundo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja aqui</a>, e também <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">veja o código</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Assim como o <code>setTimeout()</code>, o <code>setInterval()</code> também retorna um valor identificador que você pode usar depois para cancelar o intervalo.</p>
-
-<h3 id="Cancelando_intervalos">Cancelando intervalos</h3>
-
-<p><code>setInterval()</code> continua sua execução para sempre, a menos que você faça algo sobre isso. Você provavelmente quer um jeito de parar tais tarefas, do contrário você pode acabar com error quando o navegador não puder completar outras versões futuras da tarefa, ou se a animação acabar. Você pode fazer isso do mesmo jeito que você para timeouts — passando o identificador retornado por <code>setInterval()</code> para a função <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code>:</p>
-
-<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Aprendizado_ativo_Criando_seu_próprio_cronômetro!">Aprendizado ativo: Criando seu próprio cronômetro!</h4>
-
-<p>Com tudo isso dito, nós temos um desafio para você. Faça uma cópia do nosso exemplo <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code>, e o modifique para criar seu próprio cronômetro.</p>
-
-<p>Você precisa mostrar um tempo na tela como antes, mas nesse exemplo você vai precisar de:</p>
-
-<ul>
- <li>Um botão de "início" para fazer o cronômetro começar a contar.</li>
- <li>Um botão de "parar" para parar ou pausar o tempo.</li>
- <li>Um botão de "reset" para resetar o tempo em 0.</li>
- <li>O display do tempo para mostrar o número de segundos passados.</li>
-</ul>
-
-<p>Here's a few hints for you:</p>
-
-<ul>
- <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
- <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
- <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
- <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
- <li>How would you calculate them? Have a think about it:
-  <ul>
-   <li>The number of seconds in an hour is <code>3600</code>.</li>
-   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
-   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
-  </ul>
- </li>
- <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
- <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
- <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="Coisas_para_se_manter_em_mente_sobre_o_setTimeout_e_o_setInterval">Coisas para se manter em mente sobre o setTimeout() e o setInterval()</h2>
-
-<p>Existem algumas coisinhas que devemos sempre lembrar quando estamos trabalhando com <code>setTimeout()</code> e<code>setInterval()</code>:</p>
-
-<h3 id="Timeouts_recursivos">Timeouts recursivos</h3>
-
-<p>Há outra maneira de usar o  <code>setTimeout()</code>: você pode chamá-lo recusivamnete para executar o mesmo código repetidas vezes, ao invés de usar o <code>setInterval()</code>.</p>
-
-<p>O exemplo abaixo usa um <code>setTimeout()</code> recursivo para executar a função passada a cada <code>100</code> millissegundos:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="Qual_a_diferença_entre_o_setTimeout_recursivo_e_o_setInterval">Qual a diferença entre o <code>setTimeout()</code> recursivo e o <code>setInterval()</code>?</h4>
-
-<p>A diferença entre as duas versões é bem sútil.</p>
-
-<ul>
- <li>O <code>setTimeout()</code> recursivo garante que o mesmo intervalo entre as execuções (por exemplo, <code>100</code>ms no exemplo acima). O código será executado, depois esperar <code>100</code> milissegundos antes de fazer isso de novo— então o intervalo será o mesmo, idependente do tempo que o código leva para ser executado.</li>
- <li>O exemplo usando <code>setInterval()</code> faz as coisas um pouco diferentes.O intervalo escolhido inclui o tempo necessário para executar o código que você deseja executar. Digamos que o código leva <code>40</code> milissegundos de execução — o intervalo acaba levando apenas <code>60</code> milissegundos.</li>
- <li>Quando usamos o <code>setTimeout()</code> recursivamente, cada iteração pode calcular um delay diferente antes de executar a próxima iteração. Em outras palavras, o valor do segundo parâmetro pode especificar um tempo diferente em milissegundos para esperar antes de rodar o código de novo.</li>
-</ul>
-
-<p>Quando seu código tem o potencial para levar mais tempo do que lhe foi atribuido, é melhor usar o <code>setTimeout()</code> recursivo — isso irá manter o intervalo de tempo constant entre execuções independente do quanto tempo o código levar para ser executado, e você não terá erros.</p>
-
-<h3 id="Timeouts_imediatos">Timeouts imediatos</h3>
-
-<p>Usar zero como o valor para <code>setTimeout()</code> faz a execução da callback ser o mais rápido o possível, mas apenas depois que a main thread for terminada.</p>
-
-<p>Por exemplo, o código abaixo (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">veja funcionar aqui</a>) mostra um alert que contém um <code>"Hello"</code>, depois um  alert que contém <code>"World"</code> assim que você clicar em OK no primeiro alerta.</p>
-
-<pre class="brush: js notranslate">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>Isso pode ser útil em casos onde você quer fazer um bloco de código ser executado assim que a main thread acabar o seu processamento — colocar no loop de eventos async, assim ele vai ser executado logo depois.</p>
-
-<h3 id="Cancelando_com_clearTimeout_ou_clearInterval">Cancelando com clearTimeout() ou clearInterval()</h3>
-
-<p><code>clearTimeout()</code> e <code>clearInterval()</code> usam a mesma lista de entradas para cancelamento. Isso significa que você pode usar os dois para cancelar um <code>setTimeout()</code> ou <code>setInterval()</code>.</p>
-
-<p>Mas mesmo assim, você deve usar o <code>clearTimeout()</code> para entradas <code>setTimeout()</code> e <code>clearInterval()</code> para entradas <code>setInterval()</code>. Isso evita confusões.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> é uma função de loop especializada criada para executar animações com eficiência no navegador. Ela é basicamente a versão moderna de <code>setInterval()</code> — ela executa um bloco de código específico antes que o navegador renove o display, permitindo que uma animação seja executada em um framerate adequado independente do ambiente em que está sendo executada.</p>
-
-<p>Ela foi criada em resposta à problemas ocorridos com <code>setInterval()</code>, que por exemplo não roda em uma taxa de quadros otimizada para o dispositivo, e às vezes diminui os frames, continua a rodar mesmo se a guia não esiver ativa ou se a animação for rolada para fora da página, etc.</p>
-
-<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Leia mais sobre isso em CreativeJS</a>.)</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Você pode encontrar exemplos do uso de <code>requestAnimationFrame()</code> em outros lugares do curso — por exemplo em <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, e <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
-</div>
-
-<p>O método toma como argumentos uma callback a  ser invocada antes da renovação. Esse é o padrão geral que você verá usado em:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>A ideia é definir uma função em que sua animação é atualizada (e.g. seus spritas se movem, a pontuação é atualizada, dados são recarregados, etc). Depois, você inicia o processo. No final do bloco da função você chama  <code>requestAnimationFrame()</code> com a referência da função passada como parâmetro, e isso instrui o navegador a chamar a função de novo na próxima renovação. Isso é executado continuamente, já que o código está chamando <code>requestAnimationFrame()</code> recursivamente.</p>
-
-<div class="blockIndicator note">
-<p><strong>Nota</strong>: Se você quer realizar algum tipo de animação na DOM constantemente, <a href="/en-US/docs/Web/CSS/CSS_Animations">Animações CSS</a> são provavelemente mais rápidas. elas são calculadas diretamente pelo código interno do navegador, ao invés de JavaScript.</p>
-
-<p>Se, no entanto, você está fazendo algo mais complexo e envolvendo objetos que não são diretamente assessados da DOM (como <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> ou objetos <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>), <code>requestAnimationFrame()</code> é a melhor opção na maioria dos casos</p>
-</div>
-
-<h3 id="Qual_a_velocidade_da_sua_animação">Qual a velocidade da sua animação?</h3>
-
-<p>A suavidade da sua animação é diretamente dependente na frame rate da sua animação e é medida em frames per second (fps). The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). Quanto maior esse número, mais suave será a sua animação, até certo ponto.</p>
-
-<p>Já que a maioria das tela tem uma taxa de atualização de 60Hz, a frame rate mais rápida que você pode ter é de 60fps quando trabalhando com web browsers. No entanto, mais frames significa mais processamento, o que pode ser causar uma queda de quadros e travamento.</p>
-
-<p>Se você tem um monitos com uma taxa de atualização de 60Hz e você quer atingir 60FPS você tem pelo menos 16.7 milissegundos (<code>1000 / 60</code>) para executar sua animação em cada frame. Isso é um lembrete de que você vai precisar estar atento à quantidade de código que você vai tentar executar em cada iteração do loop de animação.</p>
-
-<p><code>requestAnimationFrame()</code> sempre tenta ficar o mais próximo possível de 60 FPS. Às vezes, isso não é possível — se você tem uma animação bem complexa e você está executando ela em um computador lento, sua frame rate será menor. Em todos os casos, o <code>requestAnimationFrame()</code> sempre vai fazer o melhor que pode com o que ele tem dísponivel.</p>
-
-<h3 id="Como_o_requestAnimationFrame_se_diferencia_de_setInterval_e_setTimeout">Como o requestAnimationFrame() se diferencia de setInterval() e setTimeout()?</h3>
-
-<p>Vamos falar um pouco sobre como o método <code>requestAnimationFrame()</code> se diferencia dos outros métodos vistos anteriormente. Olhando com o código anterior:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Vamos ver isso usando o <code>setInterval()</code>:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>Como foi dito anteriormente, você não especifica um intervalo de tempo para <code>requestAnimationFrame()</code>. O método se executa o mais rápido e suave o possível nas condições atuais. O navegador também não perde tempo executando uma animação se ela está fora da tela por algum motivo, etc.</p>
-
-<p><code>setInterval()</code>, por outro lado, exige que um  intervalo de tempo seja especificado. Nós chegamos ao valor final de 17 por meio da formula <em>1000 milliseconds / 60Hz</em>, e depois arredondamos o resultado. Arredondar é uma boa ideia; se você tivesse arredondado para baixo, o navegador pode tentar executar a animação mais rápido do que 60  FPS, e não faria nenhuma diferênça na suavidade da animação de qualquer forma. Como foi dito antes, 60Hz é a taxa de atualização padrão.</p>
-
-<h3 id="Incluindo_um_timestamp">Incluindo um timestamp</h3>
-
-<p>A callback passada para a função <code>requestAnimationFrame()</code> pode ser dada um parâmetro támbem: um valor <em>timestamp</em>, que representa o tempo desde que o  <code>requestAnimationFrame()</code> começou a rodar.</p>
-
-<p>Isso é útil, permite que você execute coisas em  um tempo específico e em passo constante, independente do quão rápido ou lento é o seu dispositivo. O padão geral que você usaria se parece um pouco com isso:</p>
-
-<pre class="brush: js notranslate">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Suporte_do_navegador">Suporte do navegador</h3>
-
-<p><code>requestAnimationFrame()</code> é suportado em navegadores mais recentes do que <code>setInterval()</code>/<code>setTimeout()</code>.  Curiosamente, está disponível no Internet Explorer 10 e além.</p>
-
-<p>Então, você não precisa dar suporte para versões mais velhas do IE, não há poruqe não usar o  <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="Um_exemplo_simples">Um exemplo simples</h3>
-
-<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
-</div>
-
-<ol>
- <li>
-  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
- </li>
- <li>
-  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This is circular arrow character will act as our spinner for this example.</p>
- </li>
- <li>
-  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
-
-  <pre class="brush: css notranslate">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Insert a {{htmlelement("script")}} element just above the <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
-
-  <pre class="brush: js notranslate">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Below the previous line inside <code>draw()</code>, add the following block — this checks to see if the value of <code>rotateCount</code> is above <code>359</code> (e.g. <code>360</code>, a full circle). If so, it sets the value to its modulo of 360 (i.e. the remainder left over when the value is divided by <code>360</code>) so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of 0–359 degrees than values like <code>"128000 degrees"</code>.</p>
-
-  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>Next, below the previous block add the following line to actually rotate the spinner:
-  <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
-
-  <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
-</div>
-
-<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
-
-<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
-
-<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
-
-<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js notranslate">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So the code only cycles the sprite once every 13 animation frames.</p>
-
-<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js notranslate">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that calculates how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this:</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to the spinner, so you can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. It simply takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js notranslate">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which simply hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js notranslate">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js notranslate">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js notranslate">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
- </li>
- <li>
-  <p>Add the following function to your code next:</p>
-
-  <pre class="brush: js notranslate">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
-   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!)</li>
-   <li>Regardless of which one of the player control keys was pressed,  remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it—you're all done!</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index aa50f26b06..377cf27043 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -221,7 +221,10 @@
 /ru/docs/Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта	/ru/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 /ru/docs/Learn/HTML/Рецепты	/ru/docs/Learn/HTML/Howto
 /ru/docs/Learn/How_the_Internet_works	/ru/docs/Learn/Common_questions/How_does_the_Internet_work
-/ru/docs/Learn/JavaScript/Asynchronous/Таймауты_и_интервалы	/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+/ru/docs/Learn/JavaScript/Asynchronous/Async_await	/ru/docs/Learn/JavaScript/Asynchronous/Promises
+/ru/docs/Learn/JavaScript/Asynchronous/Concepts	/ru/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/ru/docs/conflicting/Learn/JavaScript/Asynchronous
+/ru/docs/Learn/JavaScript/Asynchronous/Таймауты_и_интервалы	/ru/docs/conflicting/Learn/JavaScript/Asynchronous
 /ru/docs/Learn/JavaScript/Building_blocks/События	/ru/docs/Learn/JavaScript/Building_blocks/Events
 /ru/docs/Learn/JavaScript/Objects/Inheritance	/ru/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ru/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ru/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 4a8d00b762..d6c88836f4 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -3137,21 +3137,6 @@
       "Sheppy"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-12-10T12:33:00.159Z",
-    "contributors": [
-      "WhoRlyCares",
-      "Bucido"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-12-02T05:41:10.583Z",
-    "contributors": [
-      "haltaction",
-      "KrasnovaM",
-      "snayp"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-09T10:05:03.071Z",
     "contributors": [
@@ -3165,11 +3150,11 @@
       "MaxYenot"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-12-09T10:32:13.319Z",
+  "Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-12-10T12:33:00.159Z",
     "contributors": [
       "WhoRlyCares",
-      "velheor24"
+      "Bucido"
     ]
   },
   "Learn/JavaScript/Building_blocks": {
@@ -23981,6 +23966,21 @@
       "TuchaNK"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-12-09T10:32:13.319Z",
+    "contributors": [
+      "WhoRlyCares",
+      "velheor24"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-12-02T05:41:10.583Z",
+    "contributors": [
+      "haltaction",
+      "KrasnovaM",
+      "snayp"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects": {
     "modified": "2019-06-04T15:16:30.349Z",
     "contributors": [
diff --git a/files/ru/conflicting/learn/javascript/asynchronous/index.html b/files/ru/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..f87839f2ff
--- /dev/null
+++ b/files/ru/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,639 @@
+---
+title: 'Объединённый асинхронный JavaScript: Таймауты и интервалы'
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">В этом руководстве рассматриваются традиционные методы, доступные в JavaScript для асинхронного выполнения кода по истечении заданного периода времени или через регулярный интервал (например, заданное количество раз в секунду), обсуждаются их полезные свойства и рассматриваются присущие им проблемы. .</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые условия:</th>
+   <td>Базовая компьютерная грамотность, достаточное понимание основ JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td>Понимание асинхронных циклов и интервалов, и то как их можно использовать.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Введение">Введение</h2>
+
+<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определённого временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p>
+
+<p>Эти функции:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Выполняет указанный блок кода один раз по истечении указанного времени</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Выполняет указанный блок кода несколько раз с определённым интервалом между каждым вызовом.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</dd>
+</dl>
+
+<p>Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).</p>
+
+<div>
+<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут ещё больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) вы узнаете больше по этому вопросу по мере изучения этой статьи.</p>
+</div>
+
+<p>В любом случае эти функции используются для запуска постоянной анимации и другой фоновой обработки на веб-сайте или в приложении. В следующих разделах мы покажем вам, как их можно использовать.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p>
+
+<ul>
+ <li>Функция для запуска или ссылка на функцию, определённую в другом месте.</li>
+ <li>Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.</li>
+ <li>Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p>
+
+<p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.</p>
+</div>
+
+<p>В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p>
+
+<pre class="brush: js">// С именованной функцией
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// С функцией определённой отдельно
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>Это может быть полезно, если у вас есть функция, которую нужно вызывать как по таймауту, так например и в ответ на событие. Но это также может  помочь поддерживать ваш код в чистоте, особенно если колбэк тайм-аута занимает больше, чем несколько строк кода.</p>
+
+<p><code>setTimeout () </code>возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.</p>
+
+<h3 id="Передача_параметров_в_функцию_setTimeout">Передача параметров в функцию setTimeout ()</h3>
+
+<p>Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.</p>
+
+<p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Очистка_таймаутов">Очистка таймаутов</h3>
+
+<p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout ()</code> отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?</p>
+
+<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p>
+
+<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p>
+
+<h3 id="Очистка_интервала">Очистка интервала</h3>
+
+<p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Активное_обучение_Создание_собственного_секундомера!">Активное обучение: Создание собственного секундомера!</h4>
+
+<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените её так, чтобы создать свой собственный простой секундомер.</p>
+
+<p>Вам нужно отображать время, как и раньше, но в этом примере вам нужно:</p>
+
+<ul>
+ <li>Кнопка "Start" для запуска секундомера.</li>
+ <li>Кнопка "Stop" для паузы/остановки.</li>
+ <li>Кнопка "Reset", чтобы сбросить счётчик времени на <code>0</code>.</li>
+ <li>Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.</li>
+</ul>
+
+<p>Несколько подсказок для вас:</p>
+
+<ul>
+ <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li>
+ <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li>
+ <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li>
+ <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.</li>
+ <li>Как вы могли бы их рассчитать? Подумайте об этом:
+  <ul>
+   <li>В одном часе <code>3600 </code>секунд.</li>
+   <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.</li>
+   <li>Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.</li>
+  </ul>
+ </li>
+ <li>Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше <code>10</code>, чтобы они больше походили на традиционные часы.</li>
+ <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li>
+ <li>Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких <code>setInterval ()</code> к часам, что приведёт к неправильному поведению.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p>
+</div>
+
+<h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2>
+
+<p>При работе с<code> setTimeout ()</code> и <code>setInterval ()</code> следует помнить о нескольких вещах. Давайте рассмотрим их.</p>
+
+<h3 id="Рекурсивные_таймауты">Рекурсивные таймауты</h3>
+
+<p>Есть ещё один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p>
+
+<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="Чем_рекурсивный_setTimeout_отличается_от_setInterval">Чем рекурсивный <code>setTimeout ()</code> отличается от <code>setInterval () </code>?</h4>
+
+<p>Разница между двумя версиями приведённого выше кода невелика.</p>
+
+<ul>
+ <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li>
+ <li>Пример с использованием <code>setInterval () </code>работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает <code>40 </code>миллисекунд - тогда интервал составляет всего <code>60 </code>миллисекунд.</li>
+ <li>При рекурсивном использовании <code>setTimeout ()</code> каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.</li>
+</ul>
+
+<p>Когда ваш код потенциально может занять больше времени, чем назначенный вами интервал времени, лучше использовать рекурсивный <code>setTimeout ()</code> - это сохранит постоянный временной интервал между выполнениями независимо от того, сколько времени потребуется для выполнения кода, и вы избежите ошибок.</p>
+
+<h3 id="Немедленные_таймауты">Немедленные таймауты</h3>
+
+<p>Использование 0 в качестве значения для <code>setTimeout ()</code> позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.</p>
+
+<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>Это может быть полезно в тех случаях, когда вы хотите установить блок кода для запуска, как только весь основной поток завершит работу - поместите его в цикл событий async, чтобы он запускался сразу после этого.</p>
+
+<h3 id="Очистка_с_помощью_clearTimeout_или_clearInterval">Очистка с помощью <code>clearTimeout()</code> или <code>clearInterval()</code></h3>
+
+<p>clearTimeout () и <code>clearInterval ()</code> используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().</p>
+
+<p>Для согласованности следует использовать <code>clearTimeout ()</code> для очистки записей <code>setTimeout ()</code> и <code>clearInterval ()</code> для очистки записей <code>setInterval ()</code>. Это поможет избежать путаницы.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> это специализированная функция цикла, созданная для эффективного запуска анимации в браузере. По сути, это современная версия <code>setInterval ()</code> - она выполняет указанный блок кода до того, как браузер перерисовывает изображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</p>
+
+<p>Он был создан в ответ на проблемы с <code>setInterval ()</code>, который, например, не работает с частотой кадров, оптимизированной для устройства, иногда пропускает кадры, продолжает работать, даже если вкладка не является активной вкладкой или анимация прокручивается со страницы и т. д.(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Читай об этом больше в CreativeJS</a>.)</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: вы можете найти примеры использования <code>requestAnimationFrame()</code> в этом курсе — например в  <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a>.</p>
+</div>
+
+<p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы хотите выполнить простое постоянное анимирование DOM , <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимация</a> вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.</p>
+
+<p>Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> или <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> ), <code>requestAnimationFrame()</code> предпочтительный вариант в большинстве случаев.</p>
+</div>
+
+<h3 id="Как_быстро_работает_ваша_анимация">Как быстро работает ваша анимация?</h3>
+
+<p>Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.</p>
+
+<p>Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.</p>
+
+<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p>
+
+<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p>
+
+<h3 id="Чем_отличается_requestAnimationFrame_от_setInterval_and_setTimeout">Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?</h3>
+
+<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Такой же код с использованием <code>setInterval()</code>:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>Как мы уже говорили ранее, вы не указываете временной интервал для <code>requestAnimationFrame ()</code>. Просто он работает максимально быстро и плавно в текущих условиях. Браузер также не тратит время на запуск, если по какой-то причине анимация выходит за пределы экрана и т. д.</p>
+
+<p><code>setInterval ()</code>, с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.</p>
+
+<h3 id="В_том_числе_временная_метка">В том числе временная метка</h3>
+
+<p>Фактическому колбэку, переданному в функцию <code>requestAnimationFrame ()</code>, также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы <code>requestAnimationFrame ().</code></p>
+
+<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
+
+<p><code>requestAnimationFrame ()</code> поддерживается в более поздних версиях браузеров, чем s<code>etInterval ()</code> / <code>setTimeout ()</code>. Интересно, что он доступен в Internet Explorer 10 и выше.</p>
+
+<p>Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="Простой_пример">Простой пример</h3>
+
+<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации <code>requestAnimationFrame()</code> , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Возьмите базовый HTML шаблон (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">такой как этот</a>).</p>
+ </li>
+ <li>
+  <p>Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.</p>
+ </li>
+ <li>
+  <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code>&lt;body&gt;</code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code>&lt;div&gt;</code> внутри <code>&lt;body&gt;</code>, по горизонтали и вертикали.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Разместите  {{htmlelement("script")}} элемент перед <code>&lt;/body&gt;</code> .</p>
+ </li>
+ <li>
+  <p>Разместите следующий JavaScript-код в  <code>&lt;script&gt;</code> . Здесь вы сохраняете ссылку на <code>&lt;div&gt;</code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p>
+
+  <pre class="brush: js">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
+  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p>
+
+  <pre class="brush: js">draw();</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: вы можете посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">рабочий образец на GitHub</a>. ( <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">исходный код</a>.)</p>
+</div>
+
+<h3 id="Очистка_вызова_requestAnimationFrame">Очистка вызова  requestAnimationFrame() </h3>
+
+<p>Очистить вызов <code>requestAnimationFrame ()</code> можно, вызвав соответствующий метод <code>cancelAnimationFrame ()</code>. (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)</p>
+
+<p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3>
+
+<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.</p>
+
+<p>Подсказки:</p>
+
+<ul>
+ <li>Обработчик события щелчка можно добавить к большинству элементов, включая документ <code>&lt;body&gt;</code>. Имеет смысл поместить его в элемент <code>&lt;body&gt;</code>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.</li>
+ <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">живой пример</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">исходный код</a>.</p>
+</div>
+
+<h3 id="Регулировка_анимации_requestAnimationFrame">Регулировка анимации <code>requestAnimationFrame()</code> </h3>
+
+<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?</p>
+
+<p>Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>Таким образом, код циклически повторяет спрайт только один раз каждые 13 кадров анимации.</p>
+
+<p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p>
+
+<pre class="brush: js">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.</p>
+
+<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p>
+
+<h2 id="Активное_обучение_игра_на_реакцию">Активное обучение: игра на реакцию</h2>
+
+<p>В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши <kbd>A</kbd>, а другой - с помощью клавиши<kbd> L</kbd>.</p>
+
+<p>При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Давайте поработаем над этим:</p>
+
+<ol>
+ <li>
+  <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript-код.</p>
+ </li>
+ <li>
+  <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>В следующем порядке:</p>
+
+  <ol>
+   <li>Ссылка на спиннер, чтобы вы могли его анимировать.</li>
+   <li>Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.</li>
+   <li>Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li>
+   <li>Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.</li>
+   <li>Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.</li>
+   <li>Ссылка на кнопку Start .</li>
+   <li>Ссылка на параграф результатов.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  if(rotateCount &gt; 359) {
+    rotateCount %= 360;
+  }
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="blockIndicator note">
+  <p><strong>Note</strong>: вы увидите, что этот пример вызывает <code>setTimeout()</code> без сохранения возвращаемого значения. (не  <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!</p>
+  </div>
+
+  <p>Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией <code>setEndgame ()</code>, которую вы определите позже.</p>
+ </li>
+ <li>
+  <p>Добавьте в свой код следующую функцию:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Player 1 won!!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Player 2 won!!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}</pre>
+
+  <p>Выполните следующие инструкции:</p>
+
+  <ol>
+   <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счётчика.</li>
+   <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li>
+   <li>Прикрепите к документу обработчик событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li>
+   <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.</li>
+   <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.</li>
+   <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li>
+   <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li>
+   <li>Только если <code>isOver</code> равно <code>true</code>, удалите обработчик событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>Вот и все - вы справились!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: Если вы где то застряли, взгляните на <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">наша версия игры</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">исходный код</a> ).</p>
+</div>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединённый асинхронный JavaScript: Таймауты и интервалы</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/Async_await">Сделайте асинхронное программирование легче с async и await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..1257b751b8
--- /dev/null
+++ b/files/ru/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,165 @@
+---
+title: Основные понятия асинхронного программирования
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Promises
+  - Асинхронность
+  - Обучение
+  - блокировки
+  - потоки
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>В этой статье мы бегло познакомимся с основными понятиями, связанными с асинхронным программированием и как они применяются в веб браузерах и  JavaScript. Вы должны понять эти концепции, прежде чем приступать к другим статьям этого раздела.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимые знания:</th>
+   <td>Базовая компьютерная грамотность, знакомство с основами JavaScript.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель:</th>
+   <td><span class="tlid-translation translation" lang="ru"><span title="">Понять основные идеи асинхронного программирования, и как они проявляются в веб-браузерах и JavaScript.</span></span></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Что_же_такое_Асинхронность">Что же такое Асинхронность?</h2>
+
+<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p>
+
+<p>Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
+
+<p>Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи асинхронно.</p>
+
+<h2 id="Блокировка_кода">Блокировка кода</h2>
+
+<p>Асинхронные техники очень полезны, особенно при веб разработке. Когда ваше приложение запущено в браузере и выполняет свои задачи, не возвращая контроль окружению, браузер может подвисать. Это называется <strong>блокировка</strong>; браузер заблокирован и не может реагировать на действия пользователя и выполнять служебные.задачи, до тех пор пока веб приложение не освободит ресурсы процессора.</p>
+
+<p>Давайте рассмотрим несколько примеров, которые покажут, что именно значит <strong>блокировка</strong>.</p>
+
+<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>Когда запустите этот пример, откройте JavaScript консоль и нажмите на кнопку — вы заметите, что параграф не появится на странице, до тех пор пока все даты не будут рассчитаны и результат последнего вычисления не будет выведен на консоль. Этот код выполняется в том порядке, в котором он написан в файле и самая последняя операция не будет запущена, пока не завершатся все операции перед ней.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Предыдущий пример слишком не реальный. Вам никогда не понадобится считать столько дат в реальном приложении! Однако, он помогает вам понять основную идею.</p>
+</div>
+
+<p>В нашем следующем примере, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">посмотреть пример</a>), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:</p>
+
+<ul>
+ <li>Кнопка "Fill canvas", если на неё кликнуть, рисует в элементе
+  <div>{{htmlelement("canvas")}}</div>
+  миллион синих кругов.</li>
+ <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.</p>
+</div>
+
+<p>Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в <strong>одном потоке</strong>. Пришло время познакомиться с понятием <strong>потока</strong>.</p>
+
+<h2 id="Потоки">Потоки</h2>
+
+<p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p>
+
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p>
+
+<p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p>
+
+<pre>Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3>
+
+<p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p>
+
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p>
+
+<pre>  Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p>
+
+<h2 id="Асинхронный_код">Асинхронный код</h2>
+
+<p>Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.</p>
+
+<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p>
+
+<pre>Main thread: Task A --&gt; Task B</pre>
+
+<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p>
+
+<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p>
+
+<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p>
+
+<pre>Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p>
+
+<p>В следующей статье, мы покажем вам, как писать асинхронный код. Захватывает дух, неправда ли? Продолжайте читать!</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p>
+
+<h2 id="В_этом_модуле">В этом модуле</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index e64c9cc30b..0000000000
--- a/files/ru/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,415 +0,0 @@
----
-title: Making asynchronous programming easier with async and await
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Асинхронность
-  - Гайд
-  - Для новичков
-translation_of: Learn/JavaScript/Asynchronous/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Примечания:</th>
-   <td>Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель материала:</th>
-   <td>Научить писать современный асинхронный код с использованием Promises и async functions.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Основы_asyncawait">Основы async/await</h2>
-
-<h3 id="Ключевое_слово_async">Ключевое слово async</h3>
-
-<p>Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>). Такая функция делает две вещи:<br>
- - Оборачивает возвращаемое значение в Promise<br>
- - Позволяет использовать ключевое слово await (см. дальше)</p>
-
-<p>Попробуйте выполнить в консоли браузера следующий код:</p>
-
-<pre class="brush: js">function hello() { return "Hello" };
-hello();</pre>
-
-<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
-
-<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
-
-<pre class="brush: js">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
-
-<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
-
-<pre class="brush: js">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>Также можно использовать стрелочные функции:</p>
-
-<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>Все они в общем случае делают одно и то же.</p>
-
-<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
-
-<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>или ещё короче</p>
-
-<pre class="brush: js">hello().then(console.log)
-</pre>
-
-<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
-
-<h3 id="Ключевое_слово_await">Ключевое слово await</h3>
-
-<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a>  — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p>
-
-<p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p>
-
-<p>Небольшой пример:</p>
-
-<pre class="brush: js">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p>
-
-<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2>
-
-<p>Давайте посмотрим на пример из предыдущей статьи:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return response.blob();
-  }
-})
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  }
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>Согласитесь, что код стал короче и понятнее — больше никаких блоков <code>.then()</code> по всему скрипту!</p>
-
-<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>Можете попрактиковаться самостоятельно, или запустить наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (а также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
-
-<h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3>
-
-<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью <code>async</code>. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p>
-
-<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br>
- <br>
- Пример:</p>
-
-<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
-
-<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
-
-<p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br>
- <br>
- К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков <code>.then()</code>, тем легче читать код.</p>
-
-<h3 id="Добавляем_обработку_ошибок">Добавляем обработку ошибок</h3>
-
-<p><br>
- Чтобы обработать ошибки у нас есть несколько вариантов</p>
-
-<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
-
-<pre class="brush: js">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    } else {
-      let myBlob = await response.blob();
-      let objectURL = URL.createObjectURL(myBlob);
-      let image = document.createElement('img');
-      image.src = objectURL;
-      document.body.appendChild(image);
-    }
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p>
-
-<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    return await response.blob();
-  }
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>Так лучше, потому что блок <code>.catch()</code> словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок <code>try</code>/<code>catch</code>, мы бы не словили ошибку, которая произошла в самой <code>myFetch()</code> функции.</p>
-
-<p>Вы можете посмотреть оба примера на GitHub:</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
-
-<h2 id="Await_и_Promise.all">Await и Promise.all()</h2>
-
-<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p>
-
-<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
-
-<pre class="brush: js">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  } else {
-    if(type === 'blob') {
-      content = await response.blob();
-    } else if(type === 'text') {
-      content = await response.text();
-    }
-
-    return content;
-  }
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
-
-<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
- <br>
- Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p>
-
-<p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Мы также можем использовать синхронный блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> внутри асинхронной функции, вместо асинхронного <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">.finally</a>()</code>, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
-
-<h2 id="Недостатки_asyncawait">Недостатки async/await</h2>
-
-<p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p>
-
-<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br>
- <br>
- ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br>
- <br>
- Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p>
-
-<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
-
-<pre class="brush: js">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
-
-<pre class="brush: js">async function timeTest() {
-  ...
-}</pre>
-
-<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
-
-<pre class="brush: js">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p>
-
-<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
-
-<pre class="brush: js">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>Здесь мы просто ждём все три  <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p>
-
-<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
-
-<pre class="brush: js">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>В данном случае мы храним три объекта <code>Promise</code> в переменных,  каждый из которых может разрешиться независимо от других.</p>
-
-<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p>
-
-<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p>
-
-<p>
- </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2>
-
-
-<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
-
-<pre class="brush: js">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>Первый метод класса теперь можно использовать таким образом:</p>
-
-<pre class="brush: js">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
-
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
-
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index fe4e6c7343..0000000000
--- a/files/ru/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: Основные понятия асинхронного программирования
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Promises
-  - Асинхронность
-  - Обучение
-  - блокировки
-  - потоки
-translation_of: Learn/JavaScript/Asynchronous/Concepts
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>В этой статье мы бегло познакомимся с основными понятиями, связанными с асинхронным программированием и как они применяются в веб браузерах и  JavaScript. Вы должны понять эти концепции, прежде чем приступать к другим статьям этого раздела.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, знакомство с основами JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td><span class="tlid-translation translation" lang="ru"><span title="">Понять основные идеи асинхронного программирования, и как они проявляются в веб-браузерах и JavaScript.</span></span></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Что_же_такое_Асинхронность">Что же такое Асинхронность?</h2>
-
-<p>Как правило, программный код выполняется последовательно, только одна конкретная операция происходит в данный момент времени. Если функция зависит от результата выполнения другой функции, то она должна дождаться пока нужная ей функция не завершит свою работу и не вернёт результат и до тех пор пока это не произойдёт, выполнение программы, по сути, будет остановлено с точки зрения пользователя.</p>
-
-<p>Пользователь современного ПК, наверняка, наблюдал, как курсор меняет свой вид и становится "разноцветным спинером" (у пользователей MacOS). Таким образом операционная система сообщает - "текущая программа, ожидает завершения какого то длительного процесса в системе и я решила сообщить тебе, что бы ты не волновался".</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; float: left; height: 256px; margin: 0px 30px 0px 0px; width: 250px;"></p>
-
-<p>Такое поведение удручает и говорит о неправильном использовании процессорного времени, к тому же современные компьютеры имеют процессоры с несколькими ядрами. Не нужно ничего ждать, вы можете передать следующую задачу свободному ядру процессора и когда она завершится, то сообщит вам об этом. Такой подход позволяет выполнять разные задачи одновременно, в этом и заключается задача асинхронности в программировании. Программная среда, которую вы используете (браузер в случае веб разработки), должна иметь возможность выполнять различного рода задачи асинхронно.</p>
-
-<h2 id="Блокировка_кода">Блокировка кода</h2>
-
-<p>Асинхронные техники очень полезны, особенно при веб разработке. Когда ваше приложение запущено в браузере и выполняет свои задачи, не возвращая контроль окружению, браузер может подвисать. Это называется <strong>блокировка</strong>; браузер заблокирован и не может реагировать на действия пользователя и выполнять служебные.задачи, до тех пор пока веб приложение не освободит ресурсы процессора.</p>
-
-<p>Давайте рассмотрим несколько примеров, которые покажут, что именно значит <strong>блокировка</strong>.</p>
-
-<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>Когда запустите этот пример, откройте JavaScript консоль и нажмите на кнопку — вы заметите, что параграф не появится на странице, до тех пор пока все даты не будут рассчитаны и результат последнего вычисления не будет выведен на консоль. Этот код выполняется в том порядке, в котором он написан в файле и самая последняя операция не будет запущена, пока не завершатся все операции перед ней.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Предыдущий пример слишком не реальный. Вам никогда не понадобится считать столько дат в реальном приложении! Однако, он помогает вам понять основную идею.</p>
-</div>
-
-<p>В нашем следующем примере, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">посмотреть пример</a>), мы сделаем что-нибудь более реалистичное, с чем вы сможете столкнуться на реальной странице. Мы заблокируем действия пользователя отрисовкой страницы. В этом примере у нас две кнопки:</p>
-
-<ul>
- <li>Кнопка "Fill canvas", если на неё кликнуть, рисует в элементе
-  <div>{{htmlelement("canvas")}}</div>
-  миллион синих кругов.</li>
- <li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>Если вы быстро нажмёте на первую кнопку и затем быстро кликните на вторую, вы увидите, что предупреждение не появится на странице, пока все круги не будут отрисованы. Первая операция блокирует выполнение следующей до тех пор пока не завершится сама.</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Хорошо, в приведённом некрасивом примере, мы получили эффект блокировки, который показывает общую проблему  при разработке приложений, с которой все время приходится бороться разработчикам.</p>
-</div>
-
-<p>Почему так происходит? Потому что JavaScript, в общем случае, выполняет команды в <strong>одном потоке</strong>. Пришло время познакомиться с понятием <strong>потока</strong>.</p>
-
-<h2 id="Потоки">Потоки</h2>
-
-<p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p>
-
-<pre>Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p>
-
-<p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p>
-
-<pre>Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3>
-
-<p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p>
-
-<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p>
-
-<pre>  Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p>
-
-<h2 id="Асинхронный_код">Асинхронный код</h2>
-
-<p>Воркеры полезный инструмент, но у них есть свои ограничения. Самое существенное, заключается в том, что они не имеют доступа к {{Glossary("DOM")}} — вы не можете использовать воркер для обновления UI. Мы не можем отрисовать миллион наших точек  внутри воркера; он может только обработать большой объем информации.</p>
-
-<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p>
-
-<pre>Main thread: Task A --&gt; Task B</pre>
-
-<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p>
-
-<pre>  Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p>
-
-<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p>
-
-<pre>Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p>
-
-<p>В следующей статье, мы покажем вам, как писать асинхронный код. Захватывает дух, неправда ли? Продолжайте читать!</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>При проектировании современных программ все больше используется асинхронное программирование, чтобы программа имела возможность выполнять несколько операций в конкретный момент времени. Как только вы начнёте использовать новые, более мощные возможности API, вы обнаружите множество ситуаций, где решить нужную задачу можно только асинхронно. Раньше было сложно писать асинхронный код. До сих пор, нужно время, чтобы привыкнуть к такому подходу, но процесс стал намного легче. Далее, в этом разделе, мы будем глубже исследовать вопрос, когда же асинхронный код необходим и как спроектировать программу, чтобы избежать проблем, описанных выше.</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/ru/learn/javascript/asynchronous/promises/index.html b/files/ru/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..4bf8481105
--- /dev/null
+++ b/files/ru/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,416 @@
+---
+title: Making asynchronous programming easier with async and await
+slug: Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Асинхронность
+  - Гайд
+  - Для новичков
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Примечания:</th>
+   <td>Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Цель материала:</th>
+   <td>Научить писать современный асинхронный код с использованием Promises и async functions.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Основы_asyncawait">Основы async/await</h2>
+
+<h3 id="Ключевое_слово_async">Ключевое слово async</h3>
+
+<p>Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>). Такая функция делает две вещи:<br>
+ - Оборачивает возвращаемое значение в Promise<br>
+ - Позволяет использовать ключевое слово await (см. дальше)</p>
+
+<p>Попробуйте выполнить в консоли браузера следующий код:</p>
+
+<pre class="brush: js">function hello() { return "Hello" };
+hello();</pre>
+
+<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
+
+<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
+
+<pre class="brush: js">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
+
+<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
+
+<pre class="brush: js">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>Также можно использовать стрелочные функции:</p>
+
+<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>Все они в общем случае делают одно и то же.</p>
+
+<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
+
+<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>или ещё короче</p>
+
+<pre class="brush: js">hello().then(console.log)
+</pre>
+
+<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
+
+<h3 id="Ключевое_слово_await">Ключевое слово await</h3>
+
+<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a>  — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p>
+
+<p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p>
+
+<p>Небольшой пример:</p>
+
+<pre class="brush: js">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p>
+
+<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2>
+
+<p>Давайте посмотрим на пример из предыдущей статьи:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>Согласитесь, что код стал короче и понятнее — больше никаких блоков <code>.then()</code> по всему скрипту!</p>
+
+<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>Можете попрактиковаться самостоятельно, или запустить наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (а также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3>
+
+<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью <code>async</code>. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p>
+
+<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br>
+ <br>
+ Пример:</p>
+
+<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
+
+<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
+
+<p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br>
+ <br>
+ К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков <code>.then()</code>, тем легче читать код.</p>
+
+<h3 id="Добавляем_обработку_ошибок">Добавляем обработку ошибок</h3>
+
+<p><br>
+ Чтобы обработать ошибки у нас есть несколько вариантов</p>
+
+<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
+
+<pre class="brush: js">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    } else {
+      let myBlob = await response.blob();
+      let objectURL = URL.createObjectURL(myBlob);
+      let image = document.createElement('img');
+      image.src = objectURL;
+      document.body.appendChild(image);
+    }
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p>
+
+<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>Так лучше, потому что блок <code>.catch()</code> словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок <code>try</code>/<code>catch</code>, мы бы не словили ошибку, которая произошла в самой <code>myFetch()</code> функции.</p>
+
+<p>Вы можете посмотреть оба примера на GitHub:</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Await_и_Promise.all">Await и Promise.all()</h2>
+
+<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p>
+
+<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
+
+<pre class="brush: js">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+
+    return content;
+  }
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
+
+<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
+ <br>
+ Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p>
+
+<p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примечание</strong>: Мы также можем использовать синхронный блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> внутри асинхронной функции, вместо асинхронного <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">.finally</a>()</code>, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="Недостатки_asyncawait">Недостатки async/await</h2>
+
+<p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p>
+
+<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br>
+ <br>
+ ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br>
+ <br>
+ Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p>
+
+<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
+
+<pre class="brush: js">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
+
+<pre class="brush: js">async function timeTest() {
+  ...
+}</pre>
+
+<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
+
+<pre class="brush: js">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p>
+
+<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
+
+<pre class="brush: js">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>Здесь мы просто ждём все три  <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p>
+
+<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
+
+<pre class="brush: js">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>В данном случае мы храним три объекта <code>Promise</code> в переменных,  каждый из которых может разрешиться независимо от других.</p>
+
+<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p>
+
+<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p>
+
+<p>
+ </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+
+<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>Первый метод класса теперь можно использовать таким образом:</p>
+
+<pre class="brush: js">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Заключение">Заключение</h2>
+
+<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 19019a19a9..0000000000
--- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,639 +0,0 @@
----
-title: 'Объединённый асинхронный JavaScript: Таймауты и интервалы'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интервалы
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">В этом руководстве рассматриваются традиционные методы, доступные в JavaScript для асинхронного выполнения кода по истечении заданного периода времени или через регулярный интервал (например, заданное количество раз в секунду), обсуждаются их полезные свойства и рассматриваются присущие им проблемы. .</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, достаточное понимание основ JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимание асинхронных циклов и интервалов, и то как их можно использовать.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Введение">Введение</h2>
-
-<p>В течение долгого времени веб-платформа предлагала программистам JavaScript ряд функций, которые позволяли им асинхронно выполнять код по истечении определённого временного интервала и повторно выполнять асинхронный блок кода, пока вы не скажете ему остановиться.</p>
-
-<p>Эти функции:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Выполняет указанный блок кода один раз по истечении указанного времени</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Выполняет указанный блок кода несколько раз с определённым интервалом между каждым вызовом.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>Современная версия setInterval (). Выполняют указанный блок кода перед тем, как браузер в следующий раз перерисовывает отображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</dd>
-</dl>
-
-<p>Асинхронный код, установленный этими функциями, выполняется в основном потоке (по истечении указанного им таймера).</p>
-
-<div>
-<p>Важно знать, что вы можете (и часто будете) запускать другой код до выполнения вызова setTimeout () или между итерациями setInterval (). В зависимости от того, насколько интенсивно используются эти операции для процессора, они могут ещё больше задержать выполнение асинхронного кода, поскольку любой асинхронный код будет выполняться только после того, как станет доступен основной поток. (Другими словами, когда стек пуст.) вы узнаете больше по этому вопросу по мере изучения этой статьи.</p>
-</div>
-
-<p>В любом случае эти функции используются для запуска постоянной анимации и другой фоновой обработки на веб-сайте или в приложении. В следующих разделах мы покажем вам, как их можно использовать.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>Как мы ранее отметили, setTimeout () выполняет определённый блок кода один раз по истечении заданного времени. Принимает следующие параметры:</p>
-
-<ul>
- <li>Функция для запуска или ссылка на функцию, определённую в другом месте.</li>
- <li>Число, представляющее интервал времени в миллисекундах (1000 миллисекунд равняется 1 секунде) ожидания перед выполнением кода. Если вы укажете значение 0 (или просто опустите значение), функция запустится как можно скорее. (См. Примечание ниже о том, почему он запускается «как можно скорее», а не «сразу».) Подробнее о том, почему вы, возможно, захотите сделать это позже.</li>
- <li>Значений, представляющие любые параметры, которые вы хотите передать функции при её запуске.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>NOTE: </strong> Указанное время (или задержка) не является гарантированным временем выполнения, а скорее минимальным временем выполнения. Обратные вызовы, которые вы передаёте этим функциям, не могут выполняться, пока стек в основном потоке не станет пустым.</p>
-
-<p>Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш колбэк будет выполнен через несколько секунд.</p>
-</div>
-
-<p>В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p>
-
-<pre class="brush: js">// С именованной функцией
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// С функцией определённой отдельно
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>Это может быть полезно, если у вас есть функция, которую нужно вызывать как по таймауту, так например и в ответ на событие. Но это также может  помочь поддерживать ваш код в чистоте, особенно если колбэк тайм-аута занимает больше, чем несколько строк кода.</p>
-
-<p><code>setTimeout () </code>возвращает значение идентификатора, которое можно использовать для ссылки на тайм-аут позже, например, когда вы хотите его остановить.</p>
-
-<h3 id="Передача_параметров_в_функцию_setTimeout">Передача параметров в функцию setTimeout ()</h3>
-
-<p>Любые параметры, которые вы хотите передать функции, выполняемой внутри setTimeout (), должны быть переданы ей как дополнительные параметры в конце списка.</p>
-
-<p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Очистка_таймаутов">Очистка таймаутов</h3>
-
-<p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout ()</code> отлично работает, когда вам нужно один раз запустить код по истечении заданного периода времени. Но что происходит, когда вам нужно запускать код снова и снова - например, в случае анимации?</p>
-
-<p>Здесь пригодится <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a> . Работает очень похоже на setTimeout (), за исключением того, что функция, которую вы передаёте в качестве первого параметра, выполняется повторно не менее чем за количество миллисекунд, заданных вторым параметром. Вы также можете передать любые параметры, необходимые для выполняемой функции, в качестве последующих параметров вызова setInterval ().</p>
-
-<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Как и <code>setTimeout ()</code>, <code>setInterval ()</code> возвращает определённое значение, которое вы можете использовать позже, когда вам нужно очистить интервал.</p>
-
-<h3 id="Очистка_интервала">Очистка интервала</h3>
-
-<p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Активное_обучение_Создание_собственного_секундомера!">Активное обучение: Создание собственного секундомера!</h4>
-
-<p>Учитывая все вышесказанное, у нас есть для вас задача. Возьмите копию нашего примера <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> , и измените её так, чтобы создать свой собственный простой секундомер.</p>
-
-<p>Вам нужно отображать время, как и раньше, но в этом примере вам нужно:</p>
-
-<ul>
- <li>Кнопка "Start" для запуска секундомера.</li>
- <li>Кнопка "Stop" для паузы/остановки.</li>
- <li>Кнопка "Reset", чтобы сбросить счётчик времени на <code>0</code>.</li>
- <li>Дисплей времени, чтобы отображать количество прошедших секунд а не фактическое время.</li>
-</ul>
-
-<p>Несколько подсказок для вас:</p>
-
-<ul>
- <li>Вы можете структурировать и стилизовать разметку кнопок по своему усмотрению; просто убедитесь, что вы используете семантический HTML с кавычками, которые позволяют захватывать ссылки на кнопки с помощью JavaScript.</li>
- <li>Вероятно, вы захотите создать переменную, которая начинается с 0, а затем увеличивается на единицу каждую секунду с использованием постоянного цикла.</li>
- <li>Этот пример проще создать без использования объекта Date (), как мы это делали в нашей версии, но он будет менее точен - вы не можете гарантировать, что колбэк сработает ровно через 1000 мс. Более точным способом было бы запустить startTime = Date.now (), чтобы получить метку времени, когда пользователь нажал кнопку запуска, а затем выполнить Date.now () - startTime, чтобы получить количество миллисекунд после того, как была нажата кнопка запуска .</li>
- <li>Вам также нужно рассчитать количество часов, минут и секунд как отдельные значения, а затем отображать их вместе в строке после каждой итерации цикла. На втором счётчике вы можете отработать каждую из них.</li>
- <li>Как вы могли бы их рассчитать? Подумайте об этом:
-  <ul>
-   <li>В одном часе <code>3600 </code>секунд.</li>
-   <li>Количество минут - это количество секунд, оставшееся после вычитания всех часов, разделённое на 60.</li>
-   <li>Количество секунд будет количеством секунд, оставшихся после вычитания всех минут.</li>
-  </ul>
- </li>
- <li>Вам необходимо включить начальный ноль в отображаемые значения, если сумма меньше <code>10</code>, чтобы они больше походили на традиционные часы.</li>
- <li>Чтобы приостановить секундомер, вам нужно очистить интервал. Чтобы сбросить его, вам нудно установить счётчик обратно на <code>0</code>, очистить интервал, а затем немедленно обновить отображение.</li>
- <li>Вероятно, вам следует отключить кнопку запуска после её нажатия один раз и снова включить её после того, как вы остановили / сбросили её. В противном случае многократное нажатие кнопки запуска приведёт к применению нескольких <code>setInterval ()</code> к часам, что приведёт к неправильному поведению.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы застряли, вы можете <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">увидеть нашу версию</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">исходный код</a> ).</p>
-</div>
-
-<h2 id="Что_нужно_помнить_о_setTimeout_и_setInterval">Что нужно помнить о <code>setTimeout ()</code> и <code>setInterval ()</code></h2>
-
-<p>При работе с<code> setTimeout ()</code> и <code>setInterval ()</code> следует помнить о нескольких вещах. Давайте рассмотрим их.</p>
-
-<h3 id="Рекурсивные_таймауты">Рекурсивные таймауты</h3>
-
-<p>Есть ещё один способ использования <code>setTimeout ()</code>: вы можете вызвать его рекурсивно для повторного запуска одного и того же кода вместо использования <code>setInterval ()</code>.</p>
-
-<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="Чем_рекурсивный_setTimeout_отличается_от_setInterval">Чем рекурсивный <code>setTimeout ()</code> отличается от <code>setInterval () </code>?</h4>
-
-<p>Разница между двумя версиями приведённого выше кода невелика.</p>
-
-<ul>
- <li>Рекурсивный <code>setTimeout ()</code> гарантирует такую же задержку между выполнениями. (Например, 100 мс в приведённом выше случае.) Код будет запущен, затем подождёт 100 миллисекунд, прежде чем запустится снова, поэтому интервал будет одинаковым, независимо от того, сколько времени требуется для выполнения кода.</li>
- <li>Пример с использованием <code>setInterval () </code>работает несколько иначе. Выбранный вами интервал включает время, затрачиваемое на выполнение кода, который вы хотите запустить. Предположим, что выполнение кода занимает <code>40 </code>миллисекунд - тогда интервал составляет всего <code>60 </code>миллисекунд.</li>
- <li>При рекурсивном использовании <code>setTimeout ()</code> каждая итерация может вычислять различную задержку перед запуском следующей итерации. Другими словами, значение второго параметра может указывать другое время в миллисекундах для ожидания перед повторным запуском кода.</li>
-</ul>
-
-<p>Когда ваш код потенциально может занять больше времени, чем назначенный вами интервал времени, лучше использовать рекурсивный <code>setTimeout ()</code> - это сохранит постоянный временной интервал между выполнениями независимо от того, сколько времени потребуется для выполнения кода, и вы избежите ошибок.</p>
-
-<h3 id="Немедленные_таймауты">Немедленные таймауты</h3>
-
-<p>Использование 0 в качестве значения для <code>setTimeout ()</code> позволяет планировать выполнение указанной колбэк-функции как можно скорее, но только после того, как будет запущен основной поток кода.</p>
-
-<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>Это может быть полезно в тех случаях, когда вы хотите установить блок кода для запуска, как только весь основной поток завершит работу - поместите его в цикл событий async, чтобы он запускался сразу после этого.</p>
-
-<h3 id="Очистка_с_помощью_clearTimeout_или_clearInterval">Очистка с помощью <code>clearTimeout()</code> или <code>clearInterval()</code></h3>
-
-<p>clearTimeout () и <code>clearInterval ()</code> используют один и тот же список записей для очистки. Интересно, что это означает, что вы можете использовать любой метод для очистки setTimeout () или setInterval ().</p>
-
-<p>Для согласованности следует использовать <code>clearTimeout ()</code> для очистки записей <code>setTimeout ()</code> и <code>clearInterval ()</code> для очистки записей <code>setInterval ()</code>. Это поможет избежать путаницы.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> это специализированная функция цикла, созданная для эффективного запуска анимации в браузере. По сути, это современная версия <code>setInterval ()</code> - она выполняет указанный блок кода до того, как браузер перерисовывает изображение, позволяя запускать анимацию с подходящей частотой кадров независимо от среды, в которой она выполняется.</p>
-
-<p>Он был создан в ответ на проблемы с <code>setInterval ()</code>, который, например, не работает с частотой кадров, оптимизированной для устройства, иногда пропускает кадры, продолжает работать, даже если вкладка не является активной вкладкой или анимация прокручивается со страницы и т. д.(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Читай об этом больше в CreativeJS</a>.)</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: вы можете найти примеры использования <code>requestAnimationFrame()</code> в этом курсе — например в  <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a>.</p>
-</div>
-
-<p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Идея состоит в том, чтобы определить функцию, в которой ваша анимация обновляется (например, ваши спрайты перемещаются, счёт обновляется, данные обновляются или что-то ещё). Затем вы вызываете его, чтобы начать процесс. В конце функционального блока вы вызываете <code>requestAnimationFrame ()</code> со ссылкой на функцию, переданной в качестве параметра, и это даёт браузеру указание вызвать функцию снова при следующей перерисовке дисплея. Затем он выполняется непрерывно, поскольку код рекурсивно вызывает <code>requestAnimationFrame ().</code></p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы хотите выполнить простое постоянное анимирование DOM , <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Анимация</a> вероятно будет быстрее. Она вычисляется непосредственно внутренним кодом браузера, а не JavaScript.</p>
-
-<p>Однако, если вы делаете что-то более сложное, включающее объекты, которые не доступны напрямую в the DOM (такие как <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> или <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> ), <code>requestAnimationFrame()</code> предпочтительный вариант в большинстве случаев.</p>
-</div>
-
-<h3 id="Как_быстро_работает_ваша_анимация">Как быстро работает ваша анимация?</h3>
-
-<p>Плавность анимации напрямую зависит от частоты кадров анимации и измеряется в кадрах в секунду (fps). Чем выше это число, тем плавное будет выглядеть ваша анимация до точки.</p>
-
-<p>Поскольку большинство экранов имеют частоту обновления 60 Гц, максимальная частота кадров, к которой вы можете стремиться, составляет 60 кадров в секунду (FPS) при работе с веб-браузерами. Однако большее количество кадров означает больше обработки, которая часто может вызывать заикание и пропуски, также известные как пропадание кадров или заедание.</p>
-
-<p>Если у вас есть монитор с частотой обновления 60 Гц и вы хотите достичь 60 кадров в секунду, у вас есть около 16,7 миллисекунд <code>(1000/60)</code> для выполнения кода анимации для рендеринга каждого кадра. Это напоминание о том, что вам нужно помнить об объёме кода, который вы пытаетесь запустить во время каждого прохождения цикла анимации.</p>
-
-<p><code>requestAnimationFrame ()</code> всегда пытается приблизиться к этому волшебному значению 60 FPS, насколько это возможно. Иногда это невозможно - если у вас действительно сложная анимация и вы запускаете её на медленном компьютере, частота кадров будет меньше. Во всех случаях<code> requestAnimationFrame ()</code> всегда будет делать все возможное с тем, что у него есть.</p>
-
-<h3 id="Чем_отличается_requestAnimationFrame_от_setInterval_and_setTimeout">Чем отличается requestAnimationFrame() от setInterval() and setTimeout()?</h3>
-
-<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Такой же код с использованием <code>setInterval()</code>:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>Как мы уже говорили ранее, вы не указываете временной интервал для <code>requestAnimationFrame ()</code>. Просто он работает максимально быстро и плавно в текущих условиях. Браузер также не тратит время на запуск, если по какой-то причине анимация выходит за пределы экрана и т. д.</p>
-
-<p><code>setInterval ()</code>, с другой стороны, требует указания интервала. Мы пришли к нашему окончательному значению 17 по формуле 1000 миллисекунд / 60 Гц, а затем округлили его в большую сторону. Округление - хорошая идея; если вы округлите в меньшую сторону, браузер может попытаться запустить анимацию со скоростью, превышающей 60 кадров в секунду, и в любом случае это не повлияет на плавность анимации. Как мы уже говорили, стандартная частота обновления - 60 Гц.</p>
-
-<h3 id="В_том_числе_временная_метка">В том числе временная метка</h3>
-
-<p>Фактическому колбэку, переданному в функцию <code>requestAnimationFrame ()</code>, также может быть задан параметр: значение отметки времени, которое представляет время с момента начала работы <code>requestAnimationFrame ().</code></p>
-
-<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Поддержка_браузерами">Поддержка браузерами</h3>
-
-<p><code>requestAnimationFrame ()</code> поддерживается в более поздних версиях браузеров, чем s<code>etInterval ()</code> / <code>setTimeout ()</code>. Интересно, что он доступен в Internet Explorer 10 и выше.</p>
-
-<p>Итак, если вам не требуется поддержка старых версий IE, нет особых причин не использовать <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="Простой_пример">Простой пример</h3>
-
-<p>Хватит теории! Давайте выполним упражнение с использованием <code>requestAnimationFrame()</code> . Создадим простую анимацию "spinner animation"—вы могли её видеть в приложениях когда происходят задержки при ответе с сервера и т.п..</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Для такой простой анимации, вам следовало бы использовать CSS . Однако такой вид анимации очень полезен для демонстрации <code>requestAnimationFrame()</code> , вы скорее всего будете использовать этот метод когда делаете что-то более сложное, например обновление отображения игры в каждом кадре.</p>
-</div>
-
-<ol>
- <li>
-  <p>Возьмите базовый HTML шаблон (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">такой как этот</a>).</p>
- </li>
- <li>
-  <p>Поместите пустой  {{htmlelement("div")}} элемент внутри элемента {{htmlelement("body")}}, затем добавьте внутрь символ ↻ . Этот символ будет действовать как spinner в нашем примере.</p>
- </li>
- <li>
-  <p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code>&lt;body&gt;</code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code>&lt;div&gt;</code> внутри <code>&lt;body&gt;</code>, по горизонтали и вертикали.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Разместите  {{htmlelement("script")}} элемент перед <code>&lt;/body&gt;</code> .</p>
- </li>
- <li>
-  <p>Разместите следующий JavaScript-код в  <code>&lt;script&gt;</code> . Здесь вы сохраняете ссылку на <code>&lt;div&gt;</code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p>
-
-  <pre class="brush: js">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
-  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p>
-
-  <pre class="brush: js">draw();</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: вы можете посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">рабочий образец на GitHub</a>. ( <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">исходный код</a>.)</p>
-</div>
-
-<h3 id="Очистка_вызова_requestAnimationFrame">Очистка вызова  requestAnimationFrame() </h3>
-
-<p>Очистить вызов <code>requestAnimationFrame ()</code> можно, вызвав соответствующий метод <code>cancelAnimationFrame ()</code>. (Обратите внимание, что имя функции начинается с «cancel», а не «clear», как у методов «set ...».)</p>
-
-<p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3>
-
-<p>В этом упражнении мы хотели бы, чтобы вы протестировали метод <code>cancelAnimationFrame ()</code>, взяв наш предыдущий пример и обновив его, добавив обработчик событий для запуска и остановки счётчика при щелчке мышью в любом месте страницы.</p>
-
-<p>Подсказки:</p>
-
-<ul>
- <li>Обработчик события щелчка можно добавить к большинству элементов, включая документ <code>&lt;body&gt;</code>. Имеет смысл поместить его в элемент <code>&lt;body&gt;</code>, если вы хотите максимизировать интерактивную область - событие всплывает до его дочерних элементов.</li>
- <li>Вы захотите добавить переменную отслеживания, чтобы проверить, вращается ли счётчик или нет, очистив кадр анимации, если он есть, и снова вызвать его, если это не так.</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Для начала попробуйте сами; если вы действительно застряли, посмотрите наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">живой пример</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">исходный код</a>.</p>
-</div>
-
-<h3 id="Регулировка_анимации_requestAnimationFrame">Регулировка анимации <code>requestAnimationFrame()</code> </h3>
-
-<p>Одним из ограничений <code>requestAnimationFrame ()</code> является то, что вы не можете выбирать частоту кадров. В большинстве случаев это не проблема, так как обычно вы хотите, чтобы ваша анимация работала как можно плавное. Но как насчёт того, чтобы создать олдскульную 8-битную анимацию?</p>
-
-<p>Это было проблемой, например в анимации ходьбы, вдохновлённой островом обезьян, из статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a>:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>Таким образом, код циклически повторяет спрайт только один раз каждые 13 кадров анимации.</p>
-
-<p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p>
-
-<pre class="brush: js">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>Это код, который вычисляет, как обновлять позицию в каждом кадре анимации.</p>
-
-<p>Метод, который вы используете для регулирования анимации, будет зависеть от вашего конкретного кода. Например, в предыдущем примере счётчика вы могли заставить его двигаться медленнее, увеличивая rotateCount только на единицу в каждом кадре вместо двух.</p>
-
-<h2 id="Активное_обучение_игра_на_реакцию">Активное обучение: игра на реакцию</h2>
-
-<p>В последнем разделе этой статьи вы создадите игру на реакцию для двух игроков. В игре будет два игрока, один из которых управляет игрой с помощью клавиши <kbd>A</kbd>, а другой - с помощью клавиши<kbd> L</kbd>.</p>
-
-<p>При нажатии кнопки «Start» счётчик, подобный тому, что мы видели ранее, отображается в течение случайного промежутка времени от 5 до 10 секунд. По истечении этого времени появится сообщение «PLAYERS GO !!» - как только это произойдёт, первый игрок, который нажмёт свою кнопку управления, выиграет игру.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Давайте поработаем над этим:</p>
-
-<ol>
- <li>
-  <p>Прежде всего, скачайте <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">стартовый файл</a>. Он содержит законченную структуру HTML и стили CSS, что даёт нам игровую доску, которая показывает информацию двух игроков (как показано выше), но с счётчиком и параграфом результатов, отображаемыми друг над другом. Вам нужно просто написать JavaScript-код.</p>
- </li>
- <li>
-  <p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>В следующем порядке:</p>
-
-  <ol>
-   <li>Ссылка на спиннер, чтобы вы могли его анимировать.</li>
-   <li>Ссылка на элемент {{htmlelement("div")}} содержащий спиннер, используемый для отображения и скрытия.</li>
-   <li>Счётчик поворотов. Он определяет, на сколько вы хотите показывать вращение спиннера на каждом кадре анимации.</li>
-   <li>Нулевое время начала. Это будет заполнено временем начала, когда счётчик начнёт вращаться.</li>
-   <li>Неинициализированная переменная для последующего хранения вызова {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} который анимирует спиннер.</li>
-   <li>Ссылка на кнопку Start .</li>
-   <li>Ссылка на параграф результатов.</li>
-  </ol>
- </li>
- <li>
-  <p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  if(rotateCount &gt; 359) {
-    rotateCount %= 360;
-  }
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="blockIndicator note">
-  <p><strong>Note</strong>: вы увидите, что этот пример вызывает <code>setTimeout()</code> без сохранения возвращаемого значения. (не  <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>Это прекрасно работает, если вам не нужно очищать интервал / тайм-аут в любой момент. Если вы это сделаете, вам нужно будет сохранить возвращённый идентификатор!</p>
-  </div>
-
-  <p>Конечным результатом предыдущего кода является то, что при нажатии кнопки «Start» отображается спиннер, и игроки вынуждены ждать произвольное количество времени, прежде чем их попросят нажать их кнопку. Эта последняя часть обрабатывается функцией <code>setEndgame ()</code>, которую вы определите позже.</p>
- </li>
- <li>
-  <p>Добавьте в свой код следующую функцию:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Player 1 won!!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Player 2 won!!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}</pre>
-
-  <p>Выполните следующие инструкции:</p>
-
-  <ol>
-   <li>Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счётчика.</li>
-   <li>Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.</li>
-   <li>Прикрепите к документу обработчик событий <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> . При нажатии любой кнопки запускается функция <code>keyHandler()</code>.</li>
-   <li>Внутри <code>keyHandler()</code>, код включает объект события в качестве параметра (представленного <code>e</code>) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для ответа на определённые нажатия клавиш определёнными действиями.</li>
-   <li>Установите для переменной <code>isOver</code> значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клавиши.</li>
-   <li>Регистрация <code>e.key</code> в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.</li>
-   <li>Когда <code>e.key</code> принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда <code>e.key</code> это "l", отобразить сообщение о том, что Player 2 выиграл. (<strong>Note:</strong> Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для <code>isOver</code> значение <code>true</code>.</li>
-   <li>Только если <code>isOver</code> равно <code>true</code>, удалите обработчик событий <code>keydown</code> с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете <code>setTimeout()</code> для вызова <code>reset()</code> через 5 секунд — как объяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.</li>
-  </ol>
- </li>
-</ol>
-
-<p>Вот и все - вы справились!</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Если вы где то застряли, взгляните на <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">наша версия игры</a> (см. также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">исходный код</a> ).</p>
-</div>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Вот и все — все основы асинхронных циклов и интервалов рассмотрены в статье. Вы найдёте эти методы полезными во многих ситуациях, но постарайтесь не злоупотреблять ими! Поскольку они по-прежнему выполняются в основном потоке, тяжёлые и интенсивные колбэки (особенно те, которые управляют DOM) могут действительно замедлить страницу, если вы не будете осторожны.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Объединённый асинхронный JavaScript: Таймауты и интервалы</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/Async_await">Сделайте асинхронное программирование легче с async и await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
-
-<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
-<div class="gtx-trans-icon"></div>
-</div>
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 6789bcbf8c..1b57d8f385 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1094,6 +1094,10 @@
 /zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form	/zh-CN/docs/Learn/Forms/Your_first_form
 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/其他嵌入技术	/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 /zh-CN/docs/Learn/HTML/Multimedia_and_embedding/在网页中添加矢量图形	/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-CN/docs/Learn/JavaScript/First_steps/变量	/zh-CN/docs/Learn/JavaScript/First_steps/Variables
 /zh-CN/docs/Learn/JavaScript/First_steps/第一点	/zh-CN/docs/Learn/JavaScript/First_steps/A_first_splash
 /zh-CN/docs/Learn/JavaScript/Objects/Inheritance	/zh-CN/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
@@ -1273,6 +1277,7 @@
 /zh-CN/docs/Web/API/Document/onfullscreenchange	/zh-CN/docs/conflicting/Web/API/Document/fullscreenchange_event
 /zh-CN/docs/Web/API/Document/onfullscreenerror	/zh-CN/docs/Web/API/Document/fullscreenerror_event
 /zh-CN/docs/Web/API/Document/onreadystatechange	/en-US/docs/Web/API/Document/readystatechange_event
+/zh-CN/docs/Web/API/Document/onvisibilitychange	/zh-CN/docs/conflicting/Web/API/Document/visibilitychange_event
 /zh-CN/docs/Web/API/Document/rouchmove_event	/zh-CN/docs/Web/API/Document/touchmove_event
 /zh-CN/docs/Web/API/DocumentOrShadowRoot/activeElement	/zh-CN/docs/Web/API/Document/activeElement
 /zh-CN/docs/Web/API/DocumentOrShadowRoot/elementFromPoint	/zh-CN/docs/Web/API/Document/elementFromPoint
@@ -1466,6 +1471,7 @@
 /zh-CN/docs/Web/API/ParentNode.childElementCount	/zh-CN/docs/Web/API/Element/childElementCount
 /zh-CN/docs/Web/API/ParentNode/childElementCount	/zh-CN/docs/Web/API/Element/childElementCount
 /zh-CN/docs/Web/API/Performance.now()	/zh-CN/docs/Web/API/Performance/now
+/zh-CN/docs/Web/API/Performance/onresourcetimingbufferfull	/zh-CN/docs/Web/API/Performance/resourcetimingbufferfull_event
 /zh-CN/docs/Web/API/Performance/内存	/zh-CN/docs/Web/API/Performance/memory
 /zh-CN/docs/Web/API/Position	/zh-CN/docs/Web/API/GeolocationPosition
 /zh-CN/docs/Web/API/Position/coords	/zh-CN/docs/Web/API/GeolocationPosition/coords
@@ -1599,6 +1605,7 @@
 /zh-CN/docs/Web/API/Window/crypto	/zh-CN/docs/Web/API/crypto_property
 /zh-CN/docs/Web/API/Window/minimize	/zh-CN/docs/conflicting/Web/API/Window
 /zh-CN/docs/Web/API/Window/mozAnimationStartTIme	/zh-CN/docs/Web/API/Animation/startTime
+/zh-CN/docs/Web/API/Window/onappinstalled	/zh-CN/docs/Web/API/Window/appinstalled_event
 /zh-CN/docs/Web/API/Window/onbeforeunload	/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload
 /zh-CN/docs/Web/API/Window/ongamepadconnected	/zh-CN/docs/conflicting/Web/API/Window/gamepadconnected_event
 /zh-CN/docs/Web/API/Window/ongamepaddisconnected	/zh-CN/docs/Web/API/Window/gamepaddisconnected_event
@@ -2284,12 +2291,12 @@
 /zh-CN/docs/learn/JavaScript/Building_blocks/事件	/zh-CN/docs/Learn/JavaScript/Building_blocks/Events
 /zh-CN/docs/learn/JavaScript/Building_blocks/相片走廊	/zh-CN/docs/Learn/JavaScript/Building_blocks/Image_gallery
 /zh-CN/docs/learn/JavaScript/异步	/zh-CN/docs/Learn/JavaScript/Asynchronous
-/zh-CN/docs/learn/JavaScript/异步/Async_await	/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await
-/zh-CN/docs/learn/JavaScript/异步/Choosing_the_right_approach	/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+/zh-CN/docs/learn/JavaScript/异步/Async_await	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-CN/docs/learn/JavaScript/异步/Choosing_the_right_approach	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous
 /zh-CN/docs/learn/JavaScript/异步/Promises语法	/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises
-/zh-CN/docs/learn/JavaScript/异步/概念	/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts
+/zh-CN/docs/learn/JavaScript/异步/概念	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
 /zh-CN/docs/learn/JavaScript/异步/简介	/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing
-/zh-CN/docs/learn/JavaScript/异步/超时和间隔	/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+/zh-CN/docs/learn/JavaScript/异步/超时和间隔	/zh-CN/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-CN/docs/learn/Performance/CSS_performance	/zh-CN/docs/Learn/Performance/CSS
 /zh-CN/docs/learn/Performance/dns-prefetch	/zh-CN/docs/Web/Performance/dns-prefetch
 /zh-CN/docs/learn/Performance/感知性能	/zh-CN/docs/Learn/Performance/perceived_performance
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 04de070975..79ea90a611 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -4173,40 +4173,6 @@
       "oceanMIH"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Async_await": {
-    "modified": "2020-12-08T06:58:32.883Z",
-    "contributors": [
-      "byrde",
-      "woniuxingdong",
-      "qwei",
-      "plainnany",
-      "jakio6",
-      "awarmy",
-      "cochn",
-      "wangfangping"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Choosing_the_right_approach": {
-    "modified": "2020-12-08T07:27:41.218Z",
-    "contributors": [
-      "byrde",
-      "icetea_cover",
-      "rubyKC",
-      "shangruitong",
-      "PYGC",
-      "wangfangping",
-      "tjls"
-    ]
-  },
-  "Learn/JavaScript/Asynchronous/Concepts": {
-    "modified": "2020-07-16T22:33:29.726Z",
-    "contributors": [
-      "alice201601",
-      "grape",
-      "HermitSun",
-      "oceanMIH"
-    ]
-  },
   "Learn/JavaScript/Asynchronous/Introducing": {
     "modified": "2020-12-09T00:17:16.227Z",
     "contributors": [
@@ -4236,22 +4202,6 @@
       "zijieee"
     ]
   },
-  "Learn/JavaScript/Asynchronous/Timeouts_and_intervals": {
-    "modified": "2020-08-14T06:09:20.310Z",
-    "contributors": [
-      "Pada",
-      "You2er",
-      "WinterCicada",
-      "zhangbig0",
-      "mizhon",
-      "yuqing521",
-      "Alendia",
-      "grape",
-      "wangfangping",
-      "puddlejumper26",
-      "oceanMIH"
-    ]
-  },
   "Learn/JavaScript/Building_blocks/Events": {
     "modified": "2020-08-04T06:06:58.173Z",
     "contributors": [
@@ -11302,12 +11252,6 @@
       "githubyangwei"
     ]
   },
-  "Web/API/Document/onvisibilitychange": {
-    "modified": "2020-10-15T22:25:06.098Z",
-    "contributors": [
-      "wangzhongchunongithub"
-    ]
-  },
   "Web/API/Document/open": {
     "modified": "2020-10-15T21:52:24.168Z",
     "contributors": [
@@ -18297,7 +18241,7 @@
       "ziyunfei"
     ]
   },
-  "Web/API/Performance/onresourcetimingbufferfull": {
+  "Web/API/Performance/resourcetimingbufferfull_event": {
     "modified": "2019-03-23T22:09:51.120Z",
     "contributors": [
       "Pada"
@@ -22603,6 +22547,13 @@
       "ziyunfei"
     ]
   },
+  "Web/API/Window/appinstalled_event": {
+    "modified": "2019-03-18T21:40:44.436Z",
+    "contributors": [
+      "Aaron_Zhung",
+      "echoArray"
+    ]
+  },
   "Web/API/Window/applicationCache": {
     "modified": "2019-03-23T23:31:44.274Z",
     "contributors": [
@@ -23104,13 +23055,6 @@
       "charlie"
     ]
   },
-  "Web/API/Window/onappinstalled": {
-    "modified": "2019-03-18T21:40:44.436Z",
-    "contributors": [
-      "Aaron_Zhung",
-      "echoArray"
-    ]
-  },
   "Web/API/Window/onbeforeinstallprompt": {
     "modified": "2019-03-23T22:11:25.289Z",
     "contributors": [
@@ -46637,6 +46581,56 @@
       "shenhao"
     ]
   },
+  "conflicting/Learn/JavaScript/Asynchronous": {
+    "modified": "2020-12-08T07:27:41.218Z",
+    "contributors": [
+      "byrde",
+      "icetea_cover",
+      "rubyKC",
+      "shangruitong",
+      "PYGC",
+      "wangfangping",
+      "tjls"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Introducing": {
+    "modified": "2020-07-16T22:33:29.726Z",
+    "contributors": [
+      "alice201601",
+      "grape",
+      "HermitSun",
+      "oceanMIH"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous/Promises": {
+    "modified": "2020-12-08T06:58:32.883Z",
+    "contributors": [
+      "byrde",
+      "woniuxingdong",
+      "qwei",
+      "plainnany",
+      "jakio6",
+      "awarmy",
+      "cochn",
+      "wangfangping"
+    ]
+  },
+  "conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df": {
+    "modified": "2020-08-14T06:09:20.310Z",
+    "contributors": [
+      "Pada",
+      "You2er",
+      "WinterCicada",
+      "zhangbig0",
+      "mizhon",
+      "yuqing521",
+      "Alendia",
+      "grape",
+      "wangfangping",
+      "puddlejumper26",
+      "oceanMIH"
+    ]
+  },
   "conflicting/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents": {
     "modified": "2019-03-23T23:14:19.406Z",
     "contributors": [
@@ -46836,6 +46830,12 @@
       "sunnylost"
     ]
   },
+  "conflicting/Web/API/Document/visibilitychange_event": {
+    "modified": "2020-10-15T22:25:06.098Z",
+    "contributors": [
+      "wangzhongchunongithub"
+    ]
+  },
   "conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint": {
     "modified": "2019-03-23T23:19:33.886Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..278746ae22
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,524 @@
+---
+title: 选择正确的方法
+slug: conflicting/Learn/JavaScript/Asynchronous
+translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>基本的计算机素养，对JavaScript基础知识的合理理解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>能够在使用不同的异步编程技术时做出合理的选择。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="异步回调">异步回调</h2>
+
+<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="代码示例">代码示例</h3>
+
+<p>通过<a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a>加载资源的示例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>）：</p>
+
+<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="缺陷">缺陷</h3>
+
+<ul>
+ <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li>
+ <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li>
+ <li>异步回调不是很优雅。</li>
+ <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li>
+ <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li>
+</ul>
+
+<h3 id="浏览器兼容性">浏览器兼容性</h3>
+
+<p>非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。</p>
+
+<h3 id="更多信息">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, 尤其是 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 是一种允许您在经过任意时间后运行函数的方法</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_2">代码示例</h3>
+
+<p>这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>）：</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="缺陷_2">缺陷</h3>
+
+<p>您可以使用递归的<code>setTimeout（）</code>调用以类似于<code>setInterval（）</code>的方式重复运行函数，使用如下代码：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p>
+
+<ul>
+ <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li>
+ <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li>
+</ul>
+
+<p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
+
+<h3 id="浏览器兼容性_2">浏览器兼容性</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="更多信息_2">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_3">代码示例</h3>
+
+<p>以下函数创建一个新的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>对象，使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>从中提取时间字符串，然后在UI中显示它。然后我们使用<code>setInterval（）</code>每秒运行一次，创建每秒更新一次的数字时钟的效果（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>）：</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="缺陷_3">缺陷</h3>
+
+<ul>
+ <li>帧速率未针对运行动画的系统进行优化，并且可能效率低下。除非您需要选择特定（较慢）的帧速率，否则通常最好使用<code>requestAnimationFrame(</code>).</li>
+</ul>
+
+<h3 id="浏览器兼容性_3">浏览器兼容性</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="更多信息_3">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用<code>setInterval()/recursive setTimeout()</code>。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_4">代码示例</h3>
+
+<p>一个简单的动画旋转器;你可以查看<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>（参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> ）：</p>
+
+<pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+  if(!startTime) {
+    startTime = timestamp;
+  }
+
+  let rotateCount = (timestamp - startTime) / 3;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+  if(rotateCount &gt; 359) {
+    rotateCount = 0;
+  }
+
+  rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="缺陷_4">缺陷</h3>
+
+<ul>
+ <li>您无法使用<code>requestAnimationFrame（）</code>选择特定的帧速率。如果需要以较慢的帧速率运行动画，则需要使用<code>setInterval（）</code>或递归的<code>setTimeout（）</code>。</li>
+</ul>
+
+<h3 id="浏览器兼容性_4">浏览器兼容性</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="更多信息_4">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_5">代码示例</h3>
+
+<p>以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>）：</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="缺陷_5">缺陷</h3>
+
+<p>Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  var docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>最好使用promises的链功能，这样使用更平顺，更易于解析的结构：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>乃至：</p>
+
+<pre class="brush: js notranslate">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的<a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>。</p>
+
+<h3 id="浏览器兼容性_5">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="更多信息_5">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_6">代码示例</h3>
+
+<p>以下示例从服务器获取多个资源，并使用<code>Promise.all（）</code>等待所有资源可用，然后显示所有这些资源––  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>：</p>
+
+<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="缺陷_6">缺陷</h3>
+
+<ul>
+ <li>如果<code>Promise.all（）</code>拒绝，那么你在其数组参数中输入的一个或多个promise(s)就会被拒绝，或者可能根本不返回promises。你需要检查每一个，看看他们返回了什么。</li>
+</ul>
+
+<h3 id="浏览器兼容性_6">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="更多信息_6">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="代码示例_7">代码示例</h3>
+
+<p>以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>）：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="缺陷_7">缺陷</h3>
+
+<ul>
+ <li>您不能在非<code>async</code>函数内或代码的顶级上下文环境中使用<code>await</code>运算符。这有时会导致需要创建额外的函数封包，这在某些情况下会略微令人沮丧。但大部分时间都值得。</li>
+ <li>浏览器对async / await的支持不如promises那样好。如果你想使用async / await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a> 库 - 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。</li>
+</ul>
+
+<h3 id="浏览器兼容性_7">浏览器兼容性</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="更多信息_7">更多信息</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="本章内容">本章内容</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript合作异步：超时和间隔</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步编程更简单</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..291cf15837
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,163 @@
+---
+title: 通用异步编程概念
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Promises
+  - Threads
+  - 学习
+  - 异步
+  - 阻塞
+translation_of: Learn/JavaScript/Asynchronous/Concepts
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>拥有基本的计算机知识，对JavaScript原理有一定了解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="异步">异步?</h2>
+
+<p>通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.</p>
+
+<p>Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。</p>
+
+<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
+
+<p>这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是<strong>异步编程</strong>的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。</p>
+
+<h2 id="产生阻塞的代码">产生阻塞的代码</h2>
+
+<p>异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做<strong>阻塞；</strong>这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。</p>
+
+<p>我们来看一些<strong>阻塞</strong>的例子。</p>
+
+<p>例子： <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a>  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.</p>
+</div>
+
+<p>第二个例子, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:</p>
+
+<ul>
+ <li>"Fill canvas" : 点击的时候用1百万个蓝色的圆填满整个{{htmlelement("canvas")}} .</li>
+ <li>"Click me for alert" ：点击显示alert 消息.</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。</p>
+</div>
+
+<p>为什么是这样? 答案是：JavaScript一般来说是单线程的（<strong>single threaded</strong>）<strong>。</strong>接着我们来介绍<strong>线程</strong>的概念。</p>
+
+<h2 id="线程">线程</h2>
+
+<p>一个<strong>线程</strong>是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:</p>
+
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
+
+<p>每个任务顺序执行，只有前面的结束了，后面的才能开始。</p>
+
+<p>正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:</p>
+
+<pre>Thread 1: Task A --&gt; Task B
+Thread 2: Task C --&gt; Task D</pre>
+
+<h3 id="JavaScript_是单线程的">JavaScript 是单线程的</h3>
+
+<p>JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（<strong>main thread</strong>）。我们上面的例子运行如下:</p>
+
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
+
+<p>经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）</p>
+
+<pre>Main thread: Task A --&gt; Task C
+Worker thread: Expensive task B</pre>
+
+<p>记住这些，请查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。</p>
+
+<h2 id="异步代码">异步代码</h2>
+
+<p>web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。</p>
+
+<p>其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:</p>
+
+<pre>Main thread: Task A --&gt; Task B</pre>
+
+<p>在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。</p>
+
+<pre>Main thread: Task A --&gt; Task B --&gt; |Task D|
+Worker thread: Task C -----------&gt; |      |</pre>
+
+<p>在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。</p>
+
+<p>为了解决这些问题，浏览器允许我们异步运行某些操作。像<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:</p>
+
+<pre>Main thread: Task A                   Task B
+    Promise:      |__async operation__|</pre>
+
+<p>由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。</p>
+
+<p><span class="tlid-translation translation" lang="zh-CN"><span title="">我们将在下一篇文章中开始研究如何编写异步代码。</span> <span title="">非常令人兴奋，对吧？</span> <span title="">继续阅读！</span></span></p>
+
+<h2 id="总结">总结</h2>
+
+<p>围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。</p>
+
+<h2 id="模块大纲">模块大纲</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">通用异步编程概念</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">介绍异步JavaScript</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步JavaScript: Timeouts and intervals</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises优雅的异步编程</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async and await：让异步编程更容易</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..3c73fecd3d
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,380 @@
+---
+title: async和await:让异步编程更简单
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+translation_of: Learn/JavaScript/Asynchronous/Async_await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary"><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>）。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先决条件:</th>
+   <td>基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>理解并使用 promise</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="asyncawait_基础">async/await 基础</h2>
+
+<p>在代码中使用 async / await 有两个部分。</p>
+
+<h3 id="async_关键字">async 关键字</h3>
+
+<p>首先，我们使用 <code>async</code> 关键字，把它放在函数声明之前，使其成为 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>。异步函数是一个知道怎样使用 <code>await</code> 关键字调用异步代码的函数。</p>
+
+<p>尝试在浏览器的JS控制台中键入以下行：</p>
+
+<pre class="brush: js notranslate">function hello() { return "Hello" };
+hello();</pre>
+
+<p>该函数返回“Hello” —— 没什么特别的，对吧？</p>
+
+<p>如果我们将其变成异步函数呢？请尝试以下方法：</p>
+
+<pre class="brush: js notranslate">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。</p>
+
+<p>你也可以创建一个异步函数表达式（参见 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a> ），如下所示:</p>
+
+<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>你可以使用箭头函数：</p>
+
+<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>这些都基本上是一样的。</p>
+
+<p>要实际使用promise完成时返回的值，我们可以使用<code>.then()</code>块，因为它返回的是 promise：</p>
+
+<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>甚至只是简写如</p>
+
+<pre class="brush: js notranslate">hello().then(console.log)</pre>
+
+<p>这就像我们在上一篇文章中看到的那样。</p>
+
+<p>将 <code>async</code> 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 带来的任何潜在开销。在函数声明为 <code>async</code> 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！</p>
+
+<h3 id="await关键字">await关键字</h3>
+
+<p>当 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只在异步函数里面才起作用</strong>。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。</p>
+
+<p>您可以在调用任何返回Promise的函数时使用 <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font></strong>，包括Web API函数。</p>
+
+<p>这是一个简单的示例：</p>
+
+<pre class="brush: js notranslate">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。</p>
+
+<h2 id="使用_asyncawait_重写_promise_代码"> 使用 async/await 重写 promise 代码</h2>
+
+<p>让我们回顾一下我们在上一篇文章中简单的 fetch 示例：</p>
+
+<pre class="brush: js notranslate">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>它使代码简单多了，更容易理解 —— 去除了到处都是 <code>.then()</code> 代码块！</p>
+
+<p>由于 <code>async</code> 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+});</pre>
+
+<p>您可以尝试自己输入示例，或运行我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> （另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>）。</p>
+
+<h3 id="它到底是如何工作的？">它到底是如何工作的？</h3>
+
+<p>您会注意到我们已经将代码封装在函数中，并且我们在 <code>function</code> 关键字之前包含了 <code>async</code> 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只能在异步函数内部工作。</p>
+
+<p>在<code>myFetch()</code>函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 <code>.then()</code> 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字，然后把结果赋给变量。<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：</p>
+
+<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+
+<p>解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 <code>fetch()</code> 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 <code>response</code> 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个<code><a href="/en-US/docs/Web/API/Blob">Blob</a></code>。Blob这行也调用基于异步promise的方法，因此我们也在此处使用<code>await</code>。当操作结果返回时，我们将它从<code>myFetch()</code>函数中返回。</p>
+
+<p>这意味着当我们调用<code>myFetch()</code>函数时，它会返回一个promise，因此我们可以将<code>.then()</code>链接到它的末尾，在其中我们处理显示在屏幕上的<code>blob</code>。</p>
+
+<p>你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.<code>then()</code>块来封装代码，同时它看起来很像同步代码，所以它非常直观。</p>
+
+<h3 id="添加错误处理">添加错误处理</h3>
+
+<p>如果你想添加错误处理，你有几个选择。</p>
+
+<p>您可以将同步的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 结构和 <code>async/await</code> 一起使用 。此示例扩展了我们上面展示的第一个版本代码：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p><code>catch() {}</code> 代码块会接收一个错误对象 <code>e</code> ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。</p>
+
+<p>如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 <code>.catch()</code> 块链接到 <code>.then()</code> 调用的末尾，就像这样：</p>
+
+<pre class="brush: js notranslate">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  return await response.blob();
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>这是因为 <code>.catch()</code> 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了<code>try/catch</code> 代码块，则在调用 <code>myFetch()</code> 函数时，您仍可能会收到未处理的错误。</p>
+
+<p>您可以在GitHub上找到这两个示例：</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">源码</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">源码</a>)</li>
+</ul>
+
+<h2 id="等待Promise.all">等待Promise.all()</h2>
+
+<p><code>async / await</code> 建立在 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> 之上，因此它与promises提供的所有功能兼容。这包括<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> –– 你完全可以通过调用 <code>await</code> <code>Promise.all()</code> 将所有结果返回到变量中，就像同步代码一样。让我们再次回到<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">上一篇中看到的例子</a>。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。</p>
+
+<p>将其转换为 async / await（请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">样例</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">源码</a>），现在看起来像这样：</p>
+
+<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>可以看到 <code>fetchAndDecode()</code> 函数只进行了一丁点的修改就转换成了异步函数。请看<code>Promise.all()</code> 行：</p>
+
+<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>在这里，通过使用<code>await</code>，我们能够在三个promise的结果都可用的时候，放入<code>values</code>数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数<code>displayContent()</code> 中，尽管没有减少很多代码，但能够将大部分代码从 <code>.then()</code> 代码块移出，使代码得到了简化，更易读。</p>
+
+<p>为了错误处理，我们在 <code>displayContent()</code> 调用中包含了一个 <code>.catch()</code> 代码块;这将处理两个函数中出现的错误。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 也可以在异步函数中使用同步 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> 代码块代替 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> （查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">源代码</a>）中看到这一点。</p>
+</div>
+
+<h2 id="asyncawait的缺陷">async/await的缺陷</h2>
+
+<p>了解<code>Async/await</code>是非常有用的，但还有一些缺点需要考虑。</p>
+
+<p><code>Async/await</code> 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 <code>await</code> 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。</p>
+
+<p>这意味着您的代码可能会因为大量<code>await</code>的promises相继发生而变慢。每个<code>await</code>都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用<code>async/await</code>时那样）。</p>
+
+<p>有一种模式可以缓解这个问题——通过将 <code>Promise</code> 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。</p>
+
+<p>我们有两个可用的例子 —— <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>）和<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>）。它们都以自定义promise函数开始，该函数使用<code>setTimeout()</code> 调用伪造异步进程：</p>
+
+<pre class="brush: js notranslate">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>然后每个包含一个 <code>timeTest()</code> 异步函数，等待三个 <code>timeoutPromise()</code> 调用：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  ...
+}</pre>
+
+<p>每一个都以记录开始时间结束，查看 <code>timeTest()</code> promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：</p>
+
+<pre class="brush: js notranslate">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p><code>timeTest()</code> 函数在每种情况下都不同。</p>
+
+<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。</p>
+
+<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
+
+<pre class="brush: js notranslate">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。</p>
+
+<p>接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！</p>
+
+<p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p>
+
+<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p>
+
+<h2 id="Asyncawait_的类方法">Async/await 的类方法</h2>
+
+<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p>
+
+<pre class="brush: js notranslate">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>第一个实例方法可以使用如下：</p>
+
+<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+
+<h2 id="浏览器的支持">浏览器的支持</h2>
+
+<p>决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。</p>
+
+<p>如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a>库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。</p>
+
+<h2 id="总结">总结</h2>
+
+<p>async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="本章内容">本章内容</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步的JavaScript：超时和间隔</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步更简单</a></li>
+ <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..a3500922af
--- /dev/null
+++ b/files/zh-cn/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,618 @@
+---
+title: '合作异步JavaScript: 超时和间隔'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+
+
+<p class="summary">在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">预备条件:</th>
+   <td>基本的计算机知识，对JavaScript基本原理有较好的理解。</td>
+  </tr>
+  <tr>
+   <th scope="row">目标:</th>
+   <td>了解异步循环和间隔及其用途。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="介绍">介绍</h2>
+
+<p>很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>在指定的时间后执行一段代码.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>以固定的时间间隔，重复运行一段代码.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.</dd>
+</dl>
+
+<p>这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。</p>
+
+<p>在 <code>setTimeout()</code> 调用执行之前或 <code>setInterval()</code> 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。</p>
+
+<p>无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>正如前述， <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 在指定的时间后执行一段特定代码. 它需要如下参数:</p>
+
+<ul>
+ <li>要运行的函数，或者函数引用。</li>
+ <li>表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将尽快运行（参阅下面的注释，了解为什么它“尽快”而不是“立即”运行）。稍后详述这样做的原因。</li>
+ <li>更多的参数：在指定函数运行时，希望传递给函数的值。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note:</strong> 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。</p>
+
+<p>结果，像 <code>setTimeout(fn, 0)</code> 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 <code>setTimeout(fn, 0)</code> 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 </p>
+</div>
+
+<p>在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 <code>setTimeout()</code> 。以下两个版本的代码片段相当于第一个版本:</p>
+
+<pre class="brush: js notranslate">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。</p>
+
+<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。</p>
+
+<h3 id="传递参数给setTimeout">传递参数给setTimeout() </h3>
+
+<p>我们希望传递给<code>setTimeout()</code>中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。</p>
+
+<p>例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：</p>
+
+<pre class="brush: js notranslate">function sayHi(who) {
+  alert('Hello ' + who + '!');
+}</pre>
+
+<p>人名可以通过第三个参数传进 <code>setTimeout()</code> ：</p>
+
+<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="清除超时">清除超时</h3>
+
+<p>最后，如果创建了 timeout，您可以通过调用<code>clearTimeout()</code>，将<code>setTimeout()</code>调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：</p>
+
+<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>）。</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p>当我们需要在一段时间之后运行一次代码时，<code>setTimeout()</code>可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?</p>
+
+<p>这就是<code>setInterval()</code>的作用所在。这与<code>setTimeout()</code>的工作方式非常相似，只是作为第一个参数传递给它的函数，<strong>重复</strong>执行的时间不少于第二个参数给出的毫秒数，<strong>而不是一次执行</strong>。您还可以将正在执行的函数所需的任何参数作为 <code>setInterval()</code> 调用的后续参数传递。</p>
+
+<p>让我们看一个例子。下面的函数创建一个新的<code>Date()</code>对象，使用<code>toLocaleTimeString()</code>从中提取一个时间字符串，然后在UI中显示它。然后，我们使用<code>setInterval()</code>每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。</p>
+
+<p>(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js notranslate">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">像</span></font>setTimeout()一样</code>, <code>setInterval()</code> 返回一个确定的值，稍后你可以用它来取消间隔任务。</p>
+
+<h3 id="清除intervals">清除intervals</h3>
+
+<p><code>setInterval</code>()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将<code>setInterval</code>()调用返回的标识符传递给<code>clearInterval</code>()函数:</p>
+
+<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="主动学习：创建秒表!">主动学习：创建秒表!</h4>
+
+<p>话虽如此，我们还是要给你一个挑战。以我们的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a>为例，修改它以创建您自己的简单秒表。</p>
+
+<p>你要像前面一样显示时间，但是在这里，你需要：</p>
+
+<ul>
+ <li>"Start" 按钮开始计时.</li>
+ <li>"Stop" 按钮暂停/停止计时</li>
+ <li>"Reset" 按钮清零.</li>
+ <li>时间显示经过的秒数.</li>
+</ul>
+
+<p>提示:</p>
+
+<ul>
+ <li>您可以随心所欲地构造按钮标记;只需确保使用HTML语法，确保JavaScript获取按钮引用。</li>
+ <li>创建一个变量，从0开始，每秒钟增加1.</li>
+ <li>与我们版本中所做的一样，在不使用<code>Date</code>()对象的情况下创建这个示例更容易一些，但是不那么精确——您不能保证回调会在恰好1000ms之后触发。更准确的方法是运行<code>startTime = Date.now()</code>来获取用户单击start按钮的确切时间戳，然后执行<code>Date.now() - startTime</code>来获取单击<code>start</code>按钮后的毫秒数。</li>
+ <li>您还希望将小时、分钟和秒作为单独的值计算，然后在每次循环迭代之后将它们一起显示在一个字符串中。从第二个计数器，你可以计算出他们.</li>
+ <li>如何计时时分秒? 想一下:
+  <ul>
+   <li>一小时3600秒.</li>
+   <li>分钟应该是：时间减去小时后剩下的除以60.</li>
+   <li>分钟都减掉后，剩下的就是秒钟了.</li>
+  </ul>
+ </li>
+ <li>如果这个数字小于10，最好在显示的值前面加一个0，这样看起来更加像那么回事。</li>
+ <li>暂停的话，要清掉间隔函数。重置的话，显示要清零，要更新显示</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 如果您在操作过程有困难，请参考 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">see it runing live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="关于_setTimeout_和_setInterval_需要注意的几点">关于 setTimeout() 和 setInterval() 需要注意的几点</h2>
+
+<p>当使用 <code>setTimeout()</code> 和 <code>setInterval()</code>的时候，有几点需要额外注意。 现在让我们回顾一下：</p>
+
+<h3 id="递归的timeouts">递归的timeouts</h3>
+
+<p>还有另一种方法可以使用<code>setTimeout()</code>：我们可以递归调用它来重复运行相同的代码，而不是使用<code>setInterval()</code>。</p>
+
+<p>下面的示例使用递归<code>setTimeout()</code>每100毫秒运行传递来的函数：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>将上面的示例与下面的示例进行比较 ––这使用 <code>setInterval()</code> 来实现相同的效果：</p>
+
+<pre class="brush: js notranslate">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="递归setTimeout和setInterval有何不同？">递归setTimeout()和setInterval()有何不同？</h4>
+
+<p>上述代码的两个版本之间的差异是微妙的。</p>
+
+<ul>
+ <li>递归 <code>setTimeout()</code> 保证执行之间的延迟相同，例如在上述情况下为100ms。 代码将运行，然后在它再次运行之前等待100ms，因此无论代码运行多长时间，间隔都是相同的。</li>
+ <li>使用 <code>setInterval()</code> 的示例有些不同。 我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。</li>
+ <li>当递归使用 <code>setTimeout()</code> 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。</li>
+</ul>
+
+<p>当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 <code>setTimeout()</code> - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
+
+<h3 id="立即超时">立即超时</h3>
+
+<p>使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。</p>
+
+<p>举个例子，下面的代码(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。</p>
+
+<pre class="brush: js notranslate">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p><font><font>如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。</font></font></p>
+
+<h3 id="使用_clearTimeout_or_clearInterval清除">使用 clearTimeout() or clearInterval()清除</h3>
+
+<p><code>clearTimeout()</code> 和<code>clearInterval()</code> 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 <code>setTimeout()</code> 和 <code>setInterval()。</code></p>
+
+<p>但为了保持一致性，你应该使用 <code>clearTimeout()</code> 来清除 <code>setTimeout()</code> 条目，使用 <code>clearInterval()</code> 来清除 <code>setInterval()</code> 条目。 这样有助于避免混乱。</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的<code>setInterval()</code> —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。</p>
+
+<p>它是针对<code>setInterval()</code> 遇到的问题创建的，比如 <code>setInterval()</code>并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。</p>
+
+<p>（在<a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS</a>上了解有关此内容的更多信息）.</p>
+
+<div class="blockIndicator note">
+<p><strong>注意：</strong> 你可以在课程中其他地方找到<code>requestAnimationFrame()</code> 的使用范例—参见 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, 和 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>。</p>
+</div>
+
+<p><font>该方法将重新加载页面之前要调用的回调函数作为参数。</font><font>这是您将看到的常见表达：</font></p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 <code>requestAnimationFrame()</code> 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为<code>requestAnimationFrame()</code> 是递归调用的。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 如果要执行某种简单的常规DOM动画, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a> 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> 在大多数情况下是更好的选择。</p>
+</div>
+
+<h3 id="你的动画跑得有多快？">你的动画跑得有多快？</h3>
+
+<p>动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。</p>
+
+<p>由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。</p>
+
+<p>如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。</p>
+
+<p><code>requestAnimationFrame()</code> 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。<code>requestAnimationFrame()</code> 会尽其所能利用现有资源提升帧速率。</p>
+
+<h3 id="requestAnimationFrame_与_setInterval_和_setTimeout有什么不同"> requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?</h3>
+
+<p>让我们进一步讨论一下 <code>requestAnimationFrame()</code> 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>现在让我们看看如何使用<code>setInterval()</code>:</p>
+
+<pre class="brush: js notranslate">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>如前所述，我们没有为<code>requestAnimationFrame()</code>;指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。</p>
+
+<p> 另一方面<code>setInterval()</code>需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。</p>
+
+<h3 id="包括时间戳">包括时间戳</h3>
+
+<p>传递给 <code>requestAnimationFrame()</code> 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 <code>requestAnimationFrame()</code> 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：</p>
+
+<pre class="brush: js notranslate">let startTime = null;
+
+function draw(timestamp) {
+    if(!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="浏览器支持">浏览器支持</h3>
+
+<p> 与<code>setInterval()<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">或</span></font></code><code>setTimeout()</code> 相比最近的浏览器支持<code>requestAnimationFrame()</code></p>
+
+<p>— <code>requestAnimationFrame()</code>.在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用<code>requestAnimationFrame()</code> 。</p>
+
+<h3 id="一个简单的例子">一个简单的例子</h3>
+
+<p>学习上述理论已经足够了，下面让我们仔细研究并构建自己的<code>requestAnimationFrame()</code> 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。</p>
+
+<div class="blockIndicator note">
+<p><strong>注意</strong>: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用<code>requestAnimationFrame()</code>只是为了帮助解释其用法。<code>requestAnimationFrame()</code>正常应用于如逐帧更新游戏画面这样的复杂动画。</p>
+</div>
+
+<ol>
+ <li>
+  <p>首先, 下载我们的<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">网页模板</a>。</p>
+ </li>
+ <li>
+  <p>放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。</p>
+ </li>
+ <li>
+  <p>用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<code>&lt;body&gt;</code>的高度设置为100%<code>&lt;html&gt;</code>的高度，并将<code>&lt;div&gt;</code>水平和竖直居中。</p>
+
+  <pre class="brush: html notranslate">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>插入一个 {{htmlelement("script")}}元素在 <code>&lt;/body&gt; </code>标签之上。</p>
+ </li>
+ <li>
+  <p>插入下述的JavaScript在你的 <code>&lt;script&gt; </code>元素中。这里我们存储了一个&lt;div&gt;的引用在一个常量中，设置<code>rotateCount</code>变量为 0, 设置一个未初始化的变量之后将会用作容纳一个<code>requestAnimationFrame()</code> 的调用, 然后设置一个 <code>startTime</code> 变量为 <code>null</code>，它之后将会用作存储 <code>requestAnimationFrame()</code> 的起始时间.。</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let rAF;
+let startTime = null;</pre>
+ </li>
+ <li>
+  <p>在之前的代码下面, 插入一个 <code>draw()</code> 函数将被用作容纳我们的动画代码，并且包含了 <code>时间戳</code> 参数。</p>
+
+  <pre class="brush: js notranslate">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>在<code>draw()</code>中, 加入下述的几行。 如果起始时间还没有被赋值的话，将<code>timestamp</code> 传给它（这只将发生在循环中的第一步）。 并赋值给<code>rotateCount</code> ，以旋转 旋转器(spinning)（此处取<code>(当前时间戳 – 起始时间戳) / 3</code>，以免它转得太快）:</p>
+
+  <pre class="brush: js notranslate">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>在<code>draw()</code>内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查<code>rotateCount</code> 的值是否超过了<code>359</code> (e.g. <code>360</code>, 一个正圆的度数)。 如果是，与360取模（值除以 <code>360</code> 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。</p>
+
+  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
+  rotateCount %= 360;
+}</pre>
+ </li>
+ <li>
+  <p>接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：</p>
+
+  <pre class="notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>在函数<code>draw()</code>内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以<code>draw()</code>函数为参数的活动<code>requestAnimation()</code>调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行<code>draw()</code>函数。</p>
+
+  <pre class="notranslate">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>在 <code>draw()</code> 函数定义下方，添加对 <code>draw()</code> 函数的调用以启动动画。</p>
+ </li>
+ <li>
+  <pre class="notranslate">draw();</pre>
+ </li>
+</ol>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
+</div>
+
+<h3 id="撤销requestAnimationFrame">撤销requestAnimationFrame()</h3>
+
+<p><code>requestAnimationFrame()</code>可用与之对应的<code>cancelAnimationFrame()</code>方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。</p>
+
+<p>该方法以<code>requestAnimationFrame()</code>的返回值为参数，此处我们将该返回值存在变量 <code>rAF</code> 中：</p>
+
+<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="主动学习：_启动和停止旋转器（spinner）">主动学习： 启动和停止旋转器（spinner）</h3>
+
+<p>在这个练习中，我们希望你能对<code>cancelAnimationFrame()</code>方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 </p>
+
+<p>一些提示：</p>
+
+<ul>
+ <li>包含<code>&lt;body&gt;</code>在内大多数元素都可以添加<code>click</code>事件处理器<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">。为了使可点击区域最大化，直接监听</span></font><code>&lt;body&gt;</code>元素的事件是更有效的，因为事件可以冒泡到其子元素。</li>
+ <li>你可能需要添加一个追踪用变量来检测旋转器是否在旋转。该变量若为真，则清除动画帧；若为假，则重新调用函数。</li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 先自己尝试一下，如果你确实遇到困难，可以参看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">在线示例</a>和<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">源代码</a>。</p>
+</div>
+
+<h3 id="限制_节流_requestAnimationFrame动画">限制 (节流) requestAnimationFrame()动画</h3>
+
+<p>requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？</p>
+
+<p>例如，在我们的 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> 文章中的猴子岛行走动画中的一个问题：</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 <code>requestAnimationFrame()</code> 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：</p>
+
+<pre class="brush: js notranslate">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>因此，代码每13个动画帧循环一次精灵。</p>
+
+<p>...实际上，大约是每 6.5 帧，因为我们将每帧更新 <code>posX</code> 2个单位值（角色在屏幕上的位置）</p>
+
+<pre class="brush: js notranslate">if(posX &gt; width/2) {
+  newStartPos = -( (width / 2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>这是用于计算如何更新每个动画帧中的位置的代码。</p>
+
+<p>用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。</p>
+
+<h2 id="主动学习：反应游戏">主动学习：反应游戏</h2>
+
+<p>对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 <kbd>A</kbd> 键控制游戏，另一个使用 <kbd>L</kbd> 键控制游戏。</p>
+
+<p>按下 <em>开始</em> 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>让我们来完成以下工作：</p>
+
+<ol>
+ <li>
+  <p>首先，下载 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。</p>
+ </li>
+ <li>
+  <p>在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：</p>
+
+  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>这些是:</p>
+
+  <ol>
+   <li>对旋转器的引用，因此可以对其进行动画处理。</li>
+   <li>包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。</li>
+   <li>旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。</li>
+   <li>开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。</li>
+   <li>一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。</li>
+   <li>开始按钮的引用。</li>
+   <li>结果字段的引用。</li>
+  </ol>
+ </li>
+ <li>
+  <p>接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。</p>
+
+  <pre class="brush: js notranslate">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>接下来添加 <code>draw()</code> 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：</p>
+
+  <pre class="brush: js notranslate">  function draw(timestamp) {
+    if(!startTime) {
+     startTime = timestamp;
+    }
+
+    let rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+      rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+    rAF = requestAnimationFrame(draw);
+  }</pre>
+ </li>
+ <li>
+  <p>现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 <code>display: none;</code> 隐藏结果段落和旋转器容器。</p>
+
+  <pre class="brush: js notranslate">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>接下来，定义一个 <code>reset()</code> 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：</p>
+
+  <pre class="brush: js notranslate">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 <code>start()</code> 函数调用 <code>draw()</code> 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 <code>setEndgame()</code> 函数的 <code>setTimeout()</code> 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 <code>start()</code> 函数。
+  <pre class="notranslate">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+ </li>
+ <li>添加以下方法到代码：</li>
+</ol>
+
+<pre class="brush: js notranslate">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    console.log(e.key);
+    if(e.key === 'a') {
+      result.textContent = 'Player 1 won!!';
+    } else if(e.key === 'l') {
+      result.textContent = 'Player 2 won!!';
+    }
+
+    document.removeEventListener('keydown', keyHandler);
+    setTimeout(reset, 5000);
+  };
+}</pre>
+
+<p>逐步执行以下操作：</p>
+
+<ol>
+ <li>首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。</li>
+ <li>接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。</li>
+ <li>将 <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> 事件侦听器附加到 document。当按下任何按钮时，<code>keyHandler()</code> 函数将运行。</li>
+ <li>在 <code>keyHandler()</code> 里，在 <code>keyHandler()</code> 内部，代码包括作为参数的事件对象作为参数（用 <code>e</code> 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。</li>
+ <li>将变量 <code>isOver</code> 设置为 <code>false</code> ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。</li>
+ <li>将 <code>e.key</code> 输出到控制台，这是找出所按的不同键的键值的有用方法。</li>
+ <li>当 <code>e.key</code> 为“ a”时，显示一条消息说玩家1获胜；当 <code>e.key</code> 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 <kbd>Shift</kbd>），则将其视为另一个键！）如果按下了其中一个键，请将 <code>isOver</code> 设置为 <code>true</code> 。</li>
+ <li>仅当 <code>isOver</code> 为 <code>true</code> 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 <code>keydown</code> 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 <code>setTimeout()</code> 在5秒钟后调用 <code>reset()</code>－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。</li>
+</ol>
+
+<p>就这样-一切都完成了！</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: 如果卡住了， check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="结论">结论</h2>
+
+<p>就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html b/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
new file mode 100644
index 0000000000..e79fcf4cf9
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/document/visibilitychange_event/index.html
@@ -0,0 +1,54 @@
+---
+title: Document.onvisibilitychange
+slug: conflicting/Web/API/Document/visibilitychange_event
+translation_of: Web/API/Document/onvisibilitychange
+original_slug: Web/API/Document/onvisibilitychange
+---
+<div>{{ApiRef('DOM')}}</div>
+
+<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>;
+</pre>
+
+<ul>
+ <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li>
+</ul>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">document.onvisibilitychange = function() {
+  console.log("Visibility of page has changed!");
+};
+</pre>
+
+<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('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td>
+   <td>{{Spec2('Page Visibility API')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Document.onvisibilitychange")}}</p>
+
+<h2 id="另见">另见</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
+</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html b/files/zh-cn/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index d584914106..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: async和await:让异步编程更简单
-slug: Learn/JavaScript/Asynchronous/Async_await
-translation_of: Learn/JavaScript/Asynchronous/Async_await
-original_slug: learn/JavaScript/异步/Async_await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary"><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> 和 <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> 关键字是最近添加到JavaScript语言里面的。它们是ECMAScript 2017 JavaScript版的一部分（参见<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>）。简单来说，它们是基于promises的语法糖，使异步代码更易于编写和阅读。通过使用它们，异步代码看起来更像是老式同步代码，因此它们非常值得学习。本文为您提供了您需要了解的内容。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">先决条件:</th>
-   <td>基本的计算机知识，较好理解 JavaScript 基础，以及理解一般异步代码和 promises 。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>理解并使用 promise</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="asyncawait_基础">async/await 基础</h2>
-
-<p>在代码中使用 async / await 有两个部分。</p>
-
-<h3 id="async_关键字">async 关键字</h3>
-
-<p>首先，我们使用 <code>async</code> 关键字，把它放在函数声明之前，使其成为 <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>。异步函数是一个知道怎样使用 <code>await</code> 关键字调用异步代码的函数。</p>
-
-<p>尝试在浏览器的JS控制台中键入以下行：</p>
-
-<pre class="brush: js notranslate">function hello() { return "Hello" };
-hello();</pre>
-
-<p>该函数返回“Hello” —— 没什么特别的，对吧？</p>
-
-<p>如果我们将其变成异步函数呢？请尝试以下方法：</p>
-
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>哈。现在调用该函数会返回一个 promise。这是异步函数的特征之一 —— 它保证函数的返回值为 promise。</p>
-
-<p>你也可以创建一个异步函数表达式（参见 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a> ），如下所示:</p>
-
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>你可以使用箭头函数：</p>
-
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>这些都基本上是一样的。</p>
-
-<p>要实际使用promise完成时返回的值，我们可以使用<code>.then()</code>块，因为它返回的是 promise：</p>
-
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>甚至只是简写如</p>
-
-<pre class="brush: js notranslate">hello().then(console.log)</pre>
-
-<p>这就像我们在上一篇文章中看到的那样。</p>
-
-<p>将 <code>async</code> 关键字加到函数申明中，可以告诉它们返回的是 promise，而不是直接返回值。此外，它避免了同步函数为支持使用 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 带来的任何潜在开销。在函数声明为 <code>async</code> 时，JavaScript引擎会添加必要的处理，以优化你的程序。爽！</p>
-
-<h3 id="await关键字">await关键字</h3>
-
-<p>当 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> 关键字与异步函数一起使用时，它的真正优势就变得明显了 —— 事实上， <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只在异步函数里面才起作用</strong>。它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。</p>
-
-<p>您可以在调用任何返回Promise的函数时使用 <strong><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font></strong>，包括Web API函数。</p>
-
-<p>这是一个简单的示例：</p>
-
-<pre class="brush: js notranslate">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>当然，上面的示例不是很有用，但它确实展示了语法。让我们继续，看一个真实示例。</p>
-
-<h2 id="使用_asyncawait_重写_promise_代码"> 使用 async/await 重写 promise 代码</h2>
-
-<p>让我们回顾一下我们在上一篇文章中简单的 fetch 示例：</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>到现在为止，你应该对 promises 及其工作方式有一个较好的理解。让我们将其转换为使用async / await看看它使事情变得简单了多少：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>它使代码简单多了，更容易理解 —— 去除了到处都是 <code>.then()</code> 代码块！</p>
-
-<p>由于 <code>async</code> 关键字将函数转换为 promise，您可以重构以上代码 —— 使用 promise 和 await 的混合方式，将函数的后半部分抽取到新代码块中。这样做可以更灵活：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-});</pre>
-
-<p>您可以尝试自己输入示例，或运行我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> （另请参阅<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>）。</p>
-
-<h3 id="它到底是如何工作的？">它到底是如何工作的？</h3>
-
-<p>您会注意到我们已经将代码封装在函数中，并且我们在 <code>function</code> 关键字之前包含了 <code>async</code> 关键字。这是必要的 –– 您必须创建一个异步函数来定义一个代码块，在其中运行异步代码; <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 只能在异步函数内部工作。</p>
-
-<p>在<code>myFetch()</code>函数定义中，您可以看到代码与先前的 promise 版本非常相似，但存在一些差异。不需要附加 <code>.then()</code> 代码块到每个promise-based方法的结尾，你只需要在方法调用前添加 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字，然后把结果赋给变量。<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">await</span></font> 关键字使JavaScript运行时暂停于此行，允许其他代码在此期间执行，直到异步函数调用返回其结果。一旦完成，您的代码将继续从下一行开始执行。例如：</p>
-
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
-
-<p>解析器会在此行上暂停，直到当服务器返回的响应变得可用时。此时 <code>fetch()</code> 返回的 promise 将会完成（fullfilled），返回的 response 会被赋值给 <code>response</code> 变量。一旦服务器返回的响应可用，解析器就会移动到下一行，从而创建一个<code><a href="/en-US/docs/Web/API/Blob">Blob</a></code>。Blob这行也调用基于异步promise的方法，因此我们也在此处使用<code>await</code>。当操作结果返回时，我们将它从<code>myFetch()</code>函数中返回。</p>
-
-<p>这意味着当我们调用<code>myFetch()</code>函数时，它会返回一个promise，因此我们可以将<code>.then()</code>链接到它的末尾，在其中我们处理显示在屏幕上的<code>blob</code>。</p>
-
-<p>你可能已经觉得“这真的很酷！”，你是对的 —— 用更少的.<code>then()</code>块来封装代码，同时它看起来很像同步代码，所以它非常直观。</p>
-
-<h3 id="添加错误处理">添加错误处理</h3>
-
-<p>如果你想添加错误处理，你有几个选择。</p>
-
-<p>您可以将同步的 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> 结构和 <code>async/await</code> 一起使用 。此示例扩展了我们上面展示的第一个版本代码：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-    let myBlob = await response.blob();
-
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p><code>catch() {}</code> 代码块会接收一个错误对象 <code>e</code> ; 我们现在可以将其记录到控制台，它将向我们提供详细的错误消息，显示错误被抛出的代码中的位置。</p>
-
-<p>如果你想使用我们上面展示的第二个（重构）代码版本，你最好继续混合方式并将 <code>.catch()</code> 块链接到 <code>.then()</code> 调用的末尾，就像这样：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  return await response.blob();
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>这是因为 <code>.catch()</code> 块将捕获来自异步函数调用和promise链中的错误。如果您在此处使用了<code>try/catch</code> 代码块，则在调用 <code>myFetch()</code> 函数时，您仍可能会收到未处理的错误。</p>
-
-<p>您可以在GitHub上找到这两个示例：</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">源码</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">源码</a>)</li>
-</ul>
-
-<h2 id="等待Promise.all">等待Promise.all()</h2>
-
-<p><code>async / await</code> 建立在 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> 之上，因此它与promises提供的所有功能兼容。这包括<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> –– 你完全可以通过调用 <code>await</code> <code>Promise.all()</code> 将所有结果返回到变量中，就像同步代码一样。让我们再次回到<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">上一篇中看到的例子</a>。在单独的选项卡中打开它，以便您可以与下面显示的新版本进行比较和对比。</p>
-
-<p>将其转换为 async / await（请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">样例</a> 和 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">源码</a>），现在看起来像这样：</p>
-
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
-  }
-
-  return content;
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>可以看到 <code>fetchAndDecode()</code> 函数只进行了一丁点的修改就转换成了异步函数。请看<code>Promise.all()</code> 行：</p>
-
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>在这里，通过使用<code>await</code>，我们能够在三个promise的结果都可用的时候，放入<code>values</code>数组中。这看起来非常像同步代码。我们需要将所有代码封装在一个新的异步函数<code>displayContent()</code> 中，尽管没有减少很多代码，但能够将大部分代码从 <code>.then()</code> 代码块移出，使代码得到了简化，更易读。</p>
-
-<p>为了错误处理，我们在 <code>displayContent()</code> 调用中包含了一个 <code>.catch()</code> 代码块;这将处理两个函数中出现的错误。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 也可以在异步函数中使用同步 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> 代码块代替 <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> 异步代码块，以显示操作如何进行的最终报告——您可以在我们的 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> （查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">源代码</a>）中看到这一点。</p>
-</div>
-
-<h2 id="asyncawait的缺陷">async/await的缺陷</h2>
-
-<p>了解<code>Async/await</code>是非常有用的，但还有一些缺点需要考虑。</p>
-
-<p><code>Async/await</code> 让你的代码看起来是同步的，在某种程度上，也使得它的行为更加地同步。 <code>await</code> 关键字会阻塞其后的代码，直到promise完成，就像执行同步操作一样。它确实可以允许其他任务在此期间继续运行，但您自己的代码被阻塞。</p>
-
-<p>这意味着您的代码可能会因为大量<code>await</code>的promises相继发生而变慢。每个<code>await</code>都会等待前一个完成，而你实际想要的是所有的这些promises同时开始处理（就像我们没有使用<code>async/await</code>时那样）。</p>
-
-<p>有一种模式可以缓解这个问题——通过将 <code>Promise</code> 对象存储在变量中来同时开始它们，然后等待它们全部执行完毕。让我们看一些证明这个概念的例子。</p>
-
-<p>我们有两个可用的例子 —— <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>）和<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>（参见<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>）。它们都以自定义promise函数开始，该函数使用<code>setTimeout()</code> 调用伪造异步进程：</p>
-
-<pre class="brush: js notranslate">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>然后每个包含一个 <code>timeTest()</code> 异步函数，等待三个 <code>timeoutPromise()</code> 调用：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  ...
-}</pre>
-
-<p>每一个都以记录开始时间结束，查看 <code>timeTest()</code> promise 需要多长时间才能完成，然后记录结束时间并报告操作总共需要多长时间：</p>
-
-<pre class="brush: js notranslate">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p><code>timeTest()</code> 函数在每种情况下都不同。</p>
-
-<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>在这里，我们直接等待所有三个timeoutPromise（）调用，使每个调用3秒钟。后续的每一个都被迫等到最后一个完成 - 如果你运行第一个例子，你会看到弹出框报告的总运行时间大约为9秒。</p>
-
-<p>在<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a>示例中，<code>timeTest()</code> 如下所示：</p>
-
-<pre class="brush: js notranslate">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>在这里，我们将三个Promise对象存储在变量中，这样可以同时启动它们关联的进程。</p>
-
-<p>接下来，我们等待他们的结果 - 因为promise都在基本上同时开始处理，promise将同时完成;当您运行第二个示例时，您将看到弹出框报告总运行时间仅超过3秒！</p>
-
-<p>您必须仔细测试您的代码，并在性能开始受损时牢记这一点。</p>
-
-<p>另一个小小的不便是你必须将等待执行的promise封装在异步函数中。</p>
-
-<h2 id="Asyncawait_的类方法">Async/await 的类方法</h2>
-
-<p>最后值得一提的是，我们可以在类/对象方法前面添加<code>async</code>，以使它们返回promises，并<code>await</code>它们内部的promises。查看 <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>，然后查看使用异步方法的修改版本：</p>
-
-<pre class="brush: js notranslate">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>第一个实例方法可以使用如下：</p>
-
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
-
-<h2 id="浏览器的支持">浏览器的支持</h2>
-
-<p>决定是否使用 async/await 时的一个考虑因素是支持旧浏览器。它们适用于大多数浏览器的现代版本，与promise相同; 主要的支持问题存在于Internet Explorer和Opera Mini。</p>
-
-<p>如果你想使用async/await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a>库 —— 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。在遇到不支持async/await 的浏览器时，Babel的 polyfill 可以自动提供适用于旧版浏览器的实现。</p>
-
-<h2 id="总结">总结</h2>
-
-<p>async/await提供了一种很好的，简化的方法来编写更易于阅读和维护的异步代码。即使浏览器支持在撰写本文时比其他异步代码机制更受限制，但无论是现在还是将来，都值得学习和考虑使用。</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="本章内容">本章内容</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步的JavaScript：超时和间隔</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步更简单</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index 4241740479..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: 选择正确的方法
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-translation_of: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-original_slug: learn/JavaScript/异步/Choosing_the_right_approach
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>为了完成这个模块，我们将简要讨论之前章节谈论过编码技术和功能，看看你应该使用哪一个，并提供适当的建议和提醒。随着时间的推移，我们可能会添加到此资源中。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>基本的计算机素养，对JavaScript基础知识的合理理解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>能够在使用不同的异步编程技术时做出合理的选择。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="异步回调">异步回调</h2>
-
-<p>通常在旧式API中找到，涉及将函数作为参数传递给另一个函数，然后在异步操作完成时调用该函数，以便回调可以依次对结果执行某些操作。这是promise的前身;它不那么高效或灵活。仅在必要时使用。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="代码示例">代码示例</h3>
-
-<p>通过<a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a>加载资源的示例（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>）：</p>
-
-<pre class="brush: js notranslate">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="缺陷">缺陷</h3>
-
-<ul>
- <li>嵌套回调可能很麻烦且难以阅读（即“回调地狱”）</li>
- <li>每层嵌套都需要故障回调，而使用promises，您只需使用一个<code>.catch（）</code>代码块来处理整个链的错误。</li>
- <li>异步回调不是很优雅。</li>
- <li>Promise回调总是按照它们放在事件队列中的严格顺序调用;异步回调不是。</li>
- <li>当传入到一个第三方库时，异步回调对函数如何执行失去完全控制。</li>
-</ul>
-
-<h3 id="浏览器兼容性">浏览器兼容性</h3>
-
-<p>非常好的一般支持，尽管API中回调的确切支持取决于特定的API。有关更具体的支持信息，请参阅您正在使用的API的参考文档。</p>
-
-<h3 id="更多信息">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, 尤其是 <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#Async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 是一种允许您在经过任意时间后运行函数的方法</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_2">代码示例</h3>
-
-<p>这里浏览器将在执行匿名函数之前等待两秒钟，然后将显示警报消息（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>）：</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="缺陷_2">缺陷</h3>
-
-<p>您可以使用递归的<code>setTimeout（）</code>调用以类似于<code>setInterval（）</code>的方式重复运行函数，使用如下代码：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>递归<code>setTimeout（）</code>和<code>setInterval（）</code>之间存在差异：</p>
-
-<ul>
- <li>递归<code>setTimeout（）</code>保证两次执行间经过指定的时间量（在本例中为100ms）;代码将运行，然后等待100毫秒再次运行。无论代码运行多长时间，间隔都是相同的。</li>
- <li>使用<code>setInterval（）</code>，我们选择的时间间隔包含了运行代码所花费的时间。（还是100ms为例）假设代码需要40毫秒才能运行 –– 间隔最终只会有60毫秒。</li>
-</ul>
-
-<p>当你的代码有可能比你分配的时间间隔更长时间运行时，最好使用递归的<code>setTimeout（）</code> ––这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
-
-<h3 id="浏览器兼容性_2">浏览器兼容性</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="更多信息_2">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#setTimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code>函数允许重复执行一个函数，并设置时间间隔。不如<code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>有效率，但允许您选择运行速率/帧速率。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_3">代码示例</h3>
-
-<p>以下函数创建一个新的<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>对象，使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>从中提取时间字符串，然后在UI中显示它。然后我们使用<code>setInterval（）</code>每秒运行一次，创建每秒更新一次的数字时钟的效果（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>）：</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="缺陷_3">缺陷</h3>
-
-<ul>
- <li>帧速率未针对运行动画的系统进行优化，并且可能效率低下。除非您需要选择特定（较慢）的帧速率，否则通常最好使用<code>requestAnimationFrame(</code>).</li>
-</ul>
-
-<h3 id="浏览器兼容性_3">浏览器兼容性</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="更多信息_3">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>是一种允许您以给定当前浏览器/系统的最佳帧速率重复且高效地运行函数的方法。除非您需要特定的速率帧，否则您应该尽可能使用它而不要去使用<code>setInterval()/recursive setTimeout()</code>。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_4">代码示例</h3>
-
-<p>一个简单的动画旋转器;你可以查看<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>（参见 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> ）：</p>
-
-<pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-  if(!startTime) {
-    startTime = timestamp;
-  }
-
-  let rotateCount = (timestamp - startTime) / 3;
-
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-  if(rotateCount &gt; 359) {
-    rotateCount = 0;
-  }
-
-  rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="缺陷_4">缺陷</h3>
-
-<ul>
- <li>您无法使用<code>requestAnimationFrame（）</code>选择特定的帧速率。如果需要以较慢的帧速率运行动画，则需要使用<code>setInterval（）</code>或递归的<code>setTimeout（）</code>。</li>
-</ul>
-
-<h3 id="浏览器兼容性_4">浏览器兼容性</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="更多信息_4">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestAnimationFrame()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 是一种JavaScript功能，允许您运行异步操作并等到它完全完成后再根据其结果运行另一个操作。 Promise是现代异步JavaScript的支柱。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_5">代码示例</h3>
-
-<p>以下代码从服务器获取图像并将其显示在 {{htmlelement("img")}} 元素中;（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>，<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>）：</p>
-
-<pre class="brush: js notranslate">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="缺陷_5">缺陷</h3>
-
-<p>Promise链可能很复杂，难以解析。如果你嵌套了许多promises，你最终可能会遇到类似的麻烦来回调地狱。例如：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  var docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>最好使用promises的链功能，这样使用更平顺，更易于解析的结构：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>乃至：</p>
-
-<pre class="brush: js notranslate">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>这涵盖了很多基础知识。对于更完整的论述，请参阅诺兰劳森的<a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>。</p>
-
-<h3 id="浏览器兼容性_5">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="更多信息_5">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>一种JavaScript功能，允许您等待多个promises完成，然后根据所有其他promises的结果运行进一步的操作。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_6">代码示例</h3>
-
-<p>以下示例从服务器获取多个资源，并使用<code>Promise.all（）</code>等待所有资源可用，然后显示所有这些资源––  <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>：</p>
-
-<pre class="brush: js notranslate">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="缺陷_6">缺陷</h3>
-
-<ul>
- <li>如果<code>Promise.all（）</code>拒绝，那么你在其数组参数中输入的一个或多个promise(s)就会被拒绝，或者可能根本不返回promises。你需要检查每一个，看看他们返回了什么。</li>
-</ul>
-
-<h3 id="浏览器兼容性_6">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="更多信息_6">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#Running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>构造在promises之上的语法糖，允许您使用更像编写同步回调代码的语法来运行异步操作。</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="代码示例_7">代码示例</h3>
-
-<p>以下示例是我们之前看到的简单承诺示例的重构，该示例获取并显示图像，使用async / await编写（<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>，并查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>）：</p>
-
-<pre class="brush: js notranslate">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="缺陷_7">缺陷</h3>
-
-<ul>
- <li>您不能在非<code>async</code>函数内或代码的顶级上下文环境中使用<code>await</code>运算符。这有时会导致需要创建额外的函数封包，这在某些情况下会略微令人沮丧。但大部分时间都值得。</li>
- <li>浏览器对async / await的支持不如promises那样好。如果你想使用async / await但是担心旧的浏览器支持，你可以考虑使用<a href="https://babeljs.io/">BabelJS</a> 库 - 这允许你使用最新的JavaScript编写应用程序，让Babel找出用户浏览器需要的更改。</li>
-</ul>
-
-<h3 id="浏览器兼容性_7">浏览器兼容性</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="更多信息_7">更多信息</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="本章内容">本章内容</h2>
-
-<ul>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Concepts">异步编程的基本概念</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Introducing">JavaScript异步简介</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">JavaScript合作异步：超时和间隔</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises：优雅的异步编程</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await">使用async和await：让异步编程更简单</a></li>
- <li><a href="/zh-CN/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html b/files/zh-cn/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 757eee777c..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: 通用异步编程概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Promises
-  - Threads
-  - 学习
-  - 异步
-  - 阻塞
-translation_of: Learn/JavaScript/Asynchronous/Concepts
-original_slug: learn/JavaScript/异步/概念
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在本文中，我们将介绍与异步编程相关的一些重要概念，以及它们在浏览器和JavaScript里的体现。在学习本系列的其他文章之前，你应该先理解这些概念。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>拥有基本的计算机知识，对JavaScript原理有一定了解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>理解异步编程的基本概念，以及异步编程在浏览器和JavaScript里面的表现。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="异步">异步?</h2>
-
-<p>通常来说，程序都是顺序执行，同一时刻只会发生一件事。如果一个函数依赖于另一个函数的结果，它只能等待那个函数结束才能继续执行，从用户的角度来说，整个程序才算运行完毕.</p>
-
-<p>Mac 用户有时会经历过这种旋转的彩虹光标（常称为沙滩球），操作系统通过这个光标告诉用户：“现在运行的程序正在等待其他的某一件事情完成，才能继续运行，都这么长的时间了，你一定在担心到底发生了什么事情”。</p>
-
-<p><img alt="multi-colored macos beachball busy spinner" src="https://mdn.mozillademos.org/files/16577/beachball.jpg" style="display: block; margin: 0 auto;"></p>
-
-<p>这是令人沮丧的体验，没有充分利用计算机的计算能力 — 尤其是在计算机普遍都有多核CPU的时代，坐在那里等待毫无意义，你完全可以在另一个处理器内核上干其他的工作，同时计算机完成耗时任务的时候通知你。这样你可以同时完成其他工作，这就是<strong>异步编程</strong>的出发点。你正在使用的编程环境（就web开发而言，编程环境就是web浏览器）负责为你提供异步运行此类任务的API。</p>
-
-<h2 id="产生阻塞的代码">产生阻塞的代码</h2>
-
-<p>异步技术非常有用，特别是在web编程。当浏览器里面的一个web应用进行密集运算还没有把控制权返回给浏览器的时候，整个浏览器就像冻僵了一样，这叫做<strong>阻塞；</strong>这时候浏览器无法继续处理用户的输入并执行其他任务，直到web应用交回处理器的控制。</p>
-
-<p>我们来看一些<strong>阻塞</strong>的例子。</p>
-
-<p>例子： <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a>  (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), 在按钮上添加了一个事件监听器，当按钮被点击，它就开始运行一个非常耗时的任务（计算1千万个日期，并在console里显示最后一个日期），然后在DOM里面添加一个段落:</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>运行这个例子的时候，打开JavaScript console，然后点击按钮 — 你会注意到，直到日期的运算结束，最后一个日期在console上显示出来，段落才会出现在网页上。代码按照源代码的顺序执行，只有前面的代码结束运行，后面的代码才会执行。</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 这个例子不现实：在实际情况中一般不会发生，没有谁会计算1千万次日期，它仅仅提供一个非常直观的体验.</p>
-</div>
-
-<p>第二个例子, <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">see it live</a>), 我们模拟一个在现实的网页可能遇到的情况：因为渲染UI而阻塞用户的互动，这个例子有2个按钮:</p>
-
-<ul>
- <li>"Fill canvas" : 点击的时候用1百万个蓝色的圆填满整个{{htmlelement("canvas")}} .</li>
- <li>"Click me for alert" ：点击显示alert 消息.</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>如果你点击第一个按钮，然后快速点击第二个，会注意到alert消息并没有出现，只有等到圆圈都画完以后，才会出现：因为第一个操作没有完成之前阻塞了第二个操作的运行.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 当然，这个例子也很丑陋，因为我们只是在模拟阻塞效果。但在现实中，这是一个很常见的问题。开发人员们一直在努力缓解它。</p>
-</div>
-
-<p>为什么是这样? 答案是：JavaScript一般来说是单线程的（<strong>single threaded</strong>）<strong>。</strong>接着我们来介绍<strong>线程</strong>的概念。</p>
-
-<h2 id="线程">线程</h2>
-
-<p>一个<strong>线程</strong>是一个基本的处理过程，程序用它来完成任务。每个线程一次只能执行一个任务:</p>
-
-<pre>Task A --&gt; Task B --&gt; Task C</pre>
-
-<p>每个任务顺序执行，只有前面的结束了，后面的才能开始。</p>
-
-<p>正如我们之前所说，现在的计算机大都有多个内核（core），因此可以同时执行多个任务。支持多线程的编程语言可以使用计算机的多个内核，同时完成多个任务:</p>
-
-<pre>Thread 1: Task A --&gt; Task B
-Thread 2: Task C --&gt; Task D</pre>
-
-<h3 id="JavaScript_是单线程的">JavaScript 是单线程的</h3>
-
-<p>JavaScript 传统上是单线程的。即使有多个内核，也只能在单一线程上运行多个任务，此线程称为主线程（<strong>main thread</strong>）。我们上面的例子运行如下:</p>
-
-<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
-
-<p>经过一段时间，JavaScript获得了一些工具来帮助解决这种问题。通过 <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> 可以把一些任务交给一个名为worker的单独的线程，这样就可以同时运行多个JavaScript代码块。一般来说，用一个worker来运行一个耗时的任务，主线程就可以处理用户的交互（避免了阻塞）</p>
-
-<pre>Main thread: Task A --&gt; Task C
-Worker thread: Expensive task B</pre>
-
-<p>记住这些，请查看<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">see it running live</a>) , 再次打开浏览器的JavaScript 控制台。这个例子重写了前例：在一个单独的worker线程中计算一千万次日期，你再点击按钮，现在浏览器可以在日期计算完成之前显示段落，阻塞消失了。</p>
-
-<h2 id="异步代码">异步代码</h2>
-
-<p>web workers相当有用，但是他们确实也有局限。主要的一个问题是他们不能访问 {{Glossary("DOM")}} — 不能让一个worker直接更新UI。我们不能在worker里面渲染1百万个蓝色圆圈，它基本上只能做算数的苦活。</p>
-
-<p>其次，虽然在worker里面运行的代码不会产生阻塞，但是基本上还是同步的。当一个函数依赖于几个在它之前运行的过程的结果，这就会成为问题。考虑下面的情况:</p>
-
-<pre>Main thread: Task A --&gt; Task B</pre>
-
-<p>在这种情况下，比如说Task A 正在从服务器上获取一个图片之类的资源，Task B 准备在图片上加一个滤镜。如果开始运行Task A 后立即尝试运行Task B，你将会得到一个错误，因为图像还没有获取到。</p>
-
-<pre>Main thread: Task A --&gt; Task B --&gt; |Task D|
-Worker thread: Task C -----------&gt; |      |</pre>
-
-<p>在这种情况下，假设Task D 要同时使用 Task B 和Task C的结果，如果我们能保证这两个结果同时提供，程序可能正常运行，但是这不太可能。如果Task D 尝试在其中一个结果尚未可用的情况下就运行，程序就会抛出一个错误。</p>
-
-<p>为了解决这些问题，浏览器允许我们异步运行某些操作。像<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> 这样的功能就允许让一些操作运行 (比如：从服务器上获取图片)，然后等待直到结果返回，再运行其他的操作:</p>
-
-<pre>Main thread: Task A                   Task B
-    Promise:      |__async operation__|</pre>
-
-<p>由于操作发生在其他地方，因此在处理异步操作的时候，主线程不会被阻塞。</p>
-
-<p><span class="tlid-translation translation" lang="zh-CN"><span title="">我们将在下一篇文章中开始研究如何编写异步代码。</span> <span title="">非常令人兴奋，对吧？</span> <span title="">继续阅读！</span></span></p>
-
-<h2 id="总结">总结</h2>
-
-<p>围绕异步编程领域，现代软件设计正在加速旋转，就为了让程序在一个时间内做更多的事情。当你使用更新更强大的API时，你会发现在更多的情况下，使用异步编程是唯一的途径。以前写异步代码很困难，现在也需要你来适应，但是已经变容易了很多。在余下的部分，我们将进一步探讨异步代码的重要性，以及如何设计代码来防止前面已经提到过的问题。</p>
-
-<h2 id="模块大纲">模块大纲</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">通用异步编程概念</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">介绍异步JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">合作异步JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">使用Promises优雅的异步编程</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async and await：让异步编程更容易</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">选择正确的方法</a></li>
-</ul>
diff --git a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 0819a5aff0..0000000000
--- a/files/zh-cn/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,618 +0,0 @@
----
-title: '合作异步JavaScript: 超时和间隔'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-original_slug: learn/JavaScript/异步/超时和间隔
----
-<div>{{LearnSidebar}}</div>
-
-
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-
-
-<p class="summary">在这里，我们将讨论传统的JavaScript方法，这些方法可以在一段时间或一段规则间隔(例如，每秒固定的次数)之后，以异步方式运行代码，并讨论它们的用处，以及它们的固有问题。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">预备条件:</th>
-   <td>基本的计算机知识，对JavaScript基本原理有较好的理解。</td>
-  </tr>
-  <tr>
-   <th scope="row">目标:</th>
-   <td>了解异步循环和间隔及其用途。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="介绍">介绍</h2>
-
-<p>很长一段时间以来，web平台为JavaScript程序员提供了许多函数，这些函数允许您在一段时间间隔过后异步执行代码，或者重复异步执行代码块，直到您告诉它停止为止。这些都是:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>在指定的时间后执行一段代码.</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>以固定的时间间隔，重复运行一段代码.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>setInterval()的现代版本;在浏览器下一次重新绘制显示之前执行指定的代码块，从而允许动画在适当的帧率下运行，而不管它在什么环境中运行.</dd>
-</dl>
-
-<p>这些函数设置的异步代码实际上在主线程上运行（在其指定的计时器过去之后）。</p>
-
-<p>在 <code>setTimeout()</code> 调用执行之前或 <code>setInterval()</code> 迭代之间可以（并且经常会）运行其他代码。根据这些操作的处理器密集程度，它们可以进一步延迟异步代码，因为任何异步代码仅在主线程可用后才执行（换句话说，当调用栈为空时）。在阅读本文时，您将学到更多关于此问题的信息。</p>
-
-<p>无论如何，这些函数用于在web站点或应用程序上运行不间断的动画和其他后台处理。在下面的部分中，我们将向您展示如何使用它们。</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>正如前述， <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> 在指定的时间后执行一段特定代码. 它需要如下参数:</p>
-
-<ul>
- <li>要运行的函数，或者函数引用。</li>
- <li>表示在执行代码之前等待的时间间隔(以毫秒为单位，所以1000等于1秒)的数字。如果指定值为0(或完全省略该值)，函数将尽快运行（参阅下面的注释，了解为什么它“尽快”而不是“立即”运行）。稍后详述这样做的原因。</li>
- <li>更多的参数：在指定函数运行时，希望传递给函数的值。</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 指定的时间（或延迟）不能保证在指定的确切时间之后执行，而是最短的延迟执行时间。在主线程上的堆栈为空之前，传递给这些函数的回调将无法运行。</p>
-
-<p>结果，像 <code>setTimeout(fn, 0)</code> 这样的代码将在堆栈为空时立即执行，而不是立即执行。如果执行类似 <code>setTimeout(fn, 0)</code> 之类的代码，之后立即运行从 1 到 100亿 的循环之后，回调将在几秒后执行。 </p>
-</div>
-
-<p>在下面的示例中，浏览器将在执行匿名函数之前等待两秒钟，然后显示alert消息 (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>我们指定的函数不必是匿名的。我们可以给函数一个名称，甚至可以在其他地方定义它，并将函数引用传递给 <code>setTimeout()</code> 。以下两个版本的代码片段相当于第一个版本:</p>
-
-<pre class="brush: js notranslate">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>例如，如果我们有一个函数既需要从超时调用，也需要响应某个事件，那么这将非常有用。此外它也可以帮助保持代码整洁，特别是当超时回调超过几行代码时。</p>
-
-<p><code>setTimeout()</code> 返回一个标志符变量用来引用这个间隔，可以稍后用来取消这个超时任务，下面就会学到 {{anch("Clearing timeouts")}} 。</p>
-
-<h3 id="传递参数给setTimeout">传递参数给setTimeout() </h3>
-
-<p>我们希望传递给<code>setTimeout()</code>中运行的函数的任何参数，都必须作为列表末尾的附加参数传递给它。</p>
-
-<p>例如，我们可以重构之前的函数，这样无论传递给它的人的名字是什么，它都会向它打招呼：</p>
-
-<pre class="brush: js notranslate">function sayHi(who) {
-  alert('Hello ' + who + '!');
-}</pre>
-
-<p>人名可以通过第三个参数传进 <code>setTimeout()</code> ：</p>
-
-<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="清除超时">清除超时</h3>
-
-<p>最后，如果创建了 timeout，您可以通过调用<code>clearTimeout()</code>，将<code>setTimeout()</code>调用的标识符作为参数传递给它，从而在超时运行之前取消。要取消上面的超时，你需要这样做：</p>
-
-<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 请参阅 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a> 以获得稍微复杂一点的演示，该演示允许您在表单中设置要打招呼的人的姓名，并使用单独的按钮取消问候语（<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>）。</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p>当我们需要在一段时间之后运行一次代码时，<code>setTimeout()</code>可以很好地工作。但是当我们需要反复运行代码时会发生什么，例如在动画的情况下?</p>
-
-<p>这就是<code>setInterval()</code>的作用所在。这与<code>setTimeout()</code>的工作方式非常相似，只是作为第一个参数传递给它的函数，<strong>重复</strong>执行的时间不少于第二个参数给出的毫秒数，<strong>而不是一次执行</strong>。您还可以将正在执行的函数所需的任何参数作为 <code>setInterval()</code> 调用的后续参数传递。</p>
-
-<p>让我们看一个例子。下面的函数创建一个新的<code>Date()</code>对象，使用<code>toLocaleTimeString()</code>从中提取一个时间字符串，然后在UI中显示它。然后，我们使用<code>setInterval()</code>每秒运行该函数一次，创建一个每秒更新一次的数字时钟的效果。</p>
-
-<p>(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js notranslate">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">像</span></font>setTimeout()一样</code>, <code>setInterval()</code> 返回一个确定的值，稍后你可以用它来取消间隔任务。</p>
-
-<h3 id="清除intervals">清除intervals</h3>
-
-<p><code>setInterval</code>()永远保持运行任务,除非我们做点什么——我们可能会想阻止这样的任务,否则当浏览器无法完成任何进一步的任务时我们可能得到错误, 或者动画处理已经完成了。我们可以用与停止超时相同的方法来实现这一点——通过将<code>setInterval</code>()调用返回的标识符传递给<code>clearInterval</code>()函数:</p>
-
-<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="主动学习：创建秒表!">主动学习：创建秒表!</h4>
-
-<p>话虽如此，我们还是要给你一个挑战。以我们的<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a>为例，修改它以创建您自己的简单秒表。</p>
-
-<p>你要像前面一样显示时间，但是在这里，你需要：</p>
-
-<ul>
- <li>"Start" 按钮开始计时.</li>
- <li>"Stop" 按钮暂停/停止计时</li>
- <li>"Reset" 按钮清零.</li>
- <li>时间显示经过的秒数.</li>
-</ul>
-
-<p>提示:</p>
-
-<ul>
- <li>您可以随心所欲地构造按钮标记;只需确保使用HTML语法，确保JavaScript获取按钮引用。</li>
- <li>创建一个变量，从0开始，每秒钟增加1.</li>
- <li>与我们版本中所做的一样，在不使用<code>Date</code>()对象的情况下创建这个示例更容易一些，但是不那么精确——您不能保证回调会在恰好1000ms之后触发。更准确的方法是运行<code>startTime = Date.now()</code>来获取用户单击start按钮的确切时间戳，然后执行<code>Date.now() - startTime</code>来获取单击<code>start</code>按钮后的毫秒数。</li>
- <li>您还希望将小时、分钟和秒作为单独的值计算，然后在每次循环迭代之后将它们一起显示在一个字符串中。从第二个计数器，你可以计算出他们.</li>
- <li>如何计时时分秒? 想一下:
-  <ul>
-   <li>一小时3600秒.</li>
-   <li>分钟应该是：时间减去小时后剩下的除以60.</li>
-   <li>分钟都减掉后，剩下的就是秒钟了.</li>
-  </ul>
- </li>
- <li>如果这个数字小于10，最好在显示的值前面加一个0，这样看起来更加像那么回事。</li>
- <li>暂停的话，要清掉间隔函数。重置的话，显示要清零，要更新显示</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 如果您在操作过程有困难，请参考 <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">see it runing live</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="关于_setTimeout_和_setInterval_需要注意的几点">关于 setTimeout() 和 setInterval() 需要注意的几点</h2>
-
-<p>当使用 <code>setTimeout()</code> 和 <code>setInterval()</code>的时候，有几点需要额外注意。 现在让我们回顾一下：</p>
-
-<h3 id="递归的timeouts">递归的timeouts</h3>
-
-<p>还有另一种方法可以使用<code>setTimeout()</code>：我们可以递归调用它来重复运行相同的代码，而不是使用<code>setInterval()</code>。</p>
-
-<p>下面的示例使用递归<code>setTimeout()</code>每100毫秒运行传递来的函数：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>将上面的示例与下面的示例进行比较 ––这使用 <code>setInterval()</code> 来实现相同的效果：</p>
-
-<pre class="brush: js notranslate">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="递归setTimeout和setInterval有何不同？">递归setTimeout()和setInterval()有何不同？</h4>
-
-<p>上述代码的两个版本之间的差异是微妙的。</p>
-
-<ul>
- <li>递归 <code>setTimeout()</code> 保证执行之间的延迟相同，例如在上述情况下为100ms。 代码将运行，然后在它再次运行之前等待100ms，因此无论代码运行多长时间，间隔都是相同的。</li>
- <li>使用 <code>setInterval()</code> 的示例有些不同。 我们选择的间隔包括执行我们想要运行的代码所花费的时间。假设代码需要40毫秒才能运行 - 然后间隔最终只有60毫秒。</li>
- <li>当递归使用 <code>setTimeout()</code> 时，每次迭代都可以在运行下一次迭代之前计算不同的延迟。 换句话说，第二个参数的值可以指定在再次运行代码之前等待的不同时间（以毫秒为单位）。</li>
-</ul>
-
-<p>当你的代码有可能比你分配的时间间隔，花费更长时间运行时，最好使用递归的 <code>setTimeout()</code> - 这将使执行之间的时间间隔保持不变，无论代码执行多长时间，你不会得到错误。</p>
-
-<h3 id="立即超时">立即超时</h3>
-
-<p>使用0用作setTimeout()的回调函数会立刻执行，但是在主线程代码运行之后执行。</p>
-
-<p>举个例子，下面的代码(<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) 输出一个包含警报的"Hello"，然后在您点击第一个警报的OK之后立即弹出“world”。</p>
-
-<pre class="brush: js notranslate">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p><font><font>如果您希望设置一个代码块以便在所有主线程完成运行后立即运行，这将很有用。将其放在异步事件循环中，这样它将随后直接运行。</font></font></p>
-
-<h3 id="使用_clearTimeout_or_clearInterval清除">使用 clearTimeout() or clearInterval()清除</h3>
-
-<p><code>clearTimeout()</code> 和<code>clearInterval()</code> 都使用相同的条目列表进行清除。有趣的是，这意味着你可以使用任一一种方法来清除 <code>setTimeout()</code> 和 <code>setInterval()。</code></p>
-
-<p>但为了保持一致性，你应该使用 <code>clearTimeout()</code> 来清除 <code>setTimeout()</code> 条目，使用 <code>clearInterval()</code> 来清除 <code>setInterval()</code> 条目。 这样有助于避免混乱。</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> 是一个专门的循环函数，旨在浏览器中高效运行动画。它基本上是现代版本的<code>setInterval()</code> —— 它在浏览器重新加载显示内容之前执行指定的代码块，从而允许动画以适当的帧速率运行，不管其运行的环境如何。</p>
-
-<p>它是针对<code>setInterval()</code> 遇到的问题创建的，比如 <code>setInterval()</code>并不是针对设备优化的帧率运行，有时会丢帧。还有即使该选项卡不是活动的选项卡或动画滚出页面等问题 。</p>
-
-<p>（在<a href="http://creativejs.com/resources/requestanimationframe/index.html">CreativeJS</a>上了解有关此内容的更多信息）.</p>
-
-<div class="blockIndicator note">
-<p><strong>注意：</strong> 你可以在课程中其他地方找到<code>requestAnimationFrame()</code> 的使用范例—参见 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, 和 <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>。</p>
-</div>
-
-<p><font>该方法将重新加载页面之前要调用的回调函数作为参数。</font><font>这是您将看到的常见表达：</font></p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>这个想法是要定义一个函数，在其中更新动画 (例如，移动精灵，更新乐谱，刷新数据等)，然后调用它来开始这个过程。在函数的末尾，以 <code>requestAnimationFrame()</code> 传递的函数作为参数进行调用，这指示浏览器在下一次显示重新绘制时再次调用该函数。然后这个操作连续运行， 因为<code>requestAnimationFrame()</code> 是递归调用的。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 如果要执行某种简单的常规DOM动画, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a> 可能更快，因为它们是由浏览器的内部代码计算而不是JavaScript直接计算的。但是，如果您正在做一些更复杂的事情，并且涉及到在DOM中不能直接访问的对象(such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> 在大多数情况下是更好的选择。</p>
-</div>
-
-<h3 id="你的动画跑得有多快？">你的动画跑得有多快？</h3>
-
-<p>动画的平滑度直接取决于动画的帧速率，并以每秒帧数（fps）为单位进行测量。这个数字越高，动画看起来就越平滑。</p>
-
-<p>由于大多数屏幕的刷新率为60Hz，因此在使用web浏览器时，可以达到的最快帧速率是每秒60帧（FPS）。然而，更多的帧意味着更多的处理，这通常会导致卡顿和跳跃-也称为丢帧或跳帧。</p>
-
-<p>如果您有一个刷新率为60Hz的显示器，并且希望达到60fps，则大约有16.7毫秒（1000/60）来执行动画代码来渲染每个帧。这提醒我们，我们需要注意每次通过动画循环时要运行的代码量。</p>
-
-<p><code>requestAnimationFrame()</code> 总是试图尽可能接近60帧/秒的值，当然有时这是不可能的如果你有一个非常复杂的动画，你是在一个缓慢的计算机上运行它，你的帧速率将更少。<code>requestAnimationFrame()</code> 会尽其所能利用现有资源提升帧速率。</p>
-
-<h3 id="requestAnimationFrame_与_setInterval_和_setTimeout有什么不同"> requestAnimationFrame() 与 setInterval() 和 setTimeout()有什么不同?</h3>
-
-<p>让我们进一步讨论一下 <code>requestAnimationFrame()</code> 方法与前面介绍的其他方法的区别. 下面让我们看一下代码:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>现在让我们看看如何使用<code>setInterval()</code>:</p>
-
-<pre class="brush: js notranslate">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>如前所述，我们没有为<code>requestAnimationFrame()</code>;指定时间间隔；它只是在当前条件下尽可能快速平稳地运行它。如果动画由于某些原因而处于屏幕外浏览器也不会浪费时间运行它。</p>
-
-<p> 另一方面<code>setInterval()</code>需要指定间隔。我们通过公式1000毫秒/60Hz得出17的最终值，然后将其四舍五入。四舍五入是一个好主意，浏览器可能会尝试运行动画的速度超过60fps，它不会对动画的平滑度有任何影响。如前所述，60Hz是标准刷新率。</p>
-
-<h3 id="包括时间戳">包括时间戳</h3>
-
-<p>传递给 <code>requestAnimationFrame()</code> 函数的实际回调也可以被赋予一个参数（一个时间戳值），表示自 <code>requestAnimationFrame()</code> 开始运行以来的时间。这是很有用的，因为它允许您在特定的时间以恒定的速度运行，而不管您的设备有多快或多慢。您将使用的一般模式如下所示：</p>
-
-<pre class="brush: js notranslate">let startTime = null;
-
-function draw(timestamp) {
-    if(!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="浏览器支持">浏览器支持</h3>
-
-<p> 与<code>setInterval()<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">或</span></font></code><code>setTimeout()</code> 相比最近的浏览器支持<code>requestAnimationFrame()</code></p>
-
-<p>— <code>requestAnimationFrame()</code>.在Internet Explorer 10及更高版本中可用。因此，除非您的代码需要支持旧版本的IE，否则没有什么理由不使用<code>requestAnimationFrame()</code> 。</p>
-
-<h3 id="一个简单的例子">一个简单的例子</h3>
-
-<p>学习上述理论已经足够了，下面让我们仔细研究并构建自己的<code>requestAnimationFrame()</code> 示例。我们将创建一个简单的“旋转器动画”（spinner animation），即当应用程序忙于连接到服务器时可能会显示的那种动画。</p>
-
-<div class="blockIndicator note">
-<p><strong>注意</strong>: 一般来说，像以下例子中如此简单的动画应用CSS动画来实现，这里使用<code>requestAnimationFrame()</code>只是为了帮助解释其用法。<code>requestAnimationFrame()</code>正常应用于如逐帧更新游戏画面这样的复杂动画。</p>
-</div>
-
-<ol>
- <li>
-  <p>首先, 下载我们的<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">网页模板</a>。</p>
- </li>
- <li>
-  <p>放置一个空的 {{htmlelement("div")}} 元素进入 {{htmlelement("body")}}, 然后在其中加入一个 ↻ 字符.这是一个将循环的字符将在我们的例子中作为我们的旋转器（spinner）。</p>
- </li>
- <li>
-  <p>用任何你喜欢的方法应用下述的CSS到HTML模板中。这些在页面上设置了一个红色背景，将<code>&lt;body&gt;</code>的高度设置为100%<code>&lt;html&gt;</code>的高度，并将<code>&lt;div&gt;</code>水平和竖直居中。</p>
-
-  <pre class="brush: html notranslate">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>插入一个 {{htmlelement("script")}}元素在 <code>&lt;/body&gt; </code>标签之上。</p>
- </li>
- <li>
-  <p>插入下述的JavaScript在你的 <code>&lt;script&gt; </code>元素中。这里我们存储了一个&lt;div&gt;的引用在一个常量中，设置<code>rotateCount</code>变量为 0, 设置一个未初始化的变量之后将会用作容纳一个<code>requestAnimationFrame()</code> 的调用, 然后设置一个 <code>startTime</code> 变量为 <code>null</code>，它之后将会用作存储 <code>requestAnimationFrame()</code> 的起始时间.。</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let rAF;
-let startTime = null;</pre>
- </li>
- <li>
-  <p>在之前的代码下面, 插入一个 <code>draw()</code> 函数将被用作容纳我们的动画代码，并且包含了 <code>时间戳</code> 参数。</p>
-
-  <pre class="brush: js notranslate">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>在<code>draw()</code>中, 加入下述的几行。 如果起始时间还没有被赋值的话，将<code>timestamp</code> 传给它（这只将发生在循环中的第一步）。 并赋值给<code>rotateCount</code> ，以旋转 旋转器(spinning)（此处取<code>(当前时间戳 – 起始时间戳) / 3</code>，以免它转得太快）:</p>
-
-  <pre class="brush: js notranslate">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>在<code>draw()</code>内我们刚刚添加的代码之后，添加以下代码 — 此处是在检查<code>rotateCount</code> 的值是否超过了<code>359</code> (e.g. <code>360</code>, 一个正圆的度数)。 如果是，与360取模（值除以 <code>360</code> 后剩下的余数），使得圆圈的动画能以合理的低值连续播放。需要注意的是，这样的操作并不是必要的，只是比起类似于“128000度”的值，运行在 0-359 度之间会使你的操作更容易些。</p>
-
-  <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
-  rotateCount %= 360;
-}</pre>
- </li>
- <li>
-  <p>接下来，在上一个块下面添加以下行以实际旋转 旋转(spinner)器：</p>
-
-  <pre class="notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>在函数<code>draw()</code>内的最下方，插入下面这行代码。这是整个操作中最关键的部分 — 我们将前面定义的变量设置为以<code>draw()</code>函数为参数的活动<code>requestAnimation()</code>调用。 这样动画就开始了，以尽可能接近60 FPS的速率不断地运行<code>draw()</code>函数。</p>
-
-  <pre class="notranslate">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>在 <code>draw()</code> 函数定义下方，添加对 <code>draw()</code> 函数的调用以启动动画。</p>
- </li>
- <li>
-  <pre class="notranslate">draw();</pre>
- </li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also).</p>
-</div>
-
-<h3 id="撤销requestAnimationFrame">撤销requestAnimationFrame()</h3>
-
-<p><code>requestAnimationFrame()</code>可用与之对应的<code>cancelAnimationFrame()</code>方法“撤销”（不同于“set…”类方法的“清除”，此处更接近“撤销”之意）。</p>
-
-<p>该方法以<code>requestAnimationFrame()</code>的返回值为参数，此处我们将该返回值存在变量 <code>rAF</code> 中：</p>
-
-<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="主动学习：_启动和停止旋转器（spinner）">主动学习： 启动和停止旋转器（spinner）</h3>
-
-<p>在这个练习中，我们希望你能对<code>cancelAnimationFrame()</code>方法做一些测试，在之前的示例中添加新内容。你需要在示例中添加一个事件监听器，用于当鼠标在页面任意位置点击时，启动或停止旋转器。 </p>
-
-<p>一些提示：</p>
-
-<ul>
- <li>包含<code>&lt;body&gt;</code>在内大多数元素都可以添加<code>click</code>事件处理器<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">。为了使可点击区域最大化，直接监听</span></font><code>&lt;body&gt;</code>元素的事件是更有效的，因为事件可以冒泡到其子元素。</li>
- <li>你可能需要添加一个追踪用变量来检测旋转器是否在旋转。该变量若为真，则清除动画帧；若为假，则重新调用函数。</li>
-</ul>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 先自己尝试一下，如果你确实遇到困难，可以参看我们的<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">在线示例</a>和<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">源代码</a>。</p>
-</div>
-
-<h3 id="限制_节流_requestAnimationFrame动画">限制 (节流) requestAnimationFrame()动画</h3>
-
-<p>requestAnimationFrame() 的限制之一是无法选择帧率。在大多数情况下，这不是问题，因为通常希望动画尽可能流畅地运行。但是，当要创建老式的8位类型的动画时，怎么办？</p>
-
-<p>例如，在我们的 <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> 文章中的猴子岛行走动画中的一个问题：</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>在此示例中，必须为角色在屏幕上的位置及显示的精灵设置动画。精灵动画中只有6帧。如果通过 <code>requestAnimationFrame()</code> 为屏幕上显示的每个帧显示不同的精灵帧，则 Guybrush 的四肢移动太快，动画看起来很荒谬。因此，此示例使用以下代码限制精灵循环的帧率：</p>
-
-<pre class="brush: js notranslate">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>因此，代码每13个动画帧循环一次精灵。</p>
-
-<p>...实际上，大约是每 6.5 帧，因为我们将每帧更新 <code>posX</code> 2个单位值（角色在屏幕上的位置）</p>
-
-<pre class="brush: js notranslate">if(posX &gt; width/2) {
-  newStartPos = -( (width / 2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>这是用于计算如何更新每个动画帧中的位置的代码。</p>
-
-<p>用于限制动画的方法将取决于特定代码。例如，在前面的旋转器实例中，可以通过仅在每帧中增加 rotateCount 一个单位(而不是两个单位)来使其运动速度变慢。</p>
-
-<h2 id="主动学习：反应游戏">主动学习：反应游戏</h2>
-
-<p>对于本文的最后部分，将创建一个 2 人反应游戏。游戏将有两个玩家，其中一个使用 <kbd>A</kbd> 键控制游戏，另一个使用 <kbd>L</kbd> 键控制游戏。</p>
-
-<p>按下 <em>开始</em> 按钮后，像前面看到的旋转器那样的将显示 5 到 10 秒之间的随机时间。之后将出现一条消息，提示 “PLAYERS GO！！”。一旦这发生，第一个按下其控制按钮的玩家将赢得比赛。</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>让我们来完成以下工作：</p>
-
-<ol>
- <li>
-  <p>首先，下载 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a> 。其中包含完成的 HTML 结构和 CSS 样式，为我们提供了一个游戏板，其中显示了两个玩家的信息（如上所示），但 spinner 和 结果段落重叠显示，只需要编写 JavaScript 代码。</p>
- </li>
- <li>
-  <p>在页面上空的 {{htmlelement("script")}} 元素里，首先添加以下几行代码，这些代码定义了其余代码中需要的一些常量和变量：</p>
-
-  <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>这些是:</p>
-
-  <ol>
-   <li>对旋转器的引用，因此可以对其进行动画处理。</li>
-   <li>包含旋转器 {{htmlelement("div")}} 元素的引用。用于显示和隐藏它。</li>
-   <li>旋转计数。这确定了显示在动画每一帧上的旋转器旋转了多少。</li>
-   <li>开始时间为null。当旋转器开始旋转时，它将赋值为 开始时间。</li>
-   <li>一个未初始化的变量，用于之后存储使 旋转器 动画化的  {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}  调用。</li>
-   <li>开始按钮的引用。</li>
-   <li>结果字段的引用。</li>
-  </ol>
- </li>
- <li>
-  <p>接下来，在前几行代码下方，添加以下函数。它只接收两个数字并返回一个在两个数字之间的随机数。稍后将需要它来生成随机超时间隔。</p>
-
-  <pre class="brush: js notranslate">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>接下来添加 <code>draw()</code> 函数以使 旋转器 动画化。这与之前的简单旋转器示例中的版本非常相似：</p>
-
-  <pre class="brush: js notranslate">  function draw(timestamp) {
-    if(!startTime) {
-     startTime = timestamp;
-    }
-
-    let rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-      rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-    rAF = requestAnimationFrame(draw);
-  }</pre>
- </li>
- <li>
-  <p>现在是时候在页面首次加载时设置应用程序的初始状态了。添加以下两行，它们使用 <code>display: none;</code> 隐藏结果段落和旋转器容器。</p>
-
-  <pre class="brush: js notranslate">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>接下来，定义一个 <code>reset()</code> 函数。该函数在游戏结束后将游戏设置回初始状态以便再次开启游戏。在代码底部添加以下内容：</p>
-
-  <pre class="brush: js notranslate">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>好的，准备充分！现在该使游戏变得可玩了！将以下代码块添加到代码中。 <code>start()</code> 函数调用 <code>draw()</code> 以启动 旋转器，并在UI中显示它，隐藏“开始”按钮，这样您就无法通过同时启动多次来弄乱游戏，并运行一个经过5到10秒的随机间隔后，会运行 <code>setEndgame()</code> 函数的 <code>setTimeout()</code> 。下面的代码块还将一个事件侦听器添加到按钮上，以在单击它时运行 <code>start()</code> 函数。
-  <pre class="notranslate">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
- </li>
- <li>添加以下方法到代码：</li>
-</ol>
-
-<pre class="brush: js notranslate">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    console.log(e.key);
-    if(e.key === 'a') {
-      result.textContent = 'Player 1 won!!';
-    } else if(e.key === 'l') {
-      result.textContent = 'Player 2 won!!';
-    }
-
-    document.removeEventListener('keydown', keyHandler);
-    setTimeout(reset, 5000);
-  };
-}</pre>
-
-<p>逐步执行以下操作：</p>
-
-<ol>
- <li>首先通过 {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}}  取消 旋转器 动画（清理不必要的流程总是一件好事），隐藏 旋转器 容器。</li>
- <li>接下来，显示结果段落并将其文本内容设置为“ PLAYERS GO !!”。向玩家发出信号，表示他们现在可以按下按钮来取胜。</li>
- <li>将 <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> 事件侦听器附加到 document。当按下任何按钮时，<code>keyHandler()</code> 函数将运行。</li>
- <li>在 <code>keyHandler()</code> 里，在 <code>keyHandler()</code> 内部，代码包括作为参数的事件对象作为参数（用 <code>e</code> 表示）- 其 {{domxref("KeyboardEvent.key", "key")}} 属性包含刚刚按下的键，可以通过这个对象来对特定的操作和特定的按键做出响应。</li>
- <li>将变量 <code>isOver</code> 设置为 <code>false</code> ，这样我们就可以跟踪是否按下了正确的按键以使玩家1或2获胜。我们不希望游戏在按下错误的键后结束。</li>
- <li>将 <code>e.key</code> 输出到控制台，这是找出所按的不同键的键值的有用方法。</li>
- <li>当 <code>e.key</code> 为“ a”时，显示一条消息说玩家1获胜；当 <code>e.key</code> 为“ l”时，显示消息说玩家2获胜。 （注意：这仅适用于小写的a和l - 如果提交了大写的 A 或 L（键加上 <kbd>Shift</kbd>），则将其视为另一个键！）如果按下了其中一个键，请将 <code>isOver</code> 设置为 <code>true</code> 。</li>
- <li>仅当 <code>isOver</code> 为 <code>true</code> 时，才使用 {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 删除 <code>keydown</code> 事件侦听器，以便一旦产生获胜的按键，就不再有键盘输入可以弄乱最终游戏结果。您还可以使用 <code>setTimeout()</code> 在5秒钟后调用 <code>reset()</code>－如前所述，此函数将游戏重置为原始状态，以便可以开始新游戏。</li>
-</ol>
-
-<p>就这样-一切都完成了！</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: 如果卡住了， check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="结论">结论</h2>
-
-<p>就是这样-异步循环和间隔的所有要点在一篇文章中介绍了。您会发现这些方法在许多情况下都很有用，但请注意不要过度使用它们！因为它们仍然在主线程上运行，所以繁重的回调（尤其是那些操纵DOM的回调）会在不注意的情况下降低页面的速度。</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/document/onvisibilitychange/index.html b/files/zh-cn/web/api/document/onvisibilitychange/index.html
deleted file mode 100644
index 22fb0e4db4..0000000000
--- a/files/zh-cn/web/api/document/onvisibilitychange/index.html
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Document.onvisibilitychange
-slug: Web/API/Document/onvisibilitychange
-translation_of: Web/API/Document/onvisibilitychange
----
-<div>{{ApiRef('DOM')}}</div>
-
-<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>;
-</pre>
-
-<ul>
- <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li>
-</ul>
-
-<h2 id="例子">例子</h2>
-
-<pre class="brush: js">document.onvisibilitychange = function() {
-  console.log("Visibility of page has changed!");
-};
-</pre>
-
-<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('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td>
-   <td>{{Spec2('Page Visibility API')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.Document.onvisibilitychange")}}</p>
-
-<h2 id="另见">另见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li>
-</ul>
diff --git a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html b/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
deleted file mode 100644
index 7e26cf4793..0000000000
--- a/files/zh-cn/web/api/performance/onresourcetimingbufferfull/index.html
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: Performance.onresourcetimingbufferfull
-slug: Web/API/Performance/onresourcetimingbufferfull
-translation_of: Web/API/Performance/onresourcetimingbufferfull
----
-<div>{{APIRef("Resource Timing API")}}</div>
-
-<p><strong><code>onresourcetimingbufferfull</code></strong> 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox">callback = <em>performance</em>.onresourcetimingbufferfull = buffer_full_cb;
-</pre>
-
-<h3 id="Return_Value" name="Return_Value">返回值</h3>
-
-<dl>
- <dt>callback</dt>
- <dd>一个当{{event("resourcetimingbufferfull")}} 事件触发时调用的{{event("Event_handlers", "event handler")}} 。</dd>
-</dl>
-
-<h2 id="例子">例子</h2>
-
-<p>下面的示例在<code>onresourcetimingbufferfull属性上</code>设置一个回调函数。</p>
-
-<pre class="brush: js">function buffer_full(event) {
-  console.log("WARNING: Resource Timing Buffer is FULL!");
-  performance.setResourceTimingBufferSize(200);
-}
-function init() {
-  // Set a callback if the resource buffer becomes filled
-  performance.onresourcetimingbufferfull = buffer_full;
-}
-&lt;body onload="init()"&gt;
-</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td>
-   <td>{{Spec2('Resource Timing')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.Performance.onresourcetimingbufferfull")}}
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>{{event("resourcetimingbufferfull")}} event</li>
- <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li>
- <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
new file mode 100644
index 0000000000..0b5890b069
--- /dev/null
+++ b/files/zh-cn/web/api/performance/resourcetimingbufferfull_event/index.html
@@ -0,0 +1,65 @@
+---
+title: Performance.onresourcetimingbufferfull
+slug: Web/API/Performance/resourcetimingbufferfull_event
+translation_of: Web/API/Performance/onresourcetimingbufferfull
+original_slug: Web/API/Performance/onresourcetimingbufferfull
+---
+<div>{{APIRef("Resource Timing API")}}</div>
+
+<p><strong><code>onresourcetimingbufferfull</code></strong> 属性是一个在{{event("resourcetimingbufferfull")}}事件触发时会被调用的 {{domxref("EventHandler","event handler")}} 。这个事件当浏览器的资源时间性能缓冲区已满时会触发。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">callback = <em>performance</em>.onresourcetimingbufferfull = buffer_full_cb;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">返回值</h3>
+
+<dl>
+ <dt>callback</dt>
+ <dd>一个当{{event("resourcetimingbufferfull")}} 事件触发时调用的{{event("Event_handlers", "event handler")}} 。</dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>下面的示例在<code>onresourcetimingbufferfull属性上</code>设置一个回调函数。</p>
+
+<pre class="brush: js">function buffer_full(event) {
+  console.log("WARNING: Resource Timing Buffer is FULL!");
+  performance.setResourceTimingBufferSize(200);
+}
+function init() {
+  // Set a callback if the resource buffer becomes filled
+  performance.onresourcetimingbufferfull = buffer_full;
+}
+&lt;body onload="init()"&gt;
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td>
+   <td>{{Spec2('Resource Timing')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.Performance.onresourcetimingbufferfull")}}
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>{{event("resourcetimingbufferfull")}} event</li>
+ <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li>
+ <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/window/appinstalled_event/index.html b/files/zh-cn/web/api/window/appinstalled_event/index.html
new file mode 100644
index 0000000000..f5f098c903
--- /dev/null
+++ b/files/zh-cn/web/api/window/appinstalled_event/index.html
@@ -0,0 +1,49 @@
+---
+title: Window.onappinstalled
+slug: Web/API/Window/appinstalled_event
+translation_of: Web/API/Window/onappinstalled
+original_slug: Web/API/Window/onappinstalled
+---
+<div>{{APIRef}}</div>
+
+<p>{{domxref("Window")}} 对象的 <code><strong>onappinstalled</strong></code> 属性用于处理 {{Event("appinstalled")}}  事件，该事件是一个实现了 {{domxref("Event")}}接口的简单事件，会在网页应用成功安装为<a href="https://developer.mozilla.org/en-US/Apps/Progressive">渐进式网页应用</a>时立即触发。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
+</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">window.onappinstalled = function(ev) {
+  console.log('The application was installed.');
+};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.Window.onappinstalled")}}
+
+<h2 id="See_also" name="See_also">相关文章</h2>
+
+<ul>
+ <li>{{domxref("Event")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/window/onappinstalled/index.html b/files/zh-cn/web/api/window/onappinstalled/index.html
deleted file mode 100644
index 21662ca3f6..0000000000
--- a/files/zh-cn/web/api/window/onappinstalled/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Window.onappinstalled
-slug: Web/API/Window/onappinstalled
-translation_of: Web/API/Window/onappinstalled
----
-<div>{{APIRef}}</div>
-
-<p>{{domxref("Window")}} 对象的 <code><strong>onappinstalled</strong></code> 属性用于处理 {{Event("appinstalled")}}  事件，该事件是一个实现了 {{domxref("Event")}}接口的简单事件，会在网页应用成功安装为<a href="https://developer.mozilla.org/en-US/Apps/Progressive">渐进式网页应用</a>时立即触发。</p>
-
-<h2 id="Syntax" name="Syntax">语法</h2>
-
-<pre class="syntaxbox">window.onappinstalled = function(event) { ... };
-</pre>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">window.onappinstalled = function(ev) {
-  console.log('The application was installed.');
-};</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('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.Window.onappinstalled")}}
-
-<h2 id="See_also" name="See_also">相关文章</h2>
-
-<ul>
- <li>{{domxref("Event")}}</li>
-</ul>
diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index f7508b3a88..8a72d2b9d9 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -428,6 +428,10 @@
 /zh-TW/docs/Learn/HTML/Multimedia_and_embedding/其他_嵌入_技術	/zh-TW/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 /zh-TW/docs/Learn/HTML/Tables/基礎	/zh-TW/docs/Learn/HTML/Tables/Basics
 /zh-TW/docs/Learn/How_to_contribute	/zh-TW/docs/orphaned/Learn/How_to_contribute
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
+/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/zh-TW/docs/conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
 /zh-TW/docs/Learn/JavaScript/Building_blocks/函數	/zh-TW/docs/Learn/JavaScript/Building_blocks/Functions
 /zh-TW/docs/Learn/JavaScript/Building_blocks/回傳值	/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values
 /zh-TW/docs/Learn/JavaScript/Building_blocks/建立自己的功能函數	/zh-TW/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
new file mode 100644
index 0000000000..de99e1aed8
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/index.html
@@ -0,0 +1,537 @@
+---
+title: 選擇正確的方法
+slug: conflicting/Learn/JavaScript/Asynchronous
+tags:
+  - Beginner
+  - Intervals
+  - JavaScript
+  - Learn
+  - Optimize
+  - Promises
+  - async
+  - asynchronous
+  - await
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+original_slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在結束本單元前，我們將會從先前所討論過的不同程式技巧和功能，幫助您考量在甚麼情況下應該使用哪一個，並適當的提供一些有關常見的陷阱的建議及提醒。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
+
+<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>No</td>
+   <td>Yes (recursive callbacks)</td>
+   <td>Yes (nested callbacks)</td>
+   <td>No</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Code_example">Code example</h3>
+
+<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
+
+<pre class="brush: js">function loadAsset(url, type, callback) {
+  let xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.responseType = type;
+
+  xhr.onload = function() {
+    callback(xhr.response);
+  };
+
+  xhr.send();
+}
+
+function displayImage(blob) {
+  let objectURL = URL.createObjectURL(blob);
+
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+
+<h3 id="Pitfalls">Pitfalls</h3>
+
+<ul>
+ <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
+ <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
+ <li>Async callbacks just aren't very graceful.</li>
+ <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
+ <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
+</ul>
+
+<h3 id="Browser_compatibility">Browser compatibility</h3>
+
+<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
+
+<h3 id="Further_information">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks">Async callbacks</a></li>
+</ul>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>Yes</td>
+   <td>Yes (recursive timeouts)</td>
+   <td>Yes (nested timeouts)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_2">Code example</h3>
+
+<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<h3 id="Pitfalls_2">Pitfalls</h3>
+
+<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
+
+<pre class="brush: js">let i = 1;
+setTimeout(function run() {
+  console.log(i);
+  i++;
+
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
+ <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Browser_compatibility_2">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
+
+<h3 id="Further_information_2">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()">setTimeout()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
+</ul>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless they are the same)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_3">Code example</h3>
+
+<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<h3 id="Pitfalls_3">Pitfalls</h3>
+
+<ul>
+ <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_3">Browser compatibility</h3>
+
+<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
+
+<h3 id="Further_information_3">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
+ <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
+</ul>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>Yes</td>
+   <td>No (unless it is the same one)</td>
+   <td>No</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_4">Code example</h3>
+
+<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
+
+<pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+
+function draw(timestamp) {
+    if(!startTime) {
+        startTime = timestamp;
+    }
+
+    rotateCount = (timestamp - startTime) / 3;
+
+    if(rotateCount &gt; 359) {
+        rotateCount %= 360;
+    }
+
+    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+
+    rAF = requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Pitfalls_4">Pitfalls</h3>
+
+<ul>
+ <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
+</ul>
+
+<h3 id="Browser_compatibility_4">Browser compatibility</h3>
+
+<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
+
+<h3 id="Further_information_4">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()">requestAnimationFrame()</a></li>
+ <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
+</ul>
+
+<h2 id="Promises">Promises</h2>
+
+<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>See <code>Promise.all()</code>, below</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_5">Code example</h3>
+
+<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; response.blob())
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<h3 id="Pitfalls_5">Pitfalls</h3>
+
+<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
+
+<pre class="brush: js">remotedb.allDocs({
+  include_docs: true,
+  attachments: true
+}).then(function (result) {
+  let docs = result.rows;
+  docs.forEach(function(element) {
+    localdb.put(element.doc).then(function(response) {
+      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
+    }).catch(function (err) {
+      if (err.name == 'conflict') {
+        localdb.get(element.doc._id).then(function (resp) {
+          localdb.remove(resp._id, resp._rev).then(function (resp) {
+// et cetera...</pre>
+
+<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
+
+<pre class="brush: js">remotedb.allDocs(...).then(function (resultOfAllDocs) {
+  return localdb.put(...);
+}).then(function (resultOfPut) {
+  return localdb.get(...);
+}).then(function (resultOfGet) {
+  return localdb.put(...);
+}).catch(function (err) {
+  console.log(err);
+});</pre>
+
+<p>or even:</p>
+
+<pre class="brush: js">remotedb.allDocs(...)
+.then(resultOfAllDocs =&gt; {
+  return localdb.put(...);
+})
+.then(resultOfPut =&gt; {
+  return localdb.get(...);
+})
+.then(resultOfGet =&gt; {
+  return localdb.put(...);
+})
+.catch(err =&gt; console.log(err));</pre>
+
+<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
+
+<h3 id="Browser_compatibility_5">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise")}}</p>
+
+<h3 id="Further_information_5">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
+</ul>
+
+<h2 id="Promise.all">Promise.all()</h2>
+
+<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_6">Code example</h3>
+
+<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
+
+<pre class="brush: js">function fetchAndDecode(url, type) {
+  // Returning the top level promise, so the result of the entire chain is returned out of the function
+  return fetch(url).then(response =&gt; {
+    // Depending on what type of file is being fetched, use the relevant function to decode its contents
+    if(type === 'blob') {
+      return response.blob();
+    } else if(type === 'text') {
+      return response.text();
+    }
+  })
+  .catch(e =&gt; {
+    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
+  });
+}
+
+// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
+let coffee = fetchAndDecode('coffee.jpg', 'blob');
+let tea = fetchAndDecode('tea.jpg', 'blob');
+let description = fetchAndDecode('description.txt', 'text');
+
+// Use Promise.all() to run code only when all three function calls have resolved
+Promise.all([coffee, tea, description]).then(values =&gt; {
+  console.log(values);
+  // Store each value returned from the promises in separate variables; create object URLs from the blobs
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  // Display the images in &lt;img&gt; elements
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  // Display the text in a paragraph
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+});</pre>
+
+<h3 id="Pitfalls_6">Pitfalls</h3>
+
+<ul>
+ <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
+</ul>
+
+<h3 id="Browser_compatibility_6">Browser compatibility</h3>
+
+<p>{{Compat("javascript.builtins.Promise.all")}}</p>
+
+<h3 id="Further_information_6">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
+</ul>
+
+<h2 id="Asyncawait">Async/await</h2>
+
+<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
+
+<table class="standard-table">
+ <caption>Useful for...</caption>
+ <thead>
+  <tr>
+   <th scope="col">Single delayed operation</th>
+   <th scope="col">Repeating operation</th>
+   <th scope="col">Multiple sequential operations</th>
+   <th scope="col">Multiple simultaneous operations</th>
+  </tr>
+  <tr>
+   <td>No</td>
+   <td>No</td>
+   <td>Yes</td>
+   <td>Yes (in combination with <code>Promise.all()</code>)</td>
+  </tr>
+ </thead>
+</table>
+
+<h3 id="Code_example_7">Code example</h3>
+
+<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}
+
+myFetch();</pre>
+
+<h3 id="Pitfalls_7">Pitfalls</h3>
+
+<ul>
+ <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
+ <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
+</ul>
+
+<h3 id="Browser_compatibility_7">Browser compatibility</h3>
+
+<p>{{Compat("javascript.statements.async_function")}}</p>
+
+<h3 id="Further_information_7">Further information</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
+ <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
+</ul>
+
+<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
new file mode 100644
index 0000000000..5cddfa32cb
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/introducing/index.html
@@ -0,0 +1,170 @@
+---
+title: 非同步程式設計通用概念
+slug: conflicting/Learn/JavaScript/Asynchronous/Introducing
+tags:
+  - JavaScript
+  - Learn
+  - Promises
+  - Threads
+  - asynchronous
+  - blocking
+  - 非同步
+  - 執行緒
+original_slug: Learn/JavaScript/Asynchronous/Concepts
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p>在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前你應該先具備這些觀念。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">先備知識：</th>
+   <td>基本的電腦概念，理解 JavaScript 的基本原理。</td>
+  </tr>
+  <tr>
+   <th scope="row">學習目標：</th>
+   <td>了解非同步程式設計背後的基本概念，以及其如何在網頁瀏覽器及 JavaScript 作呈現。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Asynchronous">非同步？</h2>
+
+<p>一般來說，在程式碼的執行順序當下同一時間只會處理一件事。如果某個函式依賴於其他函式的執行結果，那麼它就需要等待其完成並回傳結果才能執行，直到那樣的情況發生，以使用者的角度而言整個程式才是真正的結束。</p>
+
+<p>Mac 的使用者有時候會發現游標變成彩虹色的旋轉圖案（或經常被稱作為「沙灘球」）。這個游標的出現代表作業系統像是正對著你說：「你在執行的程式目前正在等待其他程式的完成而被暫停，因為花了一點時間所以我擔心你會想知道發生了甚麼事。」</p>
+
+<p><img alt="Multi-colored macOS beachball busy spinner" src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p>
+
+<br/>
+
+<p>這種經驗通常令人沮喪而且這也並未善加利用電腦處理器的能力——特別是在擁有多核處理器的世代。比起只能毫無意義的坐著乾等，如果能夠安排其他任務交由其他處理器來執行並讓你知道任務何時完成，這樣就有效率多了，像這樣能讓其他工作在同時間完成，這就是<strong>非同步程式設計</strong>的基礎。這取決於你目前正在使用的程式環境，如同網頁瀏覽器會提供一些 API 能讓你非同步的執行任務。</p>
+
+<br/><br/>
+
+<h2 id="Blocking_code">阻塞程式碼</h2>
+
+<p>非同步的技巧非常實用，特別是在網頁程式設計上。當一個網頁應用程式運行在瀏覽器且執行大量的程式碼的當下並未將控制權交還給瀏覽器時，瀏覽器可能會處於凍結狀態。我們稱之為<strong>阻塞（ blocking ）</strong>，瀏覽器正在持續處理使用者的輸入並執行其他任務就會被阻塞住，直到應用程式將處理器的控制權歸還後才會解除。</p>
+
+<p>我們來看幾個程式範例來說明阻塞是甚麼意思。</p>
+
+<p>在這個例子 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">線上範例</a>），我們在按鈕增加一個點擊事件監聽器，在點擊時會執行一段相當耗時的操作（執行新增日期物件一千萬次並將最後一次的結果顯示在控制台上）然後再加入一則文字段落到 {{Glossary("DOM")}} 上：</p>
+
+<pre class="brush: js">const btn = document.querySelector('button');
+btn.addEventListener('click', () =&gt; {
+  let myDate;
+  for(let i = 0; i &lt; 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});</pre>
+
+<p>當執行我們的範例時，打開你的 JavaScript 控制台並點擊按鈕——你會注意到文字並不會馬上就出現在畫面上，而是要等到跑完新增日期物件的迴圈並將結果顯示在控制台上後，新增的文字才會出現。原因在於程式碼依照順序執行，因此某一筆的操作必須等待上一筆執行完成後才會執行。</p>
+
+<div class="notecard note">
+<p><strong>注意</strong>：上述的範例只是用來作為了解原理的基本範例，在現實生活中你不會真的執行一千萬次的新增日期物件。</p>
+</div>
+
+<p>在我們第二個範例， <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">線上範例</a>），我們模擬了一段比較貼近現實的範例，你或許會在現實的頁面上遇到。我們在渲染畫面的期間阻擋和使用者的互動行為。在本範例，我們有兩個按鈕：</p>
+
+<ul>
+ <li>當「 Fill canvas 」按鈕被點擊時，我們會填滿一百萬個藍色圓圈到可用的 {{htmlelement("canvas")}} 標籤內。</li>
+ <li>當點擊「 Click me for alert 」按鈕後會顯示警告訊息。</li>
+</ul>
+
+<pre class="brush: js">function expensiveOperation() {
+  for(let i = 0; i &lt; 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =&gt;
+  alert('You clicked me!')
+);</pre>
+
+<p>當點擊第一個按鈕之後緊接著點擊第二個按鈕，你會發現警告訊息並不會馬上出現，而是要等到圓圈圖案被渲染完成後才會出現警告訊息視窗。第一個操作在完成之前都會阻擋第二個操作的執行。</p>
+
+<div class="notecard note">
+<p><strong>注意</strong>：我們是在偽造一個阻塞且這個例子可能有點醜陋，但這卻是在現實中大多數的開發者試圖避免的常見問題。</p>
+</div>
+
+<p>為什麼會這樣？事實是因為 JavaScript 在執行上是使用 <strong>單一執行緒（ single-threaded ）</strong>。現在，我們需要說明一下<strong>執行緒（ thread ）</strong>的概念。</p>
+
+<h2 id="Threads">執行緒</h2>
+
+<p><strong>執行緒（ thread ）</strong>基本上是可以用來完成程式碼任務的單一行程（ process ）。每一條執行緒在同一時間只會執行一項任務：</p>
+
+<pre>任務 A --&gt; 任務 B --&gt; 任務 C</pre>
+
+<p>每一項任務必須依照順序來執行，下一項任務必須要等到前一項任務完成後才能開始執行。</p>
+
+<p>我們稍早所說，現今許多電腦擁有許多顆核心，所以可以在同一時間做許多事。可以支援多條執行緒的程式語言在同一時間可以利用多顆核心來完成數個任務：</p>
+
+<pre>執行緒１：任務 A --&gt; 任務 B
+執行緒２：任務 C --&gt; 任務 D</pre>
+
+<h3 id="JavaScript_is_single-threaded">JavaScript 是單執行緒的</h3>
+
+<p>JavaScript 在傳統意義上是跑在一條單執行緒。即便你的電腦有多顆核心，也只能在 JavaScript 上面跑一條執行緒來完成任務，這一條執行緒我們稱為<strong>主執行緒（ main thread ）</strong>。我們稍早的第二個例子執行流程就像是底下這樣：</p>
+
+<pre>主執行緒：渲染圓圈圖形到 canvas --&gt; 顯示 alert()</pre>
+
+<p>在經過一段時間的發展後， JavaScript 取得某種工具來處理上述的問題。 <a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 允許傳送一些任務到不同的執行緒上，因此呼叫一個 worker 你可以在同一時間跑不同的任務區塊。透過使用 worker 就可以和主執行緒分工合作，因此不會阻塞和使用者的互動。</p>
+
+<pre>      主執行緒：任務 A --&gt; 任務 C
+背景工作執行緒：耗時的任務 B</pre>
+
+<p>依照這個想法，我們來改寫之前的例子 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">線上範例</a>），一樣打開你的 JavaScript 控制台吧。我們改寫利用 worker 產生額外的執行緒來執行一千萬次的呼叫新增日期物件的範例。現在你點擊一下按鈕，你會發現新增的文字段落馬上就會顯示在畫面上，而稍後日期才會顯示在 JavaScript 控制台。第一項操作不再阻塞第二項的執行了。</p>
+
+<h2 id="Asynchronous_code">非同步的程式碼</h2>
+
+<p><a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 相當有用，但還是有它的限制在。最主要的限制是在它不能直接存取 {{Glossary("DOM")}} ——你不能透過 worker 去直接更新你的 UI 。我們不能透過 worker 去渲染一百萬個藍色圈圈，它基本上只能做一些數字運算的工作。</p>
+
+<p>第二個問題是即使我們的程式跑在 worker 上不會阻塞主執行緒的執行，但基本上我們還是處於同步的。當一個函式的執行依賴於多個函式的執行結果就會發生問題。看看底下的執行緒圖表：</p>
+
+<pre>主執行緒：任務 A --&gt; 任務 B</pre>
+
+<p>在這個例子，任務 A 正在做一些像是從遠端伺服器抓取圖片的工作，任務 B 會將抓取下來的圖片套用一些濾鏡的特效。如果你執行任務 A 後立即執行任務 B ，你會收到錯誤訊息，因為任務 B 當下並沒有圖片可以套用。</p>
+
+<pre>      主執行緒：任務 A --&gt; 任務 B --&gt; ｜任務 D ｜
+背景工作執行緒：任務 C -------------&gt; ｜      ｜</pre>
+
+<p>在這個例子，我們說任務 D 必須依賴任務 B 及任務 C 的執行結果。如果我們保證在執行任務 D 的當下都已經取得 B 和 C 的執行結果，這也許沒甚麼問題，但這不太可能。任務 D 執行的當下若有任一個依賴結果尚未完成，勢必會發生錯誤。</p>
+
+<p>為了修正此問題，瀏覽器允許我們非同步的運行某些操作。如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> 功能允許你在一項正在執行的操作做設定（例如：從遠端伺服器抓取圖片），然後等待其執行結果回傳之後再進行之後的操作：</p>
+
+<pre>主執行緒：任務 A                   任務 B
+Promise ：   ｜_____非同步操作_____｜</pre>
+
+<p>因為操作發生在其他地方，因此主執行緒並不會在執行非同步的工作時被阻塞住。</p>
+
+<p>我們會在下一篇文章來看看我們如何寫出非同步的程式碼，真令人興奮，對吧？讓我們繼續看下去吧！</p>
+
+<h2 id="Conclusion">結論</h2>
+
+<p>現代軟體越來越多圍繞在使用非同步的程式技巧來設計，讓程式碼可以在同一時間做越多事。當你使用目前越新越強大的 API 時，你會發現更多情況之下他們處理工作唯一的方法就是使用非同步的處理方式。過去我們很難寫出可以執行非同步的程式碼，但現在簡單多了。在剩餘的單元中，我們將會進一步的探討為何非同步如此重要，以及如何設計出避免上述某些問題的程式碼。</p>
+
+<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
+
+<h2 id="In_this_module">在本單元</h2>
+
+<ul>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">協同的非同步 JavaScript ： Timeout 和 interval</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises">優雅的使用 Promise 來處理非同步操作</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await">利用 async 及 await 讓非同步程式設計變得更容易</a></li>
+ <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">選擇正確的方法</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
new file mode 100644
index 0000000000..911ba3caba
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous/promises/index.html
@@ -0,0 +1,436 @@
+---
+title: 利用 async 及 await 讓非同步程式設計變得更容易
+slug: conflicting/Learn/JavaScript/Asynchronous/Promises
+tags:
+  - Beginner
+  - CodingScripting
+  - Guide
+  - JavaScript
+  - Learn
+  - Promises
+  - async
+  - asynchronous
+  - await
+original_slug: Learn/JavaScript/Asynchronous/Async_await
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">More recent additions to the JavaScript language are <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> and the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> keyword, part of the so-called ECMAScript 2017 JavaScript edition (see <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand promises and how to use them.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
+
+<p>There are two parts to using async/await in your code.</p>
+
+<h3 id="The_async_keyword">The async keyword</h3>
+
+<p>First of all we have the <code>async</code> keyword, which you put in front of a function declaration to turn it into an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>. An async function is a function that knows how to expect the possibility of the <code>await</code> keyword being used to invoke asynchronous code.</p>
+
+<p>Try typing the following lines into your browser's JS console:</p>
+
+<pre class="brush: js">function hello() { return "Hello" };
+hello();</pre>
+
+<p>The function returns "Hello" — nothing special, right?</p>
+
+<p>But what if we turn this into an async function? Try the following:</p>
+
+<pre class="brush: js">async function hello() { return "Hello" };
+hello();</pre>
+
+<p>Ah. Invoking the function now returns a promise. This is one of the traits of async functions — their return values are guaranteed to be converted to promises.</p>
+
+<p>You can also create an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>, like so:</p>
+
+<pre class="brush: js">let hello = async function() { return "Hello" };
+hello();</pre>
+
+<p>And you can use arrow functions:</p>
+
+<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
+
+<p>These all do basically the same thing.</p>
+
+<p>To actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a <code>.then()</code> block:</p>
+
+<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
+
+<p>or even just shorthand such as</p>
+
+<pre class="brush: js">hello().then(console.log)</pre>
+
+<p>Like we saw in the last article.</p>
+
+<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value.</p>
+
+<h3 id="The_await_keyword">The await keyword</h3>
+
+<p>The advantage of an async function only becomes apparent when you combine it with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> keyword. <code>await</code> only works inside async functions within regular JavaScript code, however it can be used on its own with <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
+
+<p><code>await</code> can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.</p>
+
+<p>You can use <code>await</code> when calling any function that returns a Promise, including web API functions.</p>
+
+<p>Here is a trivial example:</p>
+
+<pre class="brush: js">async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);</pre>
+
+<p>Of course, the above example is not very useful, although it does serve to illustrate the syntax. Let's move on and look at a real example.</p>
+
+<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
+
+<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
+
+<pre class="brush: js">fetch('coffee.jpg')
+.then(response =&gt; {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return response.blob();
+})
+.then(myBlob =&gt; {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+
+  let myBlob = await response.blob();
+
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e =&gt; {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});</pre>
+
+<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
+
+<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e =&gt; console.log(e));</pre>
+
+<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+
+<h3 id="But_how_does_it_work">But how does it work?</h3>
+
+<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
+
+<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, not allowing further code to execute in the meantime until the async function call has returned its result — very useful if subsequent code relies on that result!</p>
+
+<p>Once that's complete, your code continues to execute starting on the next line. For example:</p>
+
+<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
+
+<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
+
+<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
+
+<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
+
+<h3 id="Adding_error_handling">Adding error handling</h3>
+
+<p>And if you want to add error handling, you've got a couple of options.</p>
+
+<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
+
+<pre class="brush: js">async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    let myBlob = await response.blob();
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();</pre>
+
+<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
+
+<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
+
+<pre class="brush: js">async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  return await response.blob();
+
+}
+
+myFetch().then((blob) =&gt; {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
+
+<p>You can find both of these examples on GitHub:</p>
+
+<ul>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
+ <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
+</ul>
+
+<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
+
+<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
+
+<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
+
+<pre class="brush: js">async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  if(type === 'blob') {
+    content = await response.blob();
+  } else if(type === 'text') {
+    content = await response.text();
+  }
+
+  return content;
+
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =&gt;
+  console.log(e)
+);</pre>
+
+<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
+
+<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
+
+<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
+
+<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors occurring in both functions.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
+</div>
+
+<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
+
+<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
+
+<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows it until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but the awaited code is blocked.</p>
+
+<pre class="brush: js">async function makeResult(items) {
+ let newArr = [];
+ for(let i=0; i &lt; items.length; i++) {
+  newArr.push('word_'+i);
+ }
+ return newArr;
+}
+
+async function getResult() {
+ let result = await makeResult(items); // Blocked on this line
+ useThatResult(result); // Will not be executed before makeResult() is done
+}
+
+</pre>
+
+<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
+
+<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
+
+<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
+
+<pre class="brush: js">function timeoutPromise(interval) {
+  return new Promise((resolve, reject) =&gt; {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};</pre>
+
+<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
+
+<pre class="brush: js">async function timeTest() {
+  ...
+}</pre>
+
+<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
+
+<pre class="brush: js">let startTime = Date.now();
+timeTest().then(() =&gt; {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})</pre>
+
+<p>It is the <code>timeTest()</code> function that differs in each case.</p>
+
+<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js">async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}</pre>
+
+<p>Here we await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
+
+<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
+
+<pre class="brush: js">async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}</pre>
+
+<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
+
+<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
+
+<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
+
+<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
+
+<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+
+<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
+
+<pre class="brush: js">class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+
+<p>The first class method could now be used something like this:</p>
+
+<pre class="brush: js">han.greeting().then(console.log);</pre>
+
+<h2 id="Browser_support">Browser support</h2>
+
+<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+
+<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
diff --git a/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html b/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
new file mode 100644
index 0000000000..7d0a0d7313
--- /dev/null
+++ b/files/zh-tw/conflicting/learn/javascript/asynchronous_ae5a561b0ec11fc53c167201aa8af5df/index.html
@@ -0,0 +1,647 @@
+---
+title: '協同的非同步 JavaScript: Timeouts 和 intervals'
+slug: conflicting/Learn/JavaScript/Asynchronous_ae5a561b0ec11fc53c167201aa8af5df
+tags:
+  - Animation
+  - Beginner
+  - CodingScripting
+  - Guide
+  - Intervals
+  - JavaScript
+  - Loops
+  - asynchronous
+  - requestAnimationFrame
+  - setInterval
+  - setTimeout
+  - timeouts
+original_slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
+
+<p class="summary">在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式 (如每秒發生的次數) 讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerequisites:</th>
+   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
+  </tr>
+  <tr>
+   <th scope="row">Objective:</th>
+   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Introduction">Introduction</h2>
+
+<p>For a long time, the web platform has offered JavaScript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.</p>
+
+<p>These functions are:</p>
+
+<dl>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
+ <dd>Execute a specified block of code once after a specified time has elapsed.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
+ <dd>Execute a specified block of code repeatedly with a fixed time delay between each call.</dd>
+ <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
+ <dd>The modern version of <code>setInterval()</code>. Executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in.</dd>
+</dl>
+
+<p>The asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed).</p>
+
+<p>It's important to know that you can (and often will) run other code before a <code>setTimeout()</code> call executes, or between iterations of <code>setInterval()</code>. Depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only <em>after</em> the main thread is available. (In other words, when the stack is empty.)  You will learn more on this matter as you progress through this article.</p>
+
+<p>In any case, these functions are used for running constant animations and other background processing on a web site or application. In the following sections we will show you how they can be used.</p>
+
+<h2 id="setTimeout">setTimeout()</h2>
+
+<p>As we said before, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executes a particular block of code once after a specified time has elapsed. It takes the following parameters:</p>
+
+<ul>
+ <li>A function to run, or a reference to a function defined elsewhere.</li>
+ <li>A number representing the time interval in milliseconds (1000 milliseconds equals 1 second) to wait before executing the code. If you specify a value of <code>0</code> (or omit the value), the function will run as soon as possible. (See the note below on why it runs "as soon as possible" and not "immediately".) More on why you might want to do this later.</li>
+ <li>Zero or more values that represent any parameters you want to pass to the function when it is run.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>NOTE:</strong> The specified amount of time (or the delay) is <strong>not</strong> the <em>guaranteed time</em> to execution, but rather the <em>minimum time</em> to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.</p>
+
+<p>As a consequence, code like <code>setTimeout(fn, 0)</code> will execute as soon as the stack is empty, <strong>not</strong> immediately. If you execute code like <code>setTimeout(fn, 0)</code> but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.</p>
+</div>
+
+<p>In the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(function() {
+  alert('Hello, Mr. Universe!');
+}, 2000)</pre>
+
+<p>The functions you specify don't have to be anonymous. You can give your function a name, and even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of the code snippet are equivalent to the first one:</p>
+
+<pre class="brush: js">// With a named function
+let myGreeting = setTimeout(function sayHi() {
+  alert('Hello, Mr. Universe!');
+}, 2000)
+
+// With a function defined separately
+function sayHi() {
+  alert('Hello Mr. Universe!');
+}
+
+let myGreeting = setTimeout(sayHi, 2000);</pre>
+
+<p>That can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example. But it can also just help keep your code tidy, especially if the timeout callback is more than a few lines of code.</p>
+
+<p><code>setTimeout()</code> returns an identifier value that can be used to refer to the timeout later, such as when you want to stop it. See {{anch("Clearing timeouts")}} (below) to learn how to do that.</p>
+
+<h3 id="Passing_parameters_to_a_setTimeout_function">Passing parameters to a setTimeout() function</h3>
+
+<p>Any parameters that you want to pass to the function being run inside the <code>setTimeout()</code> must be passed to it as additional parameters at the end of the list.</p>
+
+<p>For example, you could refactor the previous function so that it will say hi to whatever person's name is passed to it:</p>
+
+<pre class="brush: js">function sayHi(who) {
+  alert(`Hello ${who}!`);
+}</pre>
+
+<p>Now, you can pass the name of the person into the <code>setTimeout()</code> call as a third parameter:</p>
+
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+
+<h3 id="Clearing_timeouts">Clearing timeouts</h3>
+
+<p>Finally, if a timeout has been created, you can cancel it before the specified time has elapsed by calling <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passing it the identifier of the <code>setTimeout()</code> call as a parameter. So to cancel our above timeout, you'd do this:</p>
+
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
+
+<div class="notecard note">
+<p><strong>Note</strong>: See <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>).</p>
+</div>
+
+<h2 id="setInterval">setInterval()</h2>
+
+<p><code>setTimeout()</code> works perfectly when you need to run code once after a set period of time. But what happens when you need to run the code over and over again—for example, in the case of an animation?</p>
+
+<p>This is where <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> comes in. This works in a very similar way to <code>setTimeout()</code>, except that the function you pass as the first parameter is executed repeatedly at no less than the number of milliseconds given by the second parameter apart, rather than once. You can also pass any parameters required by the function being executed as subsequent parameters of the <code>setInterval()</code> call.</p>
+
+<p>Let's look at an example. The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. It then runs the function once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
+
+<pre class="brush: js">function displayTime() {
+   let date = new Date();
+   let time = date.toLocaleTimeString();
+   document.getElementById('demo').textContent = time;
+}
+
+const createClock = setInterval(displayTime, 1000);</pre>
+
+<p>Just like <code>setTimeout()</code>, <code>setInterval()</code> returns an identifying value you can use later when you need to clear the interval.</p>
+
+<h3 id="Clearing_intervals">Clearing intervals</h3>
+
+<p><code>setInterval()</code> keeps running a task forever, unless you do something about it. You'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. You can do this the same way you stop timeouts — by passing the identifier returned by the <code>setInterval()</code> call to the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code> function:</p>
+
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
+
+clearInterval(myInterval);</pre>
+
+<h4 id="Active_learning_Creating_your_own_stopwatch!">Active learning: Creating your own stopwatch!</h4>
+
+<p>With this all said, we've got a challenge for you. Take a copy of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> example, and modify it to create your own simple stopwatch.</p>
+
+<p>You need to display a time as before, but in this example, you need:</p>
+
+<ul>
+ <li>A "Start" button to start the stopwatch running.</li>
+ <li>A "Stop" button to pause/stop it.</li>
+ <li>A "Reset" button to reset the time back to <code>0</code>.</li>
+ <li>The time display to show the number of seconds elapsed, rather than the actual time.</li>
+</ul>
+
+<p>Here's a few hints for you:</p>
+
+<ul>
+ <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
+ <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
+ <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
+ <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
+ <li>How would you calculate them? Have a think about it:
+  <ul>
+   <li>The number of seconds in an hour is <code>3600</code>.</li>
+   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
+   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
+  </ul>
+ </li>
+ <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
+ <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
+ <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
+</div>
+
+<h2 id="Things_to_keep_in_mind_about_setTimeout_and_setInterval">Things to keep in mind about setTimeout() and setInterval()</h2>
+
+<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
+
+<h3 id="Recursive_timeouts">Recursive timeouts</h3>
+
+<p>There is another way to use <code>setTimeout()</code>: you can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
+
+<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every <code>100</code> milliseconds:</p>
+
+<pre class="brush: js">let i = 1;
+
+setTimeout(function run() {
+  console.log(i);
+  i++;
+  setTimeout(run, 100);
+}, 100);</pre>
+
+<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
+
+<pre class="brush: js">let i = 1;
+
+setInterval(function run() {
+  console.log(i);
+  i++
+}, 100);</pre>
+
+<h4 id="How_do_recursive_setTimeout_and_setInterval_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
+
+<p>The difference between the two versions of the above code is a subtle one.</p>
+
+<ul>
+ <li>Recursive <code>setTimeout()</code> guarantees the given delay between the code execution completion and the next call. The delay for the next execution will start counting only after the code has finished running, therefore <em>excluding</em> the time taken to run the code. In this example, the <code>100</code> milliseconds will be the delay between the <code>run</code> code finishing, and the next <code>run</code> call.</li>
+ <li>The example using <code>setInterval()</code> does things somewhat differently. The interval you chose <em>includes</em> the time taken to execute the code you want to run in. Let's say that the code takes <code>40</code> milliseconds to run — the interval then ends up being only <code>60</code> milliseconds.</li>
+ <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
+</ul>
+
+<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
+
+<h3 id="Immediate_timeouts">Immediate timeouts</h3>
+
+<p>Using <code>0</code> as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
+
+<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing <code>"Hello"</code>, then an alert containing <code>"World"</code> as soon as you click OK on the first alert.</p>
+
+<pre class="brush: js">setTimeout(function() {
+  alert('World');
+}, 0);
+
+alert('Hello');</pre>
+
+<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
+
+<h3 id="Clearing_with_clearTimeout_or_clearInterval">Clearing with clearTimeout() or clearInterval()</h3>
+
+<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
+
+<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
+
+<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
+
+<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
+
+<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc.</p>
+
+<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.)</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
+</div>
+
+<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>The idea is to define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever). Then, you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as the code is calling <code>requestAnimationFrame()</code> recursively.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster. They are calculated directly by the browser's internal code, rather than JavaScript.</p>
+
+<p>If, however, you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
+</div>
+
+<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
+
+<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
+
+<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
+
+<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (<code>1000 / 60</code>) to execute your animation code to render each frame. This is a reminder that you'll need to be mindful of the amount of code that you try to run during each pass through the animation loop.</p>
+
+<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible. Sometimes, it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. In all cases, <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
+
+<h3 id="How_does_requestAnimationFrame_differ_from_setInterval_and_setTimeout">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
+
+<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods used earlier. Looking at our code from above:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<p>Let's now see how to do the same thing using <code>setInterval()</code>:</p>
+
+<pre class="brush: js">function draw() {
+   // Drawing code goes here
+}
+
+setInterval(draw, 17);</pre>
+
+<p>As we covered earlier, you don't specify a time interval for <code>requestAnimationFrame()</code>. It just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
+
+<p><code>setInterval()</code>, on the other hand <em>requires</em> an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea; if you rounded down, the browser might try to run the animation faster than 60 FPS, and it wouldn't make any difference to the animation's smoothness, anyway. As we said before, 60Hz is the standard refresh rate.</p>
+
+<h3 id="Including_a_timestamp">Including a timestamp</h3>
+
+<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter, too: a <em>timestamp</em> value, that represents the time since the <code>requestAnimationFrame()</code> started running.</p>
+
+<p>This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
+
+<pre class="brush: js">let startTime = null;
+
+function draw(timestamp) {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+   currentTime = timestamp - startTime;
+
+   // Do something based on current time
+
+   requestAnimationFrame(draw);
+}
+
+draw();</pre>
+
+<h3 id="Browser_support">Browser support</h3>
+
+<p><code>requestAnimationFrame()</code> is supported in more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code>.  Interestingly, it is available in Internet Explorer 10 and above.</p>
+
+<p>So, unless you need to support older versions of IE, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
+
+<h3 id="A_simple_example">A simple example</h3>
+
+<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
+</div>
+
+<ol>
+ <li>
+  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
+ </li>
+ <li>
+  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This circular arrow character will act as our spinner for this example.</p>
+ </li>
+ <li>
+  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
+
+  <pre class="brush: css">html {
+  background-color: white;
+  height: 100%;
+}
+
+body {
+  height: inherit;
+  background-color: red;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+div {
+  display: inline-block;
+  font-size: 10rem;
+}</pre>
+ </li>
+ <li>
+  <p>Insert a {{htmlelement("script")}} element just above the closing <code>&lt;/body&gt;</code> tag.</p>
+ </li>
+ <li>
+  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('div');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+
+}</pre>
+ </li>
+ <li>
+  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
+
+  <pre class="brush: js">  if (!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+</pre>
+ </li>
+ <li>
+  <p>Below the previous line inside <code>draw()</code>, add the following block — this ensures that the value of <code>rotateCount</code> is between <code>0</code> and <code>359</code>, by setting the value to its modulo of <code>360</code> (i.e. the remainder left over when the value is divided by <code>360</code>) — so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of <code>0</code>–<code>359</code> degrees than values like <code>"128000 degrees"</code>.</p>
+
+  <pre class="brush: js">  rotateCount %= 360; </pre>
+ </li>
+ <li>Next, below the previous block add the following line to actually rotate the spinner:
+  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ </li>
+ <li>
+  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
+
+  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
+ </li>
+ <li>
+  <p>Below the <code>draw()</code> function definition, add a call to the <code>draw()</code> function to start the animation.</p>
+
+  <pre class="brush: js">draw();</pre>
+ </li>
+</ol>
+
+<div class="notecard note">
+<p><strong>Note</strong>: You can find the finished <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
+</div>
+
+<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
+
+<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
+
+<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
+
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
+
+<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
+
+<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
+
+<p>Some hints:</p>
+
+<ul>
+ <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
+ <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
+</ul>
+
+<div class="notecard note">
+<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
+</div>
+
+<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
+
+<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
+
+<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
+
+<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
+
+<pre class="brush: js">if (posX % 13 === 0) {
+  if (sprite === 5) {
+    sprite = 0;
+  } else {
+    sprite++;
+  }
+}</pre>
+
+<p>So the code only cycles the sprite once every 13 animation frames.</p>
+
+<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
+
+<pre class="brush: js">if (posX &gt; width/2) {
+  newStartPos = -( (width/2) + 102 );
+  posX = Math.ceil(newStartPos / 13) * 13;
+  console.log(posX);
+} else {
+  posX += 2;
+}</pre>
+
+<p>This is the code that calculates how to update the position in each animation frame.</p>
+
+<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
+
+<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
+
+<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
+
+<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
+
+<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
+
+<p>Let's work through this:</p>
+
+<ol>
+ <li>
+  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
+ </li>
+ <li>
+  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
+
+  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
+const spinnerContainer = document.querySelector('.spinner');
+let rotateCount = 0;
+let startTime = null;
+let rAF;
+const btn = document.querySelector('button');
+const result = document.querySelector('.result');</pre>
+
+  <p>In order, these are:</p>
+
+  <ol>
+   <li>A reference to the spinner, so you can animate it.</li>
+   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
+   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
+   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
+   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
+   <li>A reference to the Start button.</li>
+   <li>A reference to the results paragraph.</li>
+  </ol>
+ </li>
+ <li>
+  <p>Next, below the previous lines of code, add the following function. It takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
+
+  <pre class="brush: js">function random(min,max) {
+  var num = Math.floor(Math.random()*(max-min)) + min;
+  return num;
+}</pre>
+ </li>
+ <li>
+  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
+
+  <pre class="brush: js">function draw(timestamp) {
+  if(!startTime) {
+   startTime = timestamp;
+  }
+
+  rotateCount = (timestamp - startTime) / 3;
+
+  rotateCount %= 360;
+
+  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
+  rAF = requestAnimationFrame(draw);
+}</pre>
+ </li>
+ <li>
+  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which hide the results paragraph and spinner container using <code>display: none;</code>.</p>
+
+  <pre class="brush: js">result.style.display = 'none';
+spinnerContainer.style.display = 'none';</pre>
+ </li>
+ <li>
+  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
+
+  <pre class="brush: js">function reset() {
+  btn.style.display = 'block';
+  result.textContent = '';
+  result.style.display = 'none';
+}</pre>
+ </li>
+ <li>
+  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
+
+  <pre class="brush: js">btn.addEventListener('click', start);
+
+function start() {
+  draw();
+  spinnerContainer.style.display = 'block';
+  btn.style.display = 'none';
+  setTimeout(setEndgame, random(5000,10000));
+}</pre>
+
+  <div class="notecard note">
+  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
+
+  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
+  </div>
+
+  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
+ </li>
+ <li>
+  <p>Add the following function to your code next:</p>
+
+  <pre class="brush: js">function setEndgame() {
+  cancelAnimationFrame(rAF);
+  spinnerContainer.style.display = 'none';
+  result.style.display = 'block';
+  result.textContent = 'PLAYERS GO!!';
+
+  document.addEventListener('keydown', keyHandler);
+
+  function keyHandler(e) {
+    let isOver = false;
+    console.log(e.key);
+
+    if (e.key === "a") {
+      result.textContent = 'Player 1 won!!';
+      isOver = true;
+    } else if (e.key === "l") {
+      result.textContent = 'Player 2 won!!';
+      isOver = true;
+    }
+
+    if (isOver) {
+      document.removeEventListener('keydown', keyHandler);
+      setTimeout(reset, 5000);
+    }
+  };
+}</pre>
+
+  <p>Stepping through this:</p>
+
+  <ol>
+   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
+   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
+   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
+   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
+   <li>Set the variable <code>isOver</code> to false, so we can track whether the correct keys were pressed for player 1 or 2 to win. We don't want the game ending when a wrong key was pressed.</li>
+   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
+   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!) If one of these keys was pressed, set <code>isOver</code> to <code>true</code>.</li>
+   <li>Only if <code>isOver</code> is <code>true</code>, remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
+  </ol>
+ </li>
+</ol>
+
+<p>That's it—you're all done!</p>
+
+<div class="notecard note">
+<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
+</div>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
+
+<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<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/Async_await">Making asynchronous programming easier with async and await</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
+</ul>
+
+<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
+<div class="gtx-trans-icon"></div>
+</div>
diff --git a/files/zh-tw/learn/javascript/asynchronous/async_await/index.html b/files/zh-tw/learn/javascript/asynchronous/async_await/index.html
deleted file mode 100644
index 3c594daf2a..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/async_await/index.html
+++ /dev/null
@@ -1,435 +0,0 @@
----
-title: 利用 async 及 await 讓非同步程式設計變得更容易
-slug: Learn/JavaScript/Asynchronous/Async_await
-tags:
-  - Beginner
-  - CodingScripting
-  - Guide
-  - JavaScript
-  - Learn
-  - Promises
-  - async
-  - asynchronous
-  - await
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">More recent additions to the JavaScript language are <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> and the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> keyword, part of the so-called ECMAScript 2017 JavaScript edition (see <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). These features basically act as syntactic sugar on top of promises, making asynchronous code easier to write and to read afterwards. They make async code look more like old-school synchronous code, so they're well worth learning. This article gives you what you need to know.</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals, an understanding of async code in general and promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand promises and how to use them.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="The_basics_of_asyncawait">The basics of async/await</h2>
-
-<p>There are two parts to using async/await in your code.</p>
-
-<h3 id="The_async_keyword">The async keyword</h3>
-
-<p>First of all we have the <code>async</code> keyword, which you put in front of a function declaration to turn it into an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>. An async function is a function that knows how to expect the possibility of the <code>await</code> keyword being used to invoke asynchronous code.</p>
-
-<p>Try typing the following lines into your browser's JS console:</p>
-
-<pre class="brush: js">function hello() { return "Hello" };
-hello();</pre>
-
-<p>The function returns "Hello" — nothing special, right?</p>
-
-<p>But what if we turn this into an async function? Try the following:</p>
-
-<pre class="brush: js">async function hello() { return "Hello" };
-hello();</pre>
-
-<p>Ah. Invoking the function now returns a promise. This is one of the traits of async functions — their return values are guaranteed to be converted to promises.</p>
-
-<p>You can also create an <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>, like so:</p>
-
-<pre class="brush: js">let hello = async function() { return "Hello" };
-hello();</pre>
-
-<p>And you can use arrow functions:</p>
-
-<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
-
-<p>These all do basically the same thing.</p>
-
-<p>To actually consume the value returned when the promise fulfills, since it is returning a promise, we could use a <code>.then()</code> block:</p>
-
-<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
-
-<p>or even just shorthand such as</p>
-
-<pre class="brush: js">hello().then(console.log)</pre>
-
-<p>Like we saw in the last article.</p>
-
-<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value.</p>
-
-<h3 id="The_await_keyword">The await keyword</h3>
-
-<p>The advantage of an async function only becomes apparent when you combine it with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> keyword. <code>await</code> only works inside async functions within regular JavaScript code, however it can be used on its own with <a href="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules.</a></p>
-
-<p><code>await</code> can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.</p>
-
-<p>You can use <code>await</code> when calling any function that returns a Promise, including web API functions.</p>
-
-<p>Here is a trivial example:</p>
-
-<pre class="brush: js">async function hello() {
-  return greeting = await Promise.resolve("Hello");
-};
-
-hello().then(alert);</pre>
-
-<p>Of course, the above example is not very useful, although it does serve to illustrate the syntax. Let's move on and look at a real example.</p>
-
-<h2 id="Rewriting_promise_code_with_asyncawait">Rewriting promise code with async/await</h2>
-
-<p>Let's look back at a simple fetch example that we saw in the previous article:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; {
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return response.blob();
-})
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-  }
-}
-
-myFetch()
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p>
-
-<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
-
-<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
-
-<h3 id="But_how_does_it_work">But how does it work?</h3>
-
-<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p>
-
-<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, not allowing further code to execute in the meantime until the async function call has returned its result — very useful if subsequent code relies on that result!</p>
-
-<p>Once that's complete, your code continues to execute starting on the next line. For example:</p>
-
-<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
-
-<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p>
-
-<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p>
-
-<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p>
-
-<h3 id="Adding_error_handling">Adding error handling</h3>
-
-<p>And if you want to add error handling, you've got a couple of options.</p>
-
-<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p>
-
-<pre class="brush: js">async function myFetch() {
-  try {
-    let response = await fetch('coffee.jpg');
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    let myBlob = await response.blob();
-    let objectURL = URL.createObjectURL(myBlob);
-    let image = document.createElement('img');
-    image.src = objectURL;
-    document.body.appendChild(image);
-
-  } catch(e) {
-    console.log(e);
-  }
-}
-
-myFetch();</pre>
-
-<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p>
-
-<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  return await response.blob();
-
-}
-
-myFetch().then((blob) =&gt; {
-  let objectURL = URL.createObjectURL(blob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p>
-
-<p>You can find both of these examples on GitHub:</p>
-
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
-
-<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2>
-
-<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p>
-
-<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p>
-
-<pre class="brush: js">async function fetchAndDecode(url, type) {
-  let response = await fetch(url);
-
-  let content;
-
-  if (!response.ok) {
-    throw new Error(`HTTP error! status: ${response.status}`);
-  }
-  if(type === 'blob') {
-    content = await response.blob();
-  } else if(type === 'text') {
-    content = await response.text();
-  }
-
-  return content;
-
-
-}
-
-async function displayContent() {
-  let coffee = fetchAndDecode('coffee.jpg', 'blob');
-  let tea = fetchAndDecode('tea.jpg', 'blob');
-  let description = fetchAndDecode('description.txt', 'text');
-
-  let values = await Promise.all([coffee, tea, description]);
-
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-}
-
-displayContent()
-.catch((e) =&gt;
-  console.log(e)
-);</pre>
-
-<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p>
-
-<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
-
-<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p>
-
-<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors occurring in both functions.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#the_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
-
-<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2>
-
-<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p>
-
-<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows it until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but the awaited code is blocked.</p>
-
-<pre class="brush: js">async function makeResult(items) {
- let newArr = [];
- for(let i=0; i &lt; items.length; i++) {
-  newArr.push('word_'+i);
- }
- return newArr;
-}
-
-async function getResult() {
- let result = await makeResult(items); // Blocked on this line
- useThatResult(result); // Will not be executed before makeResult() is done
-}
-
-</pre>
-
-<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p>
-
-<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p>
-
-<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p>
-
-<pre class="brush: js">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
-    setTimeout(function(){
-      resolve("done");
-    }, interval);
-  });
-};</pre>
-
-<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p>
-
-<pre class="brush: js">async function timeTest() {
-  ...
-}</pre>
-
-<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p>
-
-<pre class="brush: js">let startTime = Date.now();
-timeTest().then(() =&gt; {
-  let finishTime = Date.now();
-  let timeTaken = finishTime - startTime;
-  alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
-
-<p>It is the <code>timeTest()</code> function that differs in each case.</p>
-
-<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js">async function timeTest() {
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-  await timeoutPromise(3000);
-}</pre>
-
-<p>Here we await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p>
-
-<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p>
-
-<pre class="brush: js">async function timeTest() {
-  const timeoutPromise1 = timeoutPromise(3000);
-  const timeoutPromise2 = timeoutPromise(3000);
-  const timeoutPromise3 = timeoutPromise(3000);
-
-  await timeoutPromise1;
-  await timeoutPromise2;
-  await timeoutPromise3;
-}</pre>
-
-<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p>
-
-<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p>
-
-<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p>
-
-<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p>
-
-<h2 id="Asyncawait_class_methods">Async/await class methods</h2>
-
-<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ecmascript_2015_classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</p>
-
-<pre class="brush: js">class Person {
-  constructor(first, last, age, gender, interests) {
-    this.name = {
-      first,
-      last
-    };
-    this.age = age;
-    this.gender = gender;
-    this.interests = interests;
-  }
-
-  async greeting() {
-    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
-  };
-
-  farewell() {
-    console.log(`${this.name.first} has left the building. Bye for now!`);
-  };
-}
-
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
-
-<p>The first class method could now be used something like this:</p>
-
-<pre class="brush: js">han.greeting().then(console.log);</pre>
-
-<h2 id="Browser_support">Browser support</h2>
-
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
-
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html b/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
deleted file mode 100644
index 6099d470fa..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/choosing_the_right_approach/index.html
+++ /dev/null
@@ -1,536 +0,0 @@
----
-title: 選擇正確的方法
-slug: Learn/JavaScript/Asynchronous/Choosing_the_right_approach
-tags:
-  - Beginner
-  - Intervals
-  - JavaScript
-  - Learn
-  - Optimize
-  - Promises
-  - async
-  - asynchronous
-  - await
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在結束本單元前，我們將會從先前所討論過的不同程式技巧和功能，幫助您考量在甚麼情況下應該使用哪一個，並適當的提供一些有關常見的陷阱的建議及提醒。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To be able to make a sound choice of when to use different asynchronous programming techniques.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous_callbacks">Asynchronous callbacks</h2>
-
-<p>Generally found in old-style APIs, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the result. This is the precursor to promises; it's not as efficient or flexible. Use only when necessary.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>No</td>
-   <td>Yes (recursive callbacks)</td>
-   <td>Yes (nested callbacks)</td>
-   <td>No</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Code_example">Code example</h3>
-
-<p>An example that loads a resource via the <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">run it live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">see the source</a>):</p>
-
-<pre class="brush: js">function loadAsset(url, type, callback) {
-  let xhr = new XMLHttpRequest();
-  xhr.open('GET', url);
-  xhr.responseType = type;
-
-  xhr.onload = function() {
-    callback(xhr.response);
-  };
-
-  xhr.send();
-}
-
-function displayImage(blob) {
-  let objectURL = URL.createObjectURL(blob);
-
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
-
-<h3 id="Pitfalls">Pitfalls</h3>
-
-<ul>
- <li>Nested callbacks can be cumbersome and hard to read (i.e. "callback hell").</li>
- <li>Failure callbacks need to be called once for each level of nesting, whereas with promises you can just use a single <code>.catch()</code> block to handle the errors for the entire chain.</li>
- <li>Async callbacks just aren't very graceful.</li>
- <li>Promise callbacks are always called in the strict order they are placed in the event queue; async callbacks aren't.</li>
- <li>Async callbacks lose full control of how the function will be executed when passed to a third-party library.</li>
-</ul>
-
-<h3 id="Browser_compatibility">Browser compatibility</h3>
-
-<p>Really good general support, although the exact support for callbacks in APIs depends on the particular API. Refer to the reference documentation for the API you're using for more specific support info.</p>
-
-<h3 id="Further_information">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing#async_callbacks">Async callbacks</a></li>
-</ul>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> is a method that allows you to run a function after an arbitrary amount of time has passed.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>Yes</td>
-   <td>Yes (recursive timeouts)</td>
-   <td>Yes (nested timeouts)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_2">Code example</h3>
-
-<p>Here the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<h3 id="Pitfalls_2">Pitfalls</h3>
-
-<p>You can use recursive <code>setTimeout()</code> calls to run a function repeatedly in a similar fashion to <code>setInterval()</code>, using code like this:</p>
-
-<pre class="brush: js">let i = 1;
-setTimeout(function run() {
-  console.log(i);
-  i++;
-
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>There is a difference between recursive <code>setTimeout()</code> and <code>setInterval()</code>:</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees at least the specified amount of time (100ms in this example) will elapse between the executions; the code will run and then wait 100 milliseconds before it runs again. The interval will be the same regardless of how long the code takes to run.</li>
- <li>With <code>setInterval()</code>, the interval we choose <em>includes</em> the time taken to execute the code we want to run in. Let's say that the code takes 40 milliseconds to run — the interval then ends up being only 60 milliseconds.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Browser_compatibility_2">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setTimeout")}}</p>
-
-<h3 id="Further_information_2">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#settimeout()">setTimeout()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout() reference</a></li>
-</ul>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> is a method that allows you to run a function repeatedly with a set interval of time between each execution. Not as efficient as <code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code>, but allows you to choose a running rate/frame rate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless they are the same)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_3">Code example</h3>
-
-<p>The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. We then run it once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<h3 id="Pitfalls_3">Pitfalls</h3>
-
-<ul>
- <li>The frame rate isn't optimized for the system the animation is running on, and can be somewhat inefficient. Unless you need to choose a specific (slower) framerate, it is generally better to use <code>requestAnimationFrame()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_3">Browser compatibility</h3>
-
-<p>{{Compat("api.WindowOrWorkerGlobalScope.setInterval")}}</p>
-
-<h3 id="Further_information_3">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></li>
- <li><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval() reference</a></li>
-</ul>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system. You should, if at all possible, use this instead of <code>setInterval()</code>/recursive <code>setTimeout()</code>, unless you need a specific framerate.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>Yes</td>
-   <td>No (unless it is the same one)</td>
-   <td>No</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_4">Code example</h3>
-
-<p>A simple animated spinner; you can find this <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a> also):</p>
-
-<pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-
-function draw(timestamp) {
-    if(!startTime) {
-        startTime = timestamp;
-    }
-
-    rotateCount = (timestamp - startTime) / 3;
-
-    if(rotateCount &gt; 359) {
-        rotateCount %= 360;
-    }
-
-    spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-
-    rAF = requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Pitfalls_4">Pitfalls</h3>
-
-<ul>
- <li>You can't choose a specific framerate with <code>requestAnimationFrame()</code>. If you need to run your animation at a slower framerate, you'll need to use <code>setInterval()</code> or recursive <code>setTimeout()</code>.</li>
-</ul>
-
-<h3 id="Browser_compatibility_4">Browser compatibility</h3>
-
-<p>{{Compat("api.Window.requestAnimationFrame")}}</p>
-
-<h3 id="Further_information_4">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a>, in particular <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals#requestanimationframe()">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame() reference</a></li>
-</ul>
-
-<h2 id="Promises">Promises</h2>
-
-<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> are a JavaScript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its result. Promises are the backbone of modern asynchronous JavaScript.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>See <code>Promise.all()</code>, below</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_5">Code example</h3>
-
-<p>The following code fetches an image from the server and displays it inside an {{htmlelement("img")}} element; <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/simple-fetch-chained.html">see it live also</a>, and see also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/simple-fetch-chained.html">the source code</a>:</p>
-
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; response.blob())
-.then(myBlob =&gt; {
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-})
-.catch(e =&gt; {
-  console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
-
-<h3 id="Pitfalls_5">Pitfalls</h3>
-
-<p>Promise chains can be complex and hard to parse. If you nest a number of promises, you can end up with similar troubles to callback hell. For example:</p>
-
-<pre class="brush: js">remotedb.allDocs({
-  include_docs: true,
-  attachments: true
-}).then(function (result) {
-  let docs = result.rows;
-  docs.forEach(function(element) {
-    localdb.put(element.doc).then(function(response) {
-      alert("Pulled doc with id " + element.doc._id + " and added to local db.");
-    }).catch(function (err) {
-      if (err.name == 'conflict') {
-        localdb.get(element.doc._id).then(function (resp) {
-          localdb.remove(resp._id, resp._rev).then(function (resp) {
-// et cetera...</pre>
-
-<p>It is better to use the chaining power of promises to go with a flatter, easier to parse structure:</p>
-
-<pre class="brush: js">remotedb.allDocs(...).then(function (resultOfAllDocs) {
-  return localdb.put(...);
-}).then(function (resultOfPut) {
-  return localdb.get(...);
-}).then(function (resultOfGet) {
-  return localdb.put(...);
-}).catch(function (err) {
-  console.log(err);
-});</pre>
-
-<p>or even:</p>
-
-<pre class="brush: js">remotedb.allDocs(...)
-.then(resultOfAllDocs =&gt; {
-  return localdb.put(...);
-})
-.then(resultOfPut =&gt; {
-  return localdb.get(...);
-})
-.then(resultOfGet =&gt; {
-  return localdb.put(...);
-})
-.catch(err =&gt; console.log(err));</pre>
-
-<p>That covers a lot of the basics. For a much more complete treatment, see the excellent <a href="https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html">We have a problem with promises</a>, by Nolan Lawson.</p>
-
-<h3 id="Browser_compatibility_5">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise")}}</p>
-
-<h3 id="Further_information_5">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise reference</a></li>
-</ul>
-
-<h2 id="Promise.all">Promise.all()</h2>
-
-<p>A JavaScript feature that allows you to wait for multiple promises to complete before then running a further operation based on the results of all the other promises.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_6">Code example</h3>
-
-<p>The following example fetches several resources from the server, and uses <code>Promise.all()</code> to wait for all of them to be available before then displaying all of them — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/promises/promise-all.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">source code</a>:</p>
-
-<pre class="brush: js">function fetchAndDecode(url, type) {
-  // Returning the top level promise, so the result of the entire chain is returned out of the function
-  return fetch(url).then(response =&gt; {
-    // Depending on what type of file is being fetched, use the relevant function to decode its contents
-    if(type === 'blob') {
-      return response.blob();
-    } else if(type === 'text') {
-      return response.text();
-    }
-  })
-  .catch(e =&gt; {
-    console.log(`There has been a problem with your fetch operation for resource "${url}": ` + e.message);
-  });
-}
-
-// Call the fetchAndDecode() method to fetch the images and the text, and store their promises in variables
-let coffee = fetchAndDecode('coffee.jpg', 'blob');
-let tea = fetchAndDecode('tea.jpg', 'blob');
-let description = fetchAndDecode('description.txt', 'text');
-
-// Use Promise.all() to run code only when all three function calls have resolved
-Promise.all([coffee, tea, description]).then(values =&gt; {
-  console.log(values);
-  // Store each value returned from the promises in separate variables; create object URLs from the blobs
-  let objectURL1 = URL.createObjectURL(values[0]);
-  let objectURL2 = URL.createObjectURL(values[1]);
-  let descText = values[2];
-
-  // Display the images in &lt;img&gt; elements
-  let image1 = document.createElement('img');
-  let image2 = document.createElement('img');
-  image1.src = objectURL1;
-  image2.src = objectURL2;
-  document.body.appendChild(image1);
-  document.body.appendChild(image2);
-
-  // Display the text in a paragraph
-  let para = document.createElement('p');
-  para.textContent = descText;
-  document.body.appendChild(para);
-});</pre>
-
-<h3 id="Pitfalls_6">Pitfalls</h3>
-
-<ul>
- <li>If a <code>Promise.all()</code> rejects, then one or more of the promises you are feeding into it inside its array parameter must be rejecting, or might not be returning promises at all. You need to check each one to see what they returned. </li>
-</ul>
-
-<h3 id="Browser_compatibility_6">Browser compatibility</h3>
-
-<p>{{Compat("javascript.builtins.Promise.all")}}</p>
-
-<h3 id="Further_information_6">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises#running_code_in_response_to_multiple_promises_fulfilling">Running code in response to multiple promises fulfilling</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all() reference</a></li>
-</ul>
-
-<h2 id="Asyncawait">Async/await</h2>
-
-<p>Syntactic sugar built on top of promises that allows you to run asynchronous operations using syntax that's more like writing synchronous callback code.</p>
-
-<table class="standard-table">
- <caption>Useful for...</caption>
- <thead>
-  <tr>
-   <th scope="col">Single delayed operation</th>
-   <th scope="col">Repeating operation</th>
-   <th scope="col">Multiple sequential operations</th>
-   <th scope="col">Multiple simultaneous operations</th>
-  </tr>
-  <tr>
-   <td>No</td>
-   <td>No</td>
-   <td>Yes</td>
-   <td>Yes (in combination with <code>Promise.all()</code>)</td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Code_example_7">Code example</h3>
-
-<p>The following example is a refactor of the simple promise example we saw earlier that fetches and displays an image, written using async/await (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-refactored-fetch.html">see it live</a>, and see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-refactored-fetch.html">source code</a>):</p>
-
-<pre class="brush: js">async function myFetch() {
-  let response = await fetch('coffee.jpg');
-  let myBlob = await response.blob();
-
-  let objectURL = URL.createObjectURL(myBlob);
-  let image = document.createElement('img');
-  image.src = objectURL;
-  document.body.appendChild(image);
-}
-
-myFetch();</pre>
-
-<h3 id="Pitfalls_7">Pitfalls</h3>
-
-<ul>
- <li>You can't use the <code>await</code> operator inside a non-<code>async</code> function, or in the top level context of your code. This can sometimes result in an extra function wrapper needing to be created, which can be slightly frustrating in some circumstances. But it is worth it most of the time.</li>
- <li>Browser support for async/await is not as good as that for promises. If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers.</li>
-</ul>
-
-<h3 id="Browser_compatibility_7">Browser compatibility</h3>
-
-<p>{{Compat("javascript.statements.async_function")}}</p>
-
-<h3 id="Further_information_7">Further information</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">Async function reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">Await operator reference</a></li>
-</ul>
-
-<p>{{PreviousMenu("Learn/JavaScript/Asynchronous/Async_await", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/concepts/index.html b/files/zh-tw/learn/javascript/asynchronous/concepts/index.html
deleted file mode 100644
index 0db2f89275..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/concepts/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: 非同步程式設計通用概念
-slug: Learn/JavaScript/Asynchronous/Concepts
-tags:
-  - JavaScript
-  - Learn
-  - Promises
-  - Threads
-  - asynchronous
-  - blocking
-  - 非同步
-  - 執行緒
----
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p>在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前你應該先具備這些觀念。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">先備知識：</th>
-   <td>基本的電腦概念，理解 JavaScript 的基本原理。</td>
-  </tr>
-  <tr>
-   <th scope="row">學習目標：</th>
-   <td>了解非同步程式設計背後的基本概念，以及其如何在網頁瀏覽器及 JavaScript 作呈現。</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Asynchronous">非同步？</h2>
-
-<p>一般來說，在程式碼的執行順序當下同一時間只會處理一件事。如果某個函式依賴於其他函式的執行結果，那麼它就需要等待其完成並回傳結果才能執行，直到那樣的情況發生，以使用者的角度而言整個程式才是真正的結束。</p>
-
-<p>Mac 的使用者有時候會發現游標變成彩虹色的旋轉圖案（或經常被稱作為「沙灘球」）。這個游標的出現代表作業系統像是正對著你說：「你在執行的程式目前正在等待其他程式的完成而被暫停，因為花了一點時間所以我擔心你會想知道發生了甚麼事。」</p>
-
-<p><img alt="Multi-colored macOS beachball busy spinner" src="beachball.jpg" style="display: block; float: left; margin: 0px 30px 0px 0px;"></p>
-
-<br/>
-
-<p>這種經驗通常令人沮喪而且這也並未善加利用電腦處理器的能力——特別是在擁有多核處理器的世代。比起只能毫無意義的坐著乾等，如果能夠安排其他任務交由其他處理器來執行並讓你知道任務何時完成，這樣就有效率多了，像這樣能讓其他工作在同時間完成，這就是<strong>非同步程式設計</strong>的基礎。這取決於你目前正在使用的程式環境，如同網頁瀏覽器會提供一些 API 能讓你非同步的執行任務。</p>
-
-<br/><br/>
-
-<h2 id="Blocking_code">阻塞程式碼</h2>
-
-<p>非同步的技巧非常實用，特別是在網頁程式設計上。當一個網頁應用程式運行在瀏覽器且執行大量的程式碼的當下並未將控制權交還給瀏覽器時，瀏覽器可能會處於凍結狀態。我們稱之為<strong>阻塞（ blocking ）</strong>，瀏覽器正在持續處理使用者的輸入並執行其他任務就會被阻塞住，直到應用程式將處理器的控制權歸還後才會解除。</p>
-
-<p>我們來看幾個程式範例來說明阻塞是甚麼意思。</p>
-
-<p>在這個例子 <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing/simple-sync.html">simple-sync.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">線上範例</a>），我們在按鈕增加一個點擊事件監聽器，在點擊時會執行一段相當耗時的操作（執行新增日期物件一千萬次並將最後一次的結果顯示在控制台上）然後再加入一則文字段落到 {{Glossary("DOM")}} 上：</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
-  let myDate;
-  for(let i = 0; i &lt; 10000000; i++) {
-    let date = new Date();
-    myDate = date
-  }
-
-  console.log(myDate);
-
-  let pElem = document.createElement('p');
-  pElem.textContent = 'This is a newly-added paragraph.';
-  document.body.appendChild(pElem);
-});</pre>
-
-<p>當執行我們的範例時，打開你的 JavaScript 控制台並點擊按鈕——你會注意到文字並不會馬上就出現在畫面上，而是要等到跑完新增日期物件的迴圈並將結果顯示在控制台上後，新增的文字才會出現。原因在於程式碼依照順序執行，因此某一筆的操作必須等待上一筆執行完成後才會執行。</p>
-
-<div class="notecard note">
-<p><strong>注意</strong>：上述的範例只是用來作為了解原理的基本範例，在現實生活中你不會真的執行一千萬次的新增日期物件。</p>
-</div>
-
-<p>在我們第二個範例， <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">simple-sync-ui-blocking.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-ui-blocking.html">線上範例</a>），我們模擬了一段比較貼近現實的範例，你或許會在現實的頁面上遇到。我們在渲染畫面的期間阻擋和使用者的互動行為。在本範例，我們有兩個按鈕：</p>
-
-<ul>
- <li>當「 Fill canvas 」按鈕被點擊時，我們會填滿一百萬個藍色圓圈到可用的 {{htmlelement("canvas")}} 標籤內。</li>
- <li>當點擊「 Click me for alert 」按鈕後會顯示警告訊息。</li>
-</ul>
-
-<pre class="brush: js">function expensiveOperation() {
-  for(let i = 0; i &lt; 1000000; i++) {
-    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
-    ctx.beginPath();
-    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
-    ctx.fill()
-  }
-}
-
-fillBtn.addEventListener('click', expensiveOperation);
-
-alertBtn.addEventListener('click', () =&gt;
-  alert('You clicked me!')
-);</pre>
-
-<p>當點擊第一個按鈕之後緊接著點擊第二個按鈕，你會發現警告訊息並不會馬上出現，而是要等到圓圈圖案被渲染完成後才會出現警告訊息視窗。第一個操作在完成之前都會阻擋第二個操作的執行。</p>
-
-<div class="notecard note">
-<p><strong>注意</strong>：我們是在偽造一個阻塞且這個例子可能有點醜陋，但這卻是在現實中大多數的開發者試圖避免的常見問題。</p>
-</div>
-
-<p>為什麼會這樣？事實是因為 JavaScript 在執行上是使用 <strong>單一執行緒（ single-threaded ）</strong>。現在，我們需要說明一下<strong>執行緒（ thread ）</strong>的概念。</p>
-
-<h2 id="Threads">執行緒</h2>
-
-<p><strong>執行緒（ thread ）</strong>基本上是可以用來完成程式碼任務的單一行程（ process ）。每一條執行緒在同一時間只會執行一項任務：</p>
-
-<pre>任務 A --&gt; 任務 B --&gt; 任務 C</pre>
-
-<p>每一項任務必須依照順序來執行，下一項任務必須要等到前一項任務完成後才能開始執行。</p>
-
-<p>我們稍早所說，現今許多電腦擁有許多顆核心，所以可以在同一時間做許多事。可以支援多條執行緒的程式語言在同一時間可以利用多顆核心來完成數個任務：</p>
-
-<pre>執行緒１：任務 A --&gt; 任務 B
-執行緒２：任務 C --&gt; 任務 D</pre>
-
-<h3 id="JavaScript_is_single-threaded">JavaScript 是單執行緒的</h3>
-
-<p>JavaScript 在傳統意義上是跑在一條單執行緒。即便你的電腦有多顆核心，也只能在 JavaScript 上面跑一條執行緒來完成任務，這一條執行緒我們稱為<strong>主執行緒（ main thread ）</strong>。我們稍早的第二個例子執行流程就像是底下這樣：</p>
-
-<pre>主執行緒：渲染圓圈圖形到 canvas --&gt; 顯示 alert()</pre>
-
-<p>在經過一段時間的發展後， JavaScript 取得某種工具來處理上述的問題。 <a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 允許傳送一些任務到不同的執行緒上，因此呼叫一個 worker 你可以在同一時間跑不同的任務區塊。透過使用 worker 就可以和主執行緒分工合作，因此不會阻塞和使用者的互動。</p>
-
-<pre>      主執行緒：任務 A --&gt; 任務 C
-背景工作執行緒：耗時的任務 B</pre>
-
-<p>依照這個想法，我們來改寫之前的例子 <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> （<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">線上範例</a>），一樣打開你的 JavaScript 控制台吧。我們改寫利用 worker 產生額外的執行緒來執行一千萬次的呼叫新增日期物件的範例。現在你點擊一下按鈕，你會發現新增的文字段落馬上就會顯示在畫面上，而稍後日期才會顯示在 JavaScript 控制台。第一項操作不再阻塞第二項的執行了。</p>
-
-<h2 id="Asynchronous_code">非同步的程式碼</h2>
-
-<p><a href="/zh-TW/docs/Web/API/Web_Workers_API">Web worker</a> 相當有用，但還是有它的限制在。最主要的限制是在它不能直接存取 {{Glossary("DOM")}} ——你不能透過 worker 去直接更新你的 UI 。我們不能透過 worker 去渲染一百萬個藍色圈圈，它基本上只能做一些數字運算的工作。</p>
-
-<p>第二個問題是即使我們的程式跑在 worker 上不會阻塞主執行緒的執行，但基本上我們還是處於同步的。當一個函式的執行依賴於多個函式的執行結果就會發生問題。看看底下的執行緒圖表：</p>
-
-<pre>主執行緒：任務 A --&gt; 任務 B</pre>
-
-<p>在這個例子，任務 A 正在做一些像是從遠端伺服器抓取圖片的工作，任務 B 會將抓取下來的圖片套用一些濾鏡的特效。如果你執行任務 A 後立即執行任務 B ，你會收到錯誤訊息，因為任務 B 當下並沒有圖片可以套用。</p>
-
-<pre>      主執行緒：任務 A --&gt; 任務 B --&gt; ｜任務 D ｜
-背景工作執行緒：任務 C -------------&gt; ｜      ｜</pre>
-
-<p>在這個例子，我們說任務 D 必須依賴任務 B 及任務 C 的執行結果。如果我們保證在執行任務 D 的當下都已經取得 B 和 C 的執行結果，這也許沒甚麼問題，但這不太可能。任務 D 執行的當下若有任一個依賴結果尚未完成，勢必會發生錯誤。</p>
-
-<p>為了修正此問題，瀏覽器允許我們非同步的運行某些操作。如 <a href="/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a> 功能允許你在一項正在執行的操作做設定（例如：從遠端伺服器抓取圖片），然後等待其執行結果回傳之後再進行之後的操作：</p>
-
-<pre>主執行緒：任務 A                   任務 B
-Promise ：   ｜_____非同步操作_____｜</pre>
-
-<p>因為操作發生在其他地方，因此主執行緒並不會在執行非同步的工作時被阻塞住。</p>
-
-<p>我們會在下一篇文章來看看我們如何寫出非同步的程式碼，真令人興奮，對吧？讓我們繼續看下去吧！</p>
-
-<h2 id="Conclusion">結論</h2>
-
-<p>現代軟體越來越多圍繞在使用非同步的程式技巧來設計，讓程式碼可以在同一時間做越多事。當你使用目前越新越強大的 API 時，你會發現更多情況之下他們處理工作唯一的方法就是使用非同步的處理方式。過去我們很難寫出可以執行非同步的程式碼，但現在簡單多了。在剩餘的單元中，我們將會進一步的探討為何非同步如此重要，以及如何設計出避免上述某些問題的程式碼。</p>
-
-<div>{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}</div>
-
-<h2 id="In_this_module">在本單元</h2>
-
-<ul>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">協同的非同步 JavaScript ： Timeout 和 interval</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises">優雅的使用 Promise 來處理非同步操作</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await">利用 async 及 await 讓非同步程式設計變得更容易</a></li>
- <li><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">選擇正確的方法</a></li>
-</ul>
diff --git a/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html
deleted file mode 100644
index 9e076bcad4..0000000000
--- a/files/zh-tw/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ /dev/null
@@ -1,646 +0,0 @@
----
-title: '協同的非同步 JavaScript: Timeouts 和 intervals'
-slug: Learn/JavaScript/Asynchronous/Timeouts_and_intervals
-tags:
-  - Animation
-  - Beginner
-  - CodingScripting
-  - Guide
-  - Intervals
-  - JavaScript
-  - Loops
-  - asynchronous
-  - requestAnimationFrame
-  - setInterval
-  - setTimeout
-  - timeouts
----
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</div>
-
-<p class="summary">在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式 (如每秒發生的次數) 讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。</p>
-
-<table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a reasonable understanding of JavaScript fundamentals.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand asynchronous loops and intervals and what they are useful for.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Introduction">Introduction</h2>
-
-<p>For a long time, the web platform has offered JavaScript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.</p>
-
-<p>These functions are:</p>
-
-<dl>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code></dt>
- <dd>Execute a specified block of code once after a specified time has elapsed.</dd>
- <dt><code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code></dt>
- <dd>Execute a specified block of code repeatedly with a fixed time delay between each call.</dd>
- <dt><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code></dt>
- <dd>The modern version of <code>setInterval()</code>. Executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in.</dd>
-</dl>
-
-<p>The asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed).</p>
-
-<p>It's important to know that you can (and often will) run other code before a <code>setTimeout()</code> call executes, or between iterations of <code>setInterval()</code>. Depending on how processor-intensive these operations are, they can delay your async code even further, as any async code will execute only <em>after</em> the main thread is available. (In other words, when the stack is empty.)  You will learn more on this matter as you progress through this article.</p>
-
-<p>In any case, these functions are used for running constant animations and other background processing on a web site or application. In the following sections we will show you how they can be used.</p>
-
-<h2 id="setTimeout">setTimeout()</h2>
-
-<p>As we said before, <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> executes a particular block of code once after a specified time has elapsed. It takes the following parameters:</p>
-
-<ul>
- <li>A function to run, or a reference to a function defined elsewhere.</li>
- <li>A number representing the time interval in milliseconds (1000 milliseconds equals 1 second) to wait before executing the code. If you specify a value of <code>0</code> (or omit the value), the function will run as soon as possible. (See the note below on why it runs "as soon as possible" and not "immediately".) More on why you might want to do this later.</li>
- <li>Zero or more values that represent any parameters you want to pass to the function when it is run.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>NOTE:</strong> The specified amount of time (or the delay) is <strong>not</strong> the <em>guaranteed time</em> to execution, but rather the <em>minimum time</em> to execution. The callbacks you pass to these functions cannot run until the stack on the main thread is empty.</p>
-
-<p>As a consequence, code like <code>setTimeout(fn, 0)</code> will execute as soon as the stack is empty, <strong>not</strong> immediately. If you execute code like <code>setTimeout(fn, 0)</code> but then immediately after run a loop that counts from 1 to 10 billion, your callback will be executed after a few seconds.</p>
-</div>
-
-<p>In the following example, the browser will wait two seconds before executing the anonymous function, then will display the alert message (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see it running live</a>, and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">see the source code</a>):</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(function() {
-  alert('Hello, Mr. Universe!');
-}, 2000)</pre>
-
-<p>The functions you specify don't have to be anonymous. You can give your function a name, and even define it somewhere else and pass a function reference to the <code>setTimeout()</code>. The following two versions of the code snippet are equivalent to the first one:</p>
-
-<pre class="brush: js">// With a named function
-let myGreeting = setTimeout(function sayHi() {
-  alert('Hello, Mr. Universe!');
-}, 2000)
-
-// With a function defined separately
-function sayHi() {
-  alert('Hello Mr. Universe!');
-}
-
-let myGreeting = setTimeout(sayHi, 2000);</pre>
-
-<p>That can be useful if you have a function that needs to be called both from a timeout and in response to an event, for example. But it can also just help keep your code tidy, especially if the timeout callback is more than a few lines of code.</p>
-
-<p><code>setTimeout()</code> returns an identifier value that can be used to refer to the timeout later, such as when you want to stop it. See {{anch("Clearing timeouts")}} (below) to learn how to do that.</p>
-
-<h3 id="Passing_parameters_to_a_setTimeout_function">Passing parameters to a setTimeout() function</h3>
-
-<p>Any parameters that you want to pass to the function being run inside the <code>setTimeout()</code> must be passed to it as additional parameters at the end of the list.</p>
-
-<p>For example, you could refactor the previous function so that it will say hi to whatever person's name is passed to it:</p>
-
-<pre class="brush: js">function sayHi(who) {
-  alert(`Hello ${who}!`);
-}</pre>
-
-<p>Now, you can pass the name of the person into the <code>setTimeout()</code> call as a third parameter:</p>
-
-<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
-
-<h3 id="Clearing_timeouts">Clearing timeouts</h3>
-
-<p>Finally, if a timeout has been created, you can cancel it before the specified time has elapsed by calling <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, passing it the identifier of the <code>setTimeout()</code> call as a parameter. So to cancel our above timeout, you'd do this:</p>
-
-<pre class="brush: js">clearTimeout(myGreeting);</pre>
-
-<div class="notecard note">
-<p><strong>Note</strong>: See <code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> for a slightly more involved demo that allows you to set the name of the person to say hello to in a form, and cancel the greeting using a separate button (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">see the source code also</a>).</p>
-</div>
-
-<h2 id="setInterval">setInterval()</h2>
-
-<p><code>setTimeout()</code> works perfectly when you need to run code once after a set period of time. But what happens when you need to run the code over and over again—for example, in the case of an animation?</p>
-
-<p>This is where <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval">setInterval()</a></code> comes in. This works in a very similar way to <code>setTimeout()</code>, except that the function you pass as the first parameter is executed repeatedly at no less than the number of milliseconds given by the second parameter apart, rather than once. You can also pass any parameters required by the function being executed as subsequent parameters of the <code>setInterval()</code> call.</p>
-
-<p>Let's look at an example. The following function creates a new <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code> object, extracts a time string out of it using <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code>, and then displays it in the UI. It then runs the function once per second using <code>setInterval()</code>, creating the effect of a digital clock that updates once per second (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see this live</a>, and also <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">see the source</a>):</p>
-
-<pre class="brush: js">function displayTime() {
-   let date = new Date();
-   let time = date.toLocaleTimeString();
-   document.getElementById('demo').textContent = time;
-}
-
-const createClock = setInterval(displayTime, 1000);</pre>
-
-<p>Just like <code>setTimeout()</code>, <code>setInterval()</code> returns an identifying value you can use later when you need to clear the interval.</p>
-
-<h3 id="Clearing_intervals">Clearing intervals</h3>
-
-<p><code>setInterval()</code> keeps running a task forever, unless you do something about it. You'll probably want a way to stop such tasks, otherwise you may end up getting errors when the browser can't complete any further versions of the task, or if the animation being handled by the task has finished. You can do this the same way you stop timeouts — by passing the identifier returned by the <code>setInterval()</code> call to the <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval">clearInterval()</a></code> function:</p>
-
-<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
-
-clearInterval(myInterval);</pre>
-
-<h4 id="Active_learning_Creating_your_own_stopwatch!">Active learning: Creating your own stopwatch!</h4>
-
-<p>With this all said, we've got a challenge for you. Take a copy of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">setInterval-clock.html</a></code> example, and modify it to create your own simple stopwatch.</p>
-
-<p>You need to display a time as before, but in this example, you need:</p>
-
-<ul>
- <li>A "Start" button to start the stopwatch running.</li>
- <li>A "Stop" button to pause/stop it.</li>
- <li>A "Reset" button to reset the time back to <code>0</code>.</li>
- <li>The time display to show the number of seconds elapsed, rather than the actual time.</li>
-</ul>
-
-<p>Here's a few hints for you:</p>
-
-<ul>
- <li>You can structure and style the button markup however you like; just make sure you use semantic HTML, with hooks to allow you to grab the button references using JavaScript.</li>
- <li>You probably want to create a variable that starts at <code>0</code>, then increments by one every second using a constant loop.</li>
- <li>It is easier to create this example without using a <code>Date()</code> object, like we've done in our version, but less accurate — you can't guarantee that the callback will fire after exactly <code>1000</code>ms. A more accurate way would be to run <code>startTime = Date.now()</code> to get a timestamp of exactly when the user clicked the start button, and then do <code>Date.now() - startTime</code> to get the number of milliseconds after the start button was clicked.</li>
- <li>You also want to calculate the number of hours, minutes, and seconds as separate values, and then show them together in a string after each loop iteration. From the second counter, you can work out each of these.</li>
- <li>How would you calculate them? Have a think about it:
-  <ul>
-   <li>The number of seconds in an hour is <code>3600</code>.</li>
-   <li>The number of minutes will be the amount of seconds left over when all of the hours have been removed, divided by <code>60</code>.</li>
-   <li>The number of seconds will be the amount of seconds left over when all of the minutes have been removed.</li>
-  </ul>
- </li>
- <li>You'll want to include a leading zero on your display values if the amount is less than <code>10</code>, so it looks more like a traditional clock/watch.</li>
- <li>To pause the stopwatch, you'll want to clear the interval. To reset it, you'll want to set the counter back to <code>0</code>, clear the interval, and then immediately update the display.</li>
- <li>You probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. Otherwise multiple presses of the start button will apply multiple <code>setInterval()</code>s to the clock, leading to wrong behavior.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you get stuck, you can <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">find our version here</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-stopwatch.html">source code</a> also).</p>
-</div>
-
-<h2 id="Things_to_keep_in_mind_about_setTimeout_and_setInterval">Things to keep in mind about setTimeout() and setInterval()</h2>
-
-<p>There are a few things to keep in mind when working with <code>setTimeout()</code> and <code>setInterval()</code>. Let's review these now.</p>
-
-<h3 id="Recursive_timeouts">Recursive timeouts</h3>
-
-<p>There is another way to use <code>setTimeout()</code>: you can call it recursively to run the same code repeatedly, instead of using <code>setInterval()</code>.</p>
-
-<p>The below example uses a recursive <code>setTimeout()</code> to run the passed function every <code>100</code> milliseconds:</p>
-
-<pre class="brush: js">let i = 1;
-
-setTimeout(function run() {
-  console.log(i);
-  i++;
-  setTimeout(run, 100);
-}, 100);</pre>
-
-<p>Compare the above example to the following one — this uses <code>setInterval()</code> to accomplish the same effect:</p>
-
-<pre class="brush: js">let i = 1;
-
-setInterval(function run() {
-  console.log(i);
-  i++
-}, 100);</pre>
-
-<h4 id="How_do_recursive_setTimeout_and_setInterval_differ">How do recursive <code>setTimeout()</code> and <code>setInterval()</code> differ?</h4>
-
-<p>The difference between the two versions of the above code is a subtle one.</p>
-
-<ul>
- <li>Recursive <code>setTimeout()</code> guarantees the given delay between the code execution completion and the next call. The delay for the next execution will start counting only after the code has finished running, therefore <em>excluding</em> the time taken to run the code. In this example, the <code>100</code> milliseconds will be the delay between the <code>run</code> code finishing, and the next <code>run</code> call.</li>
- <li>The example using <code>setInterval()</code> does things somewhat differently. The interval you chose <em>includes</em> the time taken to execute the code you want to run in. Let's say that the code takes <code>40</code> milliseconds to run — the interval then ends up being only <code>60</code> milliseconds.</li>
- <li>When using <code>setTimeout()</code> recursively, each iteration can calculate a different delay before running the next iteration. In other words, the value of the second parameter can specify a different time in milliseconds to wait before running the code again.</li>
-</ul>
-
-<p>When your code has the potential to take longer to run than the time interval you’ve assigned, it’s better to use recursive <code>setTimeout()</code> — this will keep the time interval constant between executions regardless of how long the code takes to execute, and you won't get errors.</p>
-
-<h3 id="Immediate_timeouts">Immediate timeouts</h3>
-
-<p>Using <code>0</code> as the value for <code>setTimeout()</code> schedules the execution of the specified callback function as soon as possible but only after the main code thread has been run.</p>
-
-<p>For instance, the code below (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">see it live</a>) outputs an alert containing <code>"Hello"</code>, then an alert containing <code>"World"</code> as soon as you click OK on the first alert.</p>
-
-<pre class="brush: js">setTimeout(function() {
-  alert('World');
-}, 0);
-
-alert('Hello');</pre>
-
-<p>This can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running — put it on the async event loop, so it will run straight afterwards.</p>
-
-<h3 id="Clearing_with_clearTimeout_or_clearInterval">Clearing with clearTimeout() or clearInterval()</h3>
-
-<p><code>clearTimeout()</code> and <code>clearInterval()</code> both use the same list of entries to clear from. Interestingly enough, this means that you can use either method to clear a <code>setTimeout()</code> or <code>setInterval()</code>.</p>
-
-<p>For consistency, you should use <code>clearTimeout()</code> to clear <code>setTimeout()</code> entries and <code>clearInterval()</code> to clear <code>setInterval()</code> entries. This will help to avoid confusion.</p>
-
-<h2 id="requestAnimationFrame">requestAnimationFrame()</h2>
-
-<p><code><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></code> is a specialized looping function created for running animations efficiently in the browser. It is basically the modern version of <code>setInterval()</code> — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a suitable frame rate regardless of the environment it is being run in.</p>
-
-<p>It was created in response to perceived problems with <code>setInterval()</code>, which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc.</p>
-
-<p>(<a href="http://creativejs.com/resources/requestanimationframe/index.html">Read more about this on CreativeJS</a>.)</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: You can find examples of using <code>requestAnimationFrame()</code> elsewhere in the course — see for example <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a>.</p>
-</div>
-
-<p>The method takes as an argument a callback to be invoked before the repaint. This is the general pattern you'll see it used in:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>The idea is to define a function in which your animation is updated (e.g. your sprites are moved, score is updated, data is refreshed, or whatever). Then, you call it to start the process off. At the end of the function block you call <code>requestAnimationFrame()</code> with the function reference passed as the parameter, and this instructs the browser to call the function again on the next display repaint. This is then run continuously, as the code is calling <code>requestAnimationFrame()</code> recursively.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you want to perform some kind of simple constant DOM animation, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> are probably faster. They are calculated directly by the browser's internal code, rather than JavaScript.</p>
-
-<p>If, however, you are doing something more complex and involving objects that are not directly accessible inside the DOM (such as <a href="/en-US/docs/Web/API/Canvas_API">2D Canvas API</a> or <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> objects), <code>requestAnimationFrame()</code> is the better option in most cases.</p>
-</div>
-
-<h3 id="How_fast_does_your_animation_run">How fast does your animation run?</h3>
-
-<p>The smoothness of your animation is directly dependent on your animation's frame rate and it is measured in frames per second (fps). The higher this number is, the smoother your animation will look, to a point.</p>
-
-<p>Since most screens have a refresh rate of 60Hz, the fastest frame rate you can aim for is 60 frames per second (FPS) when working with web browsers. However, more frames means more processing, which can often cause stuttering and skipping — also known as <em>dropping frames</em>, or <em>jank</em>.</p>
-
-<p>If you have a monitor with a 60Hz refresh rate and you want to achieve 60 FPS you have about 16.7 milliseconds (<code>1000 / 60</code>) to execute your animation code to render each frame. This is a reminder that you'll need to be mindful of the amount of code that you try to run during each pass through the animation loop.</p>
-
-<p><code>requestAnimationFrame()</code> always tries to get as close to this magic 60 FPS value as possible. Sometimes, it isn't possible — if you have a really complex animation and you are running it on a slow computer, your frame rate will be less. In all cases, <code>requestAnimationFrame()</code> will always do the best it can with what it has available.</p>
-
-<h3 id="How_does_requestAnimationFrame_differ_from_setInterval_and_setTimeout">How does requestAnimationFrame() differ from setInterval() and setTimeout()?</h3>
-
-<p>Let's talk a little bit more about how the <code>requestAnimationFrame()</code> method differs from the other methods used earlier. Looking at our code from above:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<p>Let's now see how to do the same thing using <code>setInterval()</code>:</p>
-
-<pre class="brush: js">function draw() {
-   // Drawing code goes here
-}
-
-setInterval(draw, 17);</pre>
-
-<p>As we covered earlier, you don't specify a time interval for <code>requestAnimationFrame()</code>. It just runs it as quickly and smoothly as possible in the current conditions. The browser also doesn't waste time running it if the animation is offscreen for some reason, etc.</p>
-
-<p><code>setInterval()</code>, on the other hand <em>requires</em> an interval to be specified. We arrived at our final value of 17 via the formula <em>1000 milliseconds / 60Hz</em>, and then rounded it up. Rounding up is a good idea; if you rounded down, the browser might try to run the animation faster than 60 FPS, and it wouldn't make any difference to the animation's smoothness, anyway. As we said before, 60Hz is the standard refresh rate.</p>
-
-<h3 id="Including_a_timestamp">Including a timestamp</h3>
-
-<p>The actual callback passed to the <code>requestAnimationFrame()</code> function can be given a parameter, too: a <em>timestamp</em> value, that represents the time since the <code>requestAnimationFrame()</code> started running.</p>
-
-<p>This is useful as it allows you to run things at specific times and at a constant pace, regardless of how fast or slow your device might be. The general pattern you'd use looks something like this:</p>
-
-<pre class="brush: js">let startTime = null;
-
-function draw(timestamp) {
-    if (!startTime) {
-      startTime = timestamp;
-    }
-
-   currentTime = timestamp - startTime;
-
-   // Do something based on current time
-
-   requestAnimationFrame(draw);
-}
-
-draw();</pre>
-
-<h3 id="Browser_support">Browser support</h3>
-
-<p><code>requestAnimationFrame()</code> is supported in more recent browsers than <code>setInterval()</code>/<code>setTimeout()</code>.  Interestingly, it is available in Internet Explorer 10 and above.</p>
-
-<p>So, unless you need to support older versions of IE, there is little reason to not use <code>requestAnimationFrame()</code>.</p>
-
-<h3 id="A_simple_example">A simple example</h3>
-
-<p>Enough with the theory! Let's build your own personal <code>requestAnimationFrame()</code> example. You're going to create a simple "spinner animation"—the kind you might see displayed in an app when it is busy connecting to the server, etc.</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: In a real world example, you should probably use CSS animations to run this kind of simple animation. However, this kind of example is very useful to demonstrate <code>requestAnimationFrame()</code> usage, and you'd be more likely to use this kind of technique when doing something more complex such as updating the display of a game on each frame.</p>
-</div>
-
-<ol>
- <li>
-  <p>Grab a basic HTML template (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">such as this one</a>).</p>
- </li>
- <li>
-  <p>Put an empty {{htmlelement("div")}} element inside the {{htmlelement("body")}}, then add a ↻ character inside it. This circular arrow character will act as our spinner for this example.</p>
- </li>
- <li>
-  <p>Apply the following CSS to the HTML template (in whatever way you prefer). This sets a red background on the page, sets the <code>&lt;body&gt;</code> height to <code>100%</code> of the {{htmlelement("html")}} height, and centers the <code>&lt;div&gt;</code> inside the <code>&lt;body&gt;</code>, horizontally and vertically.</p>
-
-  <pre class="brush: css">html {
-  background-color: white;
-  height: 100%;
-}
-
-body {
-  height: inherit;
-  background-color: red;
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-div {
-  display: inline-block;
-  font-size: 10rem;
-}</pre>
- </li>
- <li>
-  <p>Insert a {{htmlelement("script")}} element just above the closing <code>&lt;/body&gt;</code> tag.</p>
- </li>
- <li>
-  <p>Insert the following JavaScript inside your <code>&lt;script&gt;</code> element. Here, you're storing a reference to the <code>&lt;div&gt;</code> inside a constant, setting a <code>rotateCount</code> variable to <code>0</code>, setting an uninitialized variable that will later be used to contain a reference to the <code>requestAnimationFrame()</code> call, and setting a <code>startTime</code> variable to <code>null</code>, which will later be used to store the start time of the <code>requestAnimationFrame()</code>.</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('div');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-</pre>
- </li>
- <li>
-  <p>Below the previous code, insert a <code>draw()</code> function that will be used to contain our animation code, which includes the <code>timestamp</code> parameter:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-
-}</pre>
- </li>
- <li>
-  <p>Inside <code>draw()</code>, add the following lines. They will define the start time if it is not defined already (this will only happen on the first loop iteration), and set the <code>rotateCount</code> to a value to rotate the spinner by (the current timestamp, take the starting timestamp, divided by three so it doesn't go too fast):</p>
-
-  <pre class="brush: js">  if (!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-</pre>
- </li>
- <li>
-  <p>Below the previous line inside <code>draw()</code>, add the following block — this ensures that the value of <code>rotateCount</code> is between <code>0</code> and <code>359</code>, by setting the value to its modulo of <code>360</code> (i.e. the remainder left over when the value is divided by <code>360</code>) — so the circle animation can continue uninterrupted, at a sensible, low value. Note that this isn't strictly necessary, but it is easier to work with values of <code>0</code>–<code>359</code> degrees than values like <code>"128000 degrees"</code>.</p>
-
-  <pre class="brush: js">  rotateCount %= 360; </pre>
- </li>
- <li>Next, below the previous block add the following line to actually rotate the spinner:
-  <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
- </li>
- <li>
-  <p>At the very bottom inside the <code>draw()</code> function, insert the following line. This is the key to the whole operation — you are setting the variable defined earlier to an active <code>requestAnimation()</code> call, which takes the <code>draw()</code> function as its parameter. This starts the animation off, constantly running the <code>draw()</code> function at a rate as near 60 FPS as possible.</p>
-
-  <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
- </li>
- <li>
-  <p>Below the <code>draw()</code> function definition, add a call to the <code>draw()</code> function to start the animation.</p>
-
-  <pre class="brush: js">draw();</pre>
- </li>
-</ol>
-
-<div class="notecard note">
-<p><strong>Note</strong>: You can find the finished <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">example live on GitHub</a>. (You can see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-raf-spinner.html">source code</a>, also.)</p>
-</div>
-
-<h3 id="Clearing_a_requestAnimationFrame_call">Clearing a requestAnimationFrame() call</h3>
-
-<p>Clearing a <code>requestAnimationFrame()</code> call can be done by calling the corresponding <code>cancelAnimationFrame()</code> method. (Note that the function name starts with "cancel", not "clear" as with the "set..." methods.) </p>
-
-<p>Just pass it the value returned by the <code>requestAnimationFrame()</code> call to cancel, which you stored in the variable <code>rAF</code>:</p>
-
-<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
-
-<h3 id="Active_learning_Starting_and_stopping_our_spinner">Active learning: Starting and stopping our spinner</h3>
-
-<p>In this exercise, we'd like you to test out the <code>cancelAnimationFrame()</code> method by taking our previous example and updating it, adding an event listener to start and stop the spinner when the mouse is clicked anywhere on the page.</p>
-
-<p>Some hints:</p>
-
-<ul>
- <li>A <code>click</code> event handler can be added to most elements, including the document <code>&lt;body&gt;</code>. It makes more sense to put it on the <code>&lt;body&gt;</code> element if you want to maximize the clickable area — the event bubbles up to its child elements.</li>
- <li>You'll want to add a tracking variable to check whether the spinner is spinning or not, clearing the animation frame if it is, and calling it again if it isn't.</li>
-</ul>
-
-<div class="notecard note">
-<p><strong>Note</strong>: Try this yourself first; if you get really stuck, check out of our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">live example</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/start-and-stop-spinner.html">source code</a>.</p>
-</div>
-
-<h3 id="Throttling_a_requestAnimationFrame_animation">Throttling a requestAnimationFrame() animation</h3>
-
-<p>One limitation of <code>requestAnimationFrame()</code> is that you can't choose your frame rate. This isn't a problem most of the time, as generally you want your animation to run as smoothly as possible. But what about when you want to create an old school, 8-bit-style animation?</p>
-
-<p>This was a problem, for example, in the Monkey Island-inspired walking animation from our <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing Graphics</a> article:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}</p>
-
-<p>In this example, you have to animate both the position of the character on the screen, and the sprite being shown. There are only 6 frames in the sprite's animation. If you showed a different sprite frame for every frame displayed on the screen by <code>requestAnimationFrame()</code>, Guybrush would move his limbs too fast and the animation would look ridiculous. This example therefore throttles the rate at which the sprite cycles its frames using the following code:</p>
-
-<pre class="brush: js">if (posX % 13 === 0) {
-  if (sprite === 5) {
-    sprite = 0;
-  } else {
-    sprite++;
-  }
-}</pre>
-
-<p>So the code only cycles the sprite once every 13 animation frames.</p>
-
-<p>...Actually, it's about every 6.5 frames, as we update <code>posX</code> (character's position on the screen) by two each frame:</p>
-
-<pre class="brush: js">if (posX &gt; width/2) {
-  newStartPos = -( (width/2) + 102 );
-  posX = Math.ceil(newStartPos / 13) * 13;
-  console.log(posX);
-} else {
-  posX += 2;
-}</pre>
-
-<p>This is the code that calculates how to update the position in each animation frame.</p>
-
-<p>The method you use to throttle your animation will depend on your particular code. For instance, in the earlier spinner example, you could make it appear to move slower by only increasing <code>rotateCount</code> by one on each frame, instead of two.</p>
-
-<h2 id="Active_learning_a_reaction_game">Active learning: a reaction game</h2>
-
-<p>For the final section of this article, you'll create a 2-player reaction game. The game will have two players, one of whom controls the game using the <kbd>A</kbd> key, and the other with the <kbd>L</kbd> key.</p>
-
-<p>When the <em>Start</em> button is pressed, a spinner like the one we saw earlier is displayed for a random amount of time between 5 and 10 seconds. After that time, a message will appear saying <code>"PLAYERS GO!!"</code> — once this happens, the first player to press their control button will win the game.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html", '100%', 500)}}</p>
-
-<p>Let's work through this:</p>
-
-<ol>
- <li>
-  <p>First of all, download the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game-starter.html">starter file for the app</a>. This contains the finished HTML structure and CSS styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and results paragraph displayed on top of one another. You just have to write the JavaScript code.</p>
- </li>
- <li>
-  <p>Inside the empty {{htmlelement("script")}} element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code:</p>
-
-  <pre class="brush: js">const spinner = document.querySelector('.spinner p');
-const spinnerContainer = document.querySelector('.spinner');
-let rotateCount = 0;
-let startTime = null;
-let rAF;
-const btn = document.querySelector('button');
-const result = document.querySelector('.result');</pre>
-
-  <p>In order, these are:</p>
-
-  <ol>
-   <li>A reference to the spinner, so you can animate it.</li>
-   <li>A reference to the {{htmlelement("div")}} element that contains the spinner, used for showing and hiding it.</li>
-   <li>A rotate count. This determines how much you want to show the spinner rotated on each frame of the animation.</li>
-   <li>A null start time. This will be populated with a start time when the spinner starts spinning.</li>
-   <li>An uninitialized variable to later store the {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} call that animates the spinner.</li>
-   <li>A reference to the Start button.</li>
-   <li>A reference to the results paragraph.</li>
-  </ol>
- </li>
- <li>
-  <p>Next, below the previous lines of code, add the following function. It takes two numbers and returns a random number between the two. You'll need this to generate a random timeout interval later on.</p>
-
-  <pre class="brush: js">function random(min,max) {
-  var num = Math.floor(Math.random()*(max-min)) + min;
-  return num;
-}</pre>
- </li>
- <li>
-  <p>Next add  the <code>draw()</code> function, which animates the spinner. This is very similar to the version from the simple spinner example, earlier:</p>
-
-  <pre class="brush: js">function draw(timestamp) {
-  if(!startTime) {
-   startTime = timestamp;
-  }
-
-  rotateCount = (timestamp - startTime) / 3;
-
-  rotateCount %= 360;
-  
-  spinner.style.transform = 'rotate(' + rotateCount + 'deg)';
-  rAF = requestAnimationFrame(draw);
-}</pre>
- </li>
- <li>
-  <p>Now it is time to set up the initial state of the app when the page first loads. Add the following two lines, which hide the results paragraph and spinner container using <code>display: none;</code>.</p>
-
-  <pre class="brush: js">result.style.display = 'none';
-spinnerContainer.style.display = 'none';</pre>
- </li>
- <li>
-  <p>Next, define a <code>reset()</code> function, which sets the app back to the original state required to start the game again after it has been played. Add the following at the bottom of your code:</p>
-
-  <pre class="brush: js">function reset() {
-  btn.style.display = 'block';
-  result.textContent = '';
-  result.style.display = 'none';
-}</pre>
- </li>
- <li>
-  <p>Okay, enough preparation!  It's time to make the game playable! Add the following block to your code. The <code>start()</code> function calls <code>draw()</code> to start the spinner spinning and display it in the UI, hides the <em>Start</em> button so you can't mess up the game by starting it multiple times concurrently, and runs a <code>setTimeout()</code> call that runs a <code>setEndgame()</code> function after a random interval between 5 and 10 seconds has passed. The following block also adds an event listener to your button to run the <code>start()</code> function when it is clicked.</p>
-
-  <pre class="brush: js">btn.addEventListener('click', start);
-
-function start() {
-  draw();
-  spinnerContainer.style.display = 'block';
-  btn.style.display = 'none';
-  setTimeout(setEndgame, random(5000,10000));
-}</pre>
-
-  <div class="notecard note">
-  <p><strong>Note</strong>: You'll see this example is calling <code>setTimeout()</code> without storing the return value. (So, not <code>let myTimeout = setTimeout(functionName, interval)</code>.) </p>
-
-  <p>This works just fine, as long as you don't need to clear your interval/timeout at any point. If you do, you'll need to save the returned identifier!</p>
-  </div>
-
-  <p>The net result of the previous code is that when the <em>Start</em> button is pressed, the spinner is shown and the players are made to wait a random amount of time before they are asked to press their button. This last part is handled by the <code>setEndgame()</code> function, which you'll define next.</p>
- </li>
- <li>
-  <p>Add the following function to your code next:</p>
-
-  <pre class="brush: js">function setEndgame() {
-  cancelAnimationFrame(rAF);
-  spinnerContainer.style.display = 'none';
-  result.style.display = 'block';
-  result.textContent = 'PLAYERS GO!!';
-
-  document.addEventListener('keydown', keyHandler);
-
-  function keyHandler(e) {
-    let isOver = false;
-    console.log(e.key);
-
-    if (e.key === "a") {
-      result.textContent = 'Player 1 won!!';
-      isOver = true;
-    } else if (e.key === "l") {
-      result.textContent = 'Player 2 won!!';
-      isOver = true;
-    }
-
-    if (isOver) {
-      document.removeEventListener('keydown', keyHandler);
-      setTimeout(reset, 5000);
-    }
-  };
-}</pre>
-
-  <p>Stepping through this:</p>
-
-  <ol>
-   <li>First, cancel the spinner animation with {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (it is always good to clean up unneeded processes), and hide the spinner container.</li>
-   <li>Next, display the results paragraph and set its text content to "PLAYERS GO!!" to signal to the players that they can now press their button to win.</li>
-   <li>Attach a <code><a href="/en-US/docs/Web/API/Document/keydown_event">keydown</a></code> event listener to the document. When any button is pressed down, the <code>keyHandler()</code> function is run.</li>
-   <li>Inside <code>keyHandler()</code>, the code includes the event object as a parameter (represented by <code>e</code>) — its {{domxref("KeyboardEvent.key", "key")}} property contains the key that was just pressed, and you can use this to respond to specific key presses with specific actions.</li>
-   <li>Set the variable <code>isOver</code> to false, so we can track whether the correct keys were pressed for player 1 or 2 to win. We don't want the game ending when a wrong key was pressed.</li>
-   <li>Log <code>e.key</code> to the console, which is a useful way of finding out the <code>key</code> value of different keys you are pressing.</li>
-   <li>When <code>e.key</code> is "a", display a message to say that Player 1 won, and when <code>e.key</code> is "l", display a message to say Player 2 won. (<strong>Note:</strong> This will only work with lowercase a and l — if an uppercase A or L is submitted (the key plus <kbd>Shift</kbd>), it is counted as a different key!) If one of these keys was pressed, set <code>isOver</code> to <code>true</code>.</li>
-   <li>Only if <code>isOver</code> is <code>true</code>, remove the <code>keydown</code> event listener using {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} so that once the winning press has happened, no more keyboard input is possible to mess up the final game result. You also use <code>setTimeout()</code> to call <code>reset()</code> after 5 seconds — as explained earlier, this function resets the game back to its original state so that a new game can be started.</li>
-  </ol>
- </li>
-</ol>
-
-<p>That's it—you're all done!</p>
-
-<div class="notecard note">
-<p><strong>Note</strong>: If you get stuck, check out <a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/reaction-game.html">our version of the reaction game</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/reaction-game.html">source code</a> also).</p>
-</div>
-
-<h2 id="Conclusion">Conclusion</h2>
-
-<p>So that's it — all the essentials of async loops and intervals covered in one article. You'll find these methods useful in a lot of situations, but take care not to overuse them! Because they still run on the main thread, heavy and intensive callbacks (especially those that manipulate the DOM) can really slow down a page if you're not careful.</p>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<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/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
-
-<div id="gtx-trans" style="position: absolute; left: 70px; top: 13746px;">
-<div class="gtx-trans-icon"></div>
-</div>
-- 
cgit v1.2.3-54-g00ecf


From 640955445c8389c55b2868aa8423292d2077d532 Mon Sep 17 00:00:00 2001
From: Malaaaa <37627837+Malaaaa@users.noreply.github.com>
Date: Tue, 8 Mar 2022 03:11:23 -0500
Subject: deleting "index.html" in some links (#4432)

* fix some links by deleting index.html

* fix web description error

the description text is different with the image shows
---
 .../getting_started_with_the_web/how_the_web_works/index.html    | 4 ++--
 .../introduction_to_html/the_head_metadata_in_html/index.html    | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
index aa5a97b3e7..fb4631e8bc 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
+++ b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.html
@@ -89,12 +89,12 @@ translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
 
 <h2 id="解析组成文件的顺序">解析组成文件的顺序</h2>
 
-<p>当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 "link" 和 "script" 元素，这些元素分别指向了外部的 <a href="../../css/index.html">CSS</a> 样式表文件和 <a href="../../javascript/index.html">JavaScript</a> 脚本文件。了解这些文件被<a href="../../../web/performance/how_browsers_work/index.html">浏览器解析</a>的顺序是很重要的：</p>
+<p>当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 "link" 和 "script" 元素，这些元素分别指向了外部的 <a href="../../css">CSS</a> 样式表文件和 <a href="../../javascript">JavaScript</a> 脚本文件。了解这些文件被<a href="../../../web/performance/how_browsers_work">浏览器解析</a>的顺序是很重要的：</p>
 
 <ul>
     <li>浏览器首先解析 HTML 文件，并从中识别出所有的 "link" 和 "script" 元素，获取它们指向的外部文件的链接。</li>
     <li>继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。</li>
-    <li>接着浏览器会给解析后的 HTML 文件生成一个 <a href="../../../web/api/document_object_model/index.html">DOM</a> 树（在内存中），会给解析后的 CSS 文件生成一个 <a href="../../../glossary/cssom/index.html">CSSOM</a> 树（在内存中），并且会<a href="../../../web/performance/how_browsers_work/index.html">编译和执行</a>解析后的 JavaScript 脚本文件。</li>
+    <li>接着浏览器会给解析后的 HTML 文件生成一个 <a href="../../../web/api/document_object_model">DOM</a> 树（在内存中），会给解析后的 CSS 文件生成一个 <a href="../../../glossary/cssom">CSSOM</a> 树（在内存中），并且会<a href="../../../web/performance/how_browsers_work">编译和执行</a>解析后的 JavaScript 脚本文件。</li>
     <li>伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。</li>
 </ul>
 
diff --git a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
index a5c51b3ff8..f6a176d75b 100644
--- a/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
@@ -135,10 +135,11 @@ started with developing web sites and applications."&gt;</pre>
 <ol>
  <li>访问 <a href="https://developer.mozilla.org/zh-CN/">MDN Web Docs</a>。</li>
  <li>查看网页源代码（<em>通过鼠标右键点击网页在弹出的菜单中选择[查看网页源代码]</em>）</li>
- <li>找到description的meta标签。就和如下展示的这样：
-  <pre class="brush: html notranslate">&lt;meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."&gt;</pre>
+ <li>找到description的meta标签。就和如下展示的这样：+
+  <pre class="brush: html notranslate">&lt;meta name="description" content="The MDN Web Docs site
+    provides information about Open Web technologies
+    including HTML, CSS, and APIs for both Web sites and
+    progressive web apps."&gt;</pre>
  </li>
  <li>现在，在你喜欢的搜索引擎里搜索“MDN Web Docs” （下图展示的是在谷歌搜索里的情况） 。你会看到description <code>&lt;meta&gt;</code> and <code>&lt;title&gt;</code> 元素如何在搜索结果里显示— 很值得这样做哦！</li>
 </ol>
-- 
cgit v1.2.3-54-g00ecf


From 522c9f0c7ae5b6655156f4d566c17e2dc0820840 Mon Sep 17 00:00:00 2001
From: LeoKu <czc12580520@gmail.com>
Date: Sat, 5 Mar 2022 17:17:47 +0800
Subject: fix typo

---
 .../controlling_ratios_of_flex_items_along_the_main_ax/index.html     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html
index 82370bee3e..641efc718f 100644
--- a/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html
+++ b/files/zh-cn/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html
@@ -172,9 +172,9 @@ translation_of: >-
 
 <h3 id="Giving_items_different_flex-shrink_factors">Giving items different <code>flex-shrink</code> factors</h3>
 
-<p>在 <code>flex-grow</code>值相同的情形下, 你可以给flex子元素 设置不同的 <code>flex-shrink</code> 值. 假如你想让一个flex子元素 比它的兄弟元素收缩的更快或更慢， 或者不在收缩， 这回改变它的默认行为.</p>
+<p>在 <code>flex-grow</code>值相同的情形下, 你可以给flex子元素 设置不同的 <code>flex-shrink</code> 值. 假如你想让一个flex子元素 比它的兄弟元素收缩的更快或更慢， 或者不再收缩， 这会改变它的默认行为.</p>
 
-<p>在下面的示例中第一个flex子元素设置 <code>flex-shrink</code> 的值为1, 第二个为 <code>0</code> (因此它将不会收缩), 第三个为 <code>4</code>. 第三个flex子元素比第一个收缩的更快. 任意设置不懂的值 — 你可以给 <code>flex-grow</code> 使用小数或者大一点的数. 选择对于你来说任意合理的数.</p>
+<p>在下面的示例中第一个flex子元素设置 <code>flex-shrink</code> 的值为1, 第二个为 <code>0</code> (因此它将不会收缩), 第三个为 <code>4</code>. 第三个flex子元素比第一个收缩的更快. 任意设置不同的值 — 你可以给 <code>flex-grow</code> 使用小数或者大一点的数. 选择对于你来说任意合理的数.</p>
 
 <p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
 
-- 
cgit v1.2.3-54-g00ecf


From 1d5ed016a73e4cbb6f5ddb27a5ff04161be33c67 Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Tue, 8 Mar 2022 09:19:10 +0100
Subject: CSS cursor fixes for zh and ko (#3934)

* Fix zh CSS cursor img srcs, specs and compat

* Image fixes for ko CSS cursor
---
 files/ko/web/css/cursor/index.html    | 105 +++++++++++++--------------------
 files/zh-cn/web/css/cursor/index.html |  99 +++++++++++++------------------
 files/zh-tw/web/css/cursor/index.html | 107 +++++++++++++---------------------
 3 files changed, 123 insertions(+), 188 deletions(-)

diff --git a/files/ko/web/css/cursor/index.html b/files/ko/web/css/cursor/index.html
index 8f21c218c2..d589439fc6 100644
--- a/files/ko/web/css/cursor/index.html
+++ b/files/ko/web/css/cursor/index.html
@@ -7,6 +7,7 @@ tags:
   - Reference
   - Web
 translation_of: Web/CSS/cursor
+browser-compat: css.properties.cursor
 ---
 <div>{{CSSRef}}</div>
 
@@ -59,7 +60,7 @@ cursor: unset;
    <tr>
     <th scope="col">카테고리</th>
     <th scope="col">CSS 값</th>
-    <th scope="col">예제</th>
+    <th scope="col" style="width: 7.5em;">예제</th>
     <th scope="col">설명</th>
    </tr>
   </thead>
@@ -72,7 +73,7 @@ cursor: unset;
    </tr>
    <tr style="cursor: default;">
     <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="default.gif" src="default.gif"></td>
     <td>플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.</td>
    </tr>
    <tr style="cursor: none;">
@@ -83,165 +84,165 @@ cursor: unset;
    <tr style="cursor: context-menu;">
     <th rowspan="5" scope="row" style="cursor: auto;">링크와 상태</th>
     <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td><img alt="context-menu.png" src="context-menu.png"></td>
     <td>콘텍스트 메뉴 사용 가능.</td>
    </tr>
    <tr style="cursor: help;">
     <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="help.gif" src="help.gif"></td>
     <td>도움말 사용 가능.</td>
    </tr>
    <tr style="cursor: pointer;">
     <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="pointer.gif" src="pointer.gif"></td>
     <td>링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.</td>
    </tr>
    <tr style="cursor: progress;">
     <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="progress.gif" src="progress.gif"></td>
     <td>프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (<code>wait</code>과 반대)</td>
    </tr>
    <tr style="cursor: wait;">
     <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="wait.gif" src="wait.gif"></td>
     <td>프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (<code>progress</code>와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.</td>
    </tr>
    <tr style="cursor: cell;">
     <th rowspan="4" scope="row" style="cursor: auto;">선택</th>
     <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="cell.gif" src="cell.gif"></td>
     <td>표의 칸이나 여러 칸을 선택할 수 있음.</td>
    </tr>
    <tr style="cursor: crosshair;">
     <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="crosshair.gif" src="crosshair.gif"></td>
     <td>십자 커서. 종종 비트맵 선택에 사용합니다.</td>
    </tr>
    <tr style="cursor: text;">
     <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="text.gif" class="default" src="text.gif"></td>
     <td>글씨 선택 가능. 보통 I빔 모양입니다.</td>
    </tr>
    <tr style="cursor: vertical-text;">
     <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="vertical-text.gif" src="vertical-text.gif"></td>
     <td>세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.</td>
    </tr>
    <tr style="cursor: alias;">
     <th rowspan="7" scope="row" style="cursor: auto;">드래그 앤 드롭</th>
     <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="alias.gif" src="alias.gif"></td>
     <td>별칭이나 바로가기를 만드는 중.</td>
    </tr>
    <tr style="cursor: copy;">
     <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="copy.gif" class="default" src="copy.gif"></td>
     <td>복사하는 중.</td>
    </tr>
    <tr style="cursor: move;">
     <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="move.gif" src="move.gif"></td>
     <td>움직이는 중.</td>
    </tr>
    <tr style="cursor: no-drop;">
     <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left"></td>
     <td>현재 위치에 놓을 수 없음.<br>
      {{bug("275173")}}: Windows와 Mac OS X에서 <code>no-drop</code>은 <code>not-allowed</code>와 같습니다.</td>
    </tr>
    <tr style="cursor: not-allowed;">
     <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="not-allowed.gif" src="not-allowed.gif"></td>
     <td>요청한 행동을 수행할 수 없음.</td>
    </tr>
-   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+   <tr id="grab" style="cursor: grab;">
     <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td><img alt="grab.gif" class="default" src="grab.gif"></td>
     <td>잡을 수 있음. (잡아서 이동)</td>
    </tr>
-   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+   <tr style="cursor: grabbing;">
     <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
     <td>잡고 있음. (잡아서 이동)</td>
    </tr>
    <tr style="cursor: all-scroll;">
     <th rowspan="15" scope="row" style="cursor: auto;">크기 조절과 스크롤</th>
     <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="all-scroll.gif" src="all-scroll.gif"></td>
     <td>모든 방향으로 이동 가능. (패닝)<br>
      {{bug("275174")}}: Windows에서 <code>all-scroll</code>은 <code>move</code>와 같습니다.</td>
    </tr>
    <tr style="cursor: col-resize;">
     <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="col-resize.gif" src="col-resize.gif"></td>
     <td>항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.</td>
    </tr>
    <tr style="cursor: row-resize;">
     <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="row-resize.gif" src="row-resize.gif"></td>
     <td>항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.</td>
    </tr>
    <tr style="cursor: n-resize;">
     <td><code>n-resize</code></td>
-    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top cursor" src="n-resize.gif" style="border-style: solid; border-width: 0px"></td>
     <td rowspan="8" style="cursor: auto;">움직일 수 있는 모서리. 예를 들어, <code>se-resize</code> 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 <code>n-resize</code>와 <code>s-resize</code>는 <code>ns-resize</code>와 같습니다.</td>
    </tr>
    <tr style="cursor: e-resize;">
     <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td>
    </tr>
    <tr style="cursor: s-resize;">
     <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td>
    </tr>
    <tr style="cursor: w-resize;">
     <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td>
    </tr>
    <tr style="cursor: ne-resize;">
     <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td>
    </tr>
    <tr style="cursor: nw-resize;">
     <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td>
    </tr>
    <tr style="cursor: se-resize;">
     <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td>
    </tr>
    <tr style="cursor: sw-resize;">
     <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td>
    </tr>
    <tr style="cursor: ew-resize;">
     <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
     <td rowspan="4" style="cursor: auto;">양방향 크기 조절 커서.</td>
    </tr>
    <tr style="cursor: ns-resize;">
     <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td>
    </tr>
    <tr style="cursor: nesw-resize;">
     <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+    <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td>
    </tr>
    <tr style="cursor: nwse-resize;">
     <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
    </tr>
-   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+   <tr style="cursor: zoom-in;">
     <th rowspan="2" scope="row" style="cursor: auto;">확대와 축소</th>
     <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
     <td rowspan="2" style="cursor: auto;">
      <p>확대/축소할 수 있음.</p>
     </td>
    </tr>
-   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+   <tr style="cursor: zoom-out;">
     <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+    <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
    </tr>
   </tbody>
  </table>
@@ -276,35 +277,13 @@ cursor: unset;
 
 <h2 id="명세">명세</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
 <p>{{cssinfo}}</p>
 
 <h2 id="브라우저_호환성">브라우저 호환성</h2>
 
-
-
-<div>{{Compat("css.properties.cursor")}}</div>
+<div>{{Compat}}</div>
 
 <h2 id="같이_보기">같이 보기</h2>
 
diff --git a/files/zh-cn/web/css/cursor/index.html b/files/zh-cn/web/css/cursor/index.html
index 7d9e5fa50f..413624e5f5 100644
--- a/files/zh-cn/web/css/cursor/index.html
+++ b/files/zh-cn/web/css/cursor/index.html
@@ -9,6 +9,7 @@ tags:
   - NeedsTranslation
   - TopicStub
 translation_of: Web/CSS/cursor
+browser-compat: css.properties.cursor
 ---
 <div>{{CSSRef}}</div>
 
@@ -16,8 +17,6 @@ translation_of: Web/CSS/cursor
 
 <div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
 
-
-
 <h2 id="Syntax" name="Syntax">语法</h2>
 
 <pre class="brush: css no-line-numbers notranslate">/* 关键字值 */
@@ -63,7 +62,7 @@ cursor: unset;
    <tr>
     <th>类型</th>
     <th>CSS值</th>
-    <th></th>
+    <th style="width: 7.5em;">例子</th>
     <th>描述</th>
    </tr>
    <tr style="cursor: auto;">
@@ -77,7 +76,7 @@ cursor: unset;
    </tr>
    <tr style="cursor: default;">
     <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="default.gif" src="default.gif"></td>
     <td>默认指针，通常是箭头。</td>
    </tr>
    <tr style="cursor: none;">
@@ -88,80 +87,80 @@ cursor: unset;
    <tr style="cursor: context-menu;">
     <td rowspan="5" style="cursor: auto;">链接及状态</td>
     <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td><img alt="context-menu.png" src="context-menu.png"></td>
     <td>指针下有可用内容目录。</td>
    </tr>
    <tr style="cursor: help;">
     <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="help.gif" src="help.gif"></td>
     <td>指示帮助</td>
    </tr>
    <tr style="cursor: pointer;">
     <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="pointer.gif" src="pointer.gif"></td>
     <td>悬浮于连接上时，通常为手</td>
    </tr>
    <tr style="cursor: progress;">
     <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="progress.gif" src="progress.gif"></td>
     <td>程序后台繁忙，用户仍可交互 (与<code>wait相反</code>).</td>
    </tr>
    <tr style="cursor: wait;">
     <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="wait.gif" src="wait.gif"></td>
     <td>程序繁忙，用户不可交互 (与<code>progress相反</code>).图标一般为沙漏或者表。</td>
    </tr>
    <tr style="cursor: cell;">
     <td rowspan="4" style="cursor: auto;">选择</td>
     <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="cell.gif" src="cell.gif"></td>
     <td>指示单元格可被选中</td>
    </tr>
    <tr style="cursor: crosshair;">
     <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="crosshair.gif" src="crosshair.gif"></td>
     <td>交叉指针，通常指示位图中的框选</td>
    </tr>
    <tr style="cursor: text;">
     <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="text.gif" class="default" src="text.gif"></td>
     <td>指示文字可被选中</td>
    </tr>
    <tr style="cursor: vertical-text;">
     <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="vertical-text.gif" src="vertical-text.gif"></td>
     <td>指示垂直文字可被选中</td>
    </tr>
    <tr style="cursor: alias;">
     <td rowspan="7" style="cursor: auto;">拖拽</td>
     <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="alias.gif" src="alias.gif"></td>
     <td>复制或快捷方式将要被创建</td>
    </tr>
    <tr style="cursor: copy;">
     <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="copy.gif" class="default" src="copy.gif"></td>
     <td>指示可复制</td>
    </tr>
    <tr style="cursor: move;">
     <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="move.gif" src="move.gif"></td>
     <td>被悬浮的物体可被移动</td>
    </tr>
    <tr style="cursor: no-drop;">
     <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif" style="float: left"></td>
     <td>当前位置不能扔下<br>
      {{ bug("275173") }}Windows或Mac OS X中 "no-drop 与not-allowed相同".</td>
    </tr>
    <tr style="cursor: not-allowed;">
     <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="not-allowed.gif" src="not-allowed.gif"></td>
     <td>不能执行</td>
    </tr>
    <tr id="grab" style="cursor: grab;">
     <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td><img alt="grab.gif" class="default" src="grab.gif"></td>
     <td>
      <p>可抓取</p>
 
@@ -170,89 +169,89 @@ cursor: unset;
    </tr>
    <tr style="cursor: grabbing;">
     <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
     <td>抓取中</td>
    </tr>
    <tr style="cursor: all-scroll;">
     <td rowspan="15" style="cursor: auto;">重设大小及滚动</td>
     <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="all-scroll.gif" src="all-scroll.gif"></td>
     <td>元素可任意方向滚动 （平移）.<br>
      {{ bug("275174") }}Windows中, "<em>all-scroll</em> 与 <em>move相同</em>".</td>
    </tr>
    <tr style="cursor: col-resize;">
     <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="col-resize.gif" src="col-resize.gif"></td>
     <td>元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头</td>
    </tr>
    <tr style="cursor: row-resize;">
     <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="row-resize.gif" src="row-resize.gif"></td>
     <td>
      <p>元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头</p>
     </td>
    </tr>
    <tr style="cursor: n-resize;">
     <td><code>n-resize</code></td>
-    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top cursor" src="n-resize.gif" style="border-style: solid; border-width: 0px"></td>
     <td rowspan="8" style="cursor: auto;">某条边将被移动。例如元素盒的东南角被移动时<code>使用se-resize</code></td>
    </tr>
    <tr style="cursor: e-resize;">
     <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td>
    </tr>
    <tr style="cursor: s-resize;">
     <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td>
    </tr>
    <tr style="cursor: w-resize;">
     <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td>
    </tr>
    <tr style="cursor: ne-resize;">
     <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td>
    </tr>
    <tr style="cursor: nw-resize;">
     <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td>
    </tr>
    <tr style="cursor: se-resize;">
     <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td>
    </tr>
    <tr style="cursor: sw-resize;">
     <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td>
    </tr>
    <tr style="cursor: ew-resize;">
     <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
     <td rowspan="4" style="cursor: auto;">指示双向重新设置大小</td>
    </tr>
    <tr style="cursor: ns-resize;">
     <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td>
    </tr>
    <tr style="cursor: nesw-resize;">
     <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+    <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td>
    </tr>
    <tr style="cursor: nwse-resize;">
     <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
    </tr>
    <tr style="cursor: zoom-in;">
     <td rowspan="2">缩放</td>
     <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
     <td rowspan="2" style="cursor: auto;">
      <p>指示可被放大或缩小</p>
     </td>
    </tr>
    <tr style="cursor: zoom-out;">
     <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+    <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
    </tr>
   </tbody>
  </table>
@@ -263,7 +262,7 @@ cursor: unset;
 
 <dl>
  <dt>
- {{csssyntax("cursor")}}
+ {{csssyntax}}
  </dt>
 </dl>
 
@@ -290,31 +289,11 @@ cursor: unset;
 
 <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('CSS3 UI', '#cursor', 'cursor') }}</td>
-   <td>{{ Spec2('CSS3 UI') }}</td>
-   <td>增加了一些关键字，<code>url()的</code>位置语法</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>首次定义</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
 <h2 id="浏览器兼容性">浏览器兼容性</h2>
 
-<p>{{Compat("css.properties.cursor")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="See_also" name="See_also">参见</h2>
 
diff --git a/files/zh-tw/web/css/cursor/index.html b/files/zh-tw/web/css/cursor/index.html
index 5ded20bef8..2955f1add3 100644
--- a/files/zh-tw/web/css/cursor/index.html
+++ b/files/zh-tw/web/css/cursor/index.html
@@ -2,6 +2,7 @@
 title: cursor
 slug: Web/CSS/cursor
 translation_of: Web/CSS/cursor
+browser-compat: css.properties.cursor
 ---
 <div>{{CSSRef}}</div>
 
@@ -9,8 +10,6 @@ translation_of: Web/CSS/cursor
 
 <div>{{EmbedInteractiveExample("pages/css/cursor.html")}}</div>
 
-
-
 <h2 id="語法">語法</h2>
 
 <pre class="brush: css no-line-numbers">/* 關鍵字值 */
@@ -54,7 +53,7 @@ cursor: unset;
    <tr>
     <th scope="col">分類</th>
     <th scope="col">CSS 值</th>
-    <th scope="col">範例</th>
+    <th scope="col" style="width: 7.5em;">範例</th>
     <th scope="col">備註說明</th>
    </tr>
   </thead>
@@ -67,7 +66,7 @@ cursor: unset;
    </tr>
    <tr style="cursor: default;">
     <td><code>default</code></td>
-    <td><img alt="default.gif" src="/@api/deki/files/3438/=default.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="default.gif" src="default.gif"></td>
     <td>The platform-dependent default cursor. Typically an arrow.</td>
    </tr>
    <tr style="cursor: none;">
@@ -78,166 +77,166 @@ cursor: unset;
    <tr style="cursor: context-menu;">
     <th rowspan="5" scope="row" style="cursor: auto;">連結與狀態</th>
     <td><code>context-menu</code></td>
-    <td><img alt="context-menu.png" src="/@api/deki/files/3461/=context-menu.png" style="height: 26px; width: 26px;"></td>
+    <td><img alt="context-menu.png" src="context-menu.png"></td>
     <td>A context menu is available.</td>
    </tr>
    <tr style="cursor: help;">
     <td><code>help</code></td>
-    <td><img alt="help.gif" src="/@api/deki/files/3442/=help.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="help.gif" src="help.gif"></td>
     <td>Help information is available.</td>
    </tr>
    <tr style="cursor: pointer;">
     <td><code>pointer</code></td>
-    <td><img alt="pointer.gif" src="/@api/deki/files/3449/=pointer.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="pointer.gif" src="pointer.gif"></td>
     <td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</td>
    </tr>
    <tr style="cursor: progress;">
     <td><code>progress</code></td>
-    <td><img alt="progress.gif" src="/@api/deki/files/3450/=progress.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="progress.gif" src="progress.gif"></td>
     <td>The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</td>
    </tr>
    <tr style="cursor: wait;">
     <td><code>wait</code></td>
-    <td><img alt="wait.gif" src="/@api/deki/files/3457/=wait.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="wait.gif" src="wait.gif"></td>
     <td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
    </tr>
    <tr style="cursor: cell;">
     <th rowspan="4" scope="row" style="cursor: auto;">選取</th>
     <td><code>cell</code></td>
-    <td><img alt="cell.gif" src="/@api/deki/files/3434/=cell.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="cell.gif" src="cell.gif"></td>
     <td>The table cell or set of cells can be selected.</td>
    </tr>
    <tr style="cursor: crosshair;">
     <td><code>crosshair</code></td>
-    <td><img alt="crosshair.gif" src="/@api/deki/files/3437/=crosshair.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="crosshair.gif" src="crosshair.gif"></td>
     <td>Cross cursor, often used to indicate selection in a bitmap.</td>
    </tr>
    <tr style="cursor: text;">
     <td><code>text</code></td>
-    <td><img alt="text.gif" class="default" src="/files/3809/text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="text.gif" class="default" src="text.gif"></td>
     <td>The text can be selected. Typically the shape of an I-beam.</td>
    </tr>
    <tr style="cursor: vertical-text;">
     <td><code>vertical-text</code></td>
-    <td><img alt="vertical-text.gif" src="/@api/deki/files/3456/=vertical-text.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="vertical-text.gif" src="vertical-text.gif"></td>
     <td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
    </tr>
    <tr style="cursor: alias;">
     <th rowspan="7" scope="row" style="cursor: auto;">拖曳</th>
     <td><code>alias</code></td>
-    <td><img alt="alias.gif" src="/@api/deki/files/3432/=alias.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="alias.gif" src="alias.gif"></td>
     <td>An alias or shortcut is to be created.</td>
    </tr>
    <tr style="cursor: copy;">
     <td><code>copy</code></td>
-    <td><img alt="copy.gif" class="default" src="/@api/deki/files/3436/=copy.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="copy.gif" class="default" src="copy.gif"></td>
     <td>Something is to be copied.</td>
    </tr>
    <tr style="cursor: move;">
     <td><code>move</code></td>
-    <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="move.gif" src="move.gif"></td>
     <td>Something is to be moved.</td>
    </tr>
    <tr style="cursor: no-drop;">
     <td><code>no-drop</code></td>
-    <td><img alt="no-drop.gif" class="lwrap" src="/@api/deki/files/3445/=no-drop.gif" style="float: left; height: 26px; width: 33px;"></td>
+    <td><img alt="no-drop.gif" class="lwrap" src="no-drop.gif"></td>
     <td>An item may not be dropped at the current location.<br>
      {{bug("275173")}}: On Windows and Mac OS X, <code>no-drop</code> is the same as <code>not-allowed</code>.</td>
    </tr>
    <tr style="cursor: not-allowed;">
     <td><code>not-allowed</code></td>
-    <td><img alt="not-allowed.gif" src="/@api/deki/files/3446/=not-allowed.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="not-allowed.gif" src="not-allowed.gif"></td>
     <td>The requested action will not be carried out.</td>
    </tr>
-   <tr id="grab" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
+   <tr id="grab" style="cursor: grab;">
     <td><code>grab</code></td>
-    <td><img alt="grab.gif" class="default" src="/@api/deki/files/3440/=grab.gif"></td>
+    <td><img alt="grab.gif" class="default" src="grab.gif"></td>
     <td>Something can be grabbed (dragged to be moved).</td>
    </tr>
-   <tr style="cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;">
+   <tr style="cursor: grabbing;">
     <td><code>grabbing</code></td>
-    <td><img alt="grabbing.gif" class="default" src="/@api/deki/files/3441/=grabbing.gif"></td>
+    <td><img alt="grabbing.gif" class="default" src="grabbing.gif"></td>
     <td>Something is being grabbed (dragged to be moved).</td>
    </tr>
    <tr style="cursor: all-scroll;">
     <th rowspan="15" scope="row" style="cursor: auto;">改變尺寸與捲軸尺</th>
     <td><code>all-scroll</code></td>
-    <td><img alt="all-scroll.gif" src="/@api/deki/files/3433/=all-scroll.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="all-scroll.gif" src="all-scroll.gif"></td>
     <td>Something can be scrolled in any direction (panned).<br>
      {{bug("275174")}}: On Windows, <code>all-scroll</code> is the same as <code>move</code>.</td>
    </tr>
    <tr style="cursor: col-resize;">
     <td><code>col-resize</code></td>
-    <td><img alt="col-resize.gif" src="/@api/deki/files/3435/=col-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="col-resize.gif" src="col-resize.gif"></td>
     <td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</td>
    </tr>
    <tr style="cursor: row-resize;">
     <td><code>row-resize</code></td>
-    <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="row-resize.gif" src="row-resize.gif"></td>
     <td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
    </tr>
    <tr style="cursor: n-resize;">
     <td><code>n-resize</code></td>
-    <td><img alt="Example of a resize towards the top cursor" src="/files/4083/n-resize.gif" style="border-style: solid; border-width: 0px; height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top cursor" src="n-resize.gif"></td>
     <td rowspan="8" style="cursor: auto;">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br>
      In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>
    </tr>
    <tr style="cursor: e-resize;">
     <td><code>e-resize</code></td>
-    <td><img alt="Example of a resize towards the right cursor" src="/files/4085/e-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the right cursor" src="e-resize.gif"></td>
    </tr>
    <tr style="cursor: s-resize;">
     <td><code>s-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom cursor " src="/files/4087/s-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom cursor " src="s-resize.gif"></td>
    </tr>
    <tr style="cursor: w-resize;">
     <td><code>w-resize</code></td>
-    <td><img alt="Example of a resize towards the left cursor" src="/files/4089/w-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the left cursor" src="w-resize.gif"></td>
    </tr>
    <tr style="cursor: ne-resize;">
     <td><code>ne-resize</code></td>
-    <td><img alt="Example of a resize towards the top-right corner cursor" src="/files/4091/ne-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-right corner cursor" src="ne-resize.gif"></td>
    </tr>
    <tr style="cursor: nw-resize;">
     <td><code>nw-resize</code></td>
-    <td><img alt="Example of a resize towards the top-left corner cursor" src="/files/4093/nw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the top-left corner cursor" src="nw-resize.gif"></td>
    </tr>
    <tr style="cursor: se-resize;">
     <td><code>se-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="/files/4097/se-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-right corner cursor" src="se-resize.gif"></td>
    </tr>
    <tr style="cursor: sw-resize;">
     <td><code>sw-resize</code></td>
-    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="/files/4095/sw-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="Example of a resize towards the bottom-left corner cursor" src="sw-resize.gif"></td>
    </tr>
    <tr style="cursor: ew-resize;">
     <td><code>ew-resize</code></td>
-    <td><img alt="3-resize.gif" class="default" src="/files/3806/3-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="3-resize.gif" class="default" src="3-resize.gif"></td>
     <td rowspan="4" style="cursor: auto;">Bidirectional resize cursor.</td>
    </tr>
    <tr style="cursor: ns-resize;">
     <td><code>ns-resize</code></td>
-    <td><img alt="6-resize.gif" class="default" src="/files/3808/6-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="6-resize.gif" class="default" src="6-resize.gif"></td>
    </tr>
    <tr style="cursor: nesw-resize;">
     <td><code>nesw-resize</code></td>
-    <td><img alt="1-resize.gif" class="default" src="/files/3805/1-resize.gif"></td>
+    <td><img alt="1-resize.gif" class="default" src="1-resize.gif"></td>
    </tr>
    <tr style="cursor: nwse-resize;">
     <td><code>nwse-resize</code></td>
-    <td><img alt="4-resize.gif" class="default" src="/files/3807/4-resize.gif" style="height: 26px; width: 26px;"></td>
+    <td><img alt="4-resize.gif" class="default" src="4-resize.gif"></td>
    </tr>
-   <tr style="cursor: -webkit-zoom-in; cursor: zoom-in;">
+   <tr style="cursor: zoom-in;">
     <th rowspan="2" scope="row" style="cursor: auto;">縮放</th>
     <td><code>zoom-in</code></td>
-    <td><img alt="zoom-in.gif" class="default" src="/@api/deki/files/3459/=zoom-in.gif"></td>
+    <td><img alt="zoom-in.gif" class="default" src="zoom-in.gif"></td>
     <td rowspan="2" style="cursor: auto;">
      <p>Something can be zoomed (magnified) in or out.</p>
     </td>
    </tr>
-   <tr style="cursor: -webkit-zoom-out; cursor: zoom-out;">
+   <tr style="cursor: zoom-out;">
     <td><code>zoom-out</code></td>
-    <td><img alt="zoom-out.gif" class="default" src="/@api/deki/files/3460/=zoom-out.gif"></td>
+    <td><img alt="zoom-out.gif" class="default" src="zoom-out.gif"></td>
    </tr>
   </tbody>
  </table>
@@ -266,35 +265,13 @@ cursor: unset;
 
 <h2 id="規格">規格</h2>
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}</td>
-   <td>{{Spec2('CSS3 Basic UI')}}</td>
-   <td>Addition of several keywords and the positioning syntax for <code>url()</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Initial definition.</td>
-  </tr>
- </tbody>
-</table>
+<p>{{Specifications}}</p>
 
 <p>{{cssinfo}}</p>
 
 <h2 id="瀏覽器相容性">瀏覽器相容性</h2>
 
-
-
-<p>{{Compat("css.properties.cursor")}}</p>
+<p>{{Compat}}</p>
 
 <h2 id="參照">參照</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 7d248f1c670ade5e0b90c3651ac1641becf320b1 Mon Sep 17 00:00:00 2001
From: Atsuto Yamashita <nyxht500@yahoo.co.jp>
Date: Tue, 8 Mar 2022 23:41:59 +0900
Subject: user_input_methods のリンクを日本語ページに修正 (#4424)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 5e5390d10f..08cc862863 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -150,14 +150,14 @@ if (elem.requestFullscreen) {
 
 <h4 id="contentEditable" name="contentEditable">コンテンツを編集可能にする</h4>
 
-<p><a href="/ja/docs/Web/HTML/Global_attributes#contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p>
+<p><a href="/ja/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> 属性を使うことで、開いているウェブアプリのあらゆる DOM 要素を直接編集することができます。</p>
 
 <pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;
     このテキストは閲覧者が編集することができます。
 &lt;/div&gt;</pre>
 
 <div class="note">
-<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にするガイド</a>で確認することができます。</p>
+<p><strong>注</strong>: 互換性や例、その他リソースに関する情報は <a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にするガイド</a>で確認することができます。</p>
 </div>
 
 <h2 id="Examples" name="Examples">例</h2>
@@ -168,7 +168,7 @@ if (elem.requestFullscreen) {
  <dt><strong><a href="/ja/docs/Web/API/Pointer_Lock_API#example">Simple pointer lock demo</a></strong></dt>
  <dd>We've written a simple pointer lock demo to show you how to use it to set up a simple control system. The demo uses JavaScript to draw a ball inside a <code>{{htmlelement("canvas")}}</code> element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse.</dd>
  <dt><strong><a href="http://html5demos.com/contenteditable">コンテンツを編集可能にするデモ</a></strong></dt>
- <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/Guide/API/DOM/Storage">ローカルストレージ</a>を使い保存されます。</dd>
+ <dd>このデモは、編集可能なドキュメントセクションを作成することに利用できる contenteditable がどのように動くか表示しており、その状態はその後 <a href="/ja/docs/Web/API/Web_Storage_API">ローカルストレージ</a>を使い保存されます。</dd>
 </dl>
 
 <h2 id="Tutorials" name="Tutorials">チュートリアル</h2>
@@ -176,9 +176,9 @@ if (elem.requestFullscreen) {
 <ul>
  <li><a href="/ja/docs/Web/Guide/DOM/Events/Touch_events">タッチイベントガイド</a></li>
  <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の回転の管理</a></li>
- <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面モードの使用</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Dragging_and_Dropping_Multiple_Items">複数のアイテムのドラッグ＆ドロップ</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Drag_operations">ドラッグ操作ガイド</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面モードの使用</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Multiple_items">複数のアイテムのドラッグ＆ドロップ</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations">ドラッグ操作ガイド</a></li>
 </ul>
 
 <h2 id="Reference" name="Reference">関連情報</h2>
@@ -186,12 +186,12 @@ if (elem.requestFullscreen) {
 <ul>
  <li>{{domxref("MouseEvent")}}</li>
  <li>{{domxref("KeyboardEvent")}}</li>
- <li><a href="/ja/docs/Web/Guide/Events/Touch_events">タッチイベント</a></li>
+ <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li>
  <li>{{domxref("Pointer_Lock_API")}}</li>
  <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面回転 API</a></li>
- <li><a href="/ja/docs/Web/Guide/API/DOM/Using_full_screen_mode">全画面 API</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Drag_and_drop">ドラッグ＆ドロップ</a></li>
- <li><a href="/ja/docs/Web/Guide/HTML/Content_Editable">コンテンツを編集可能にする</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ</a></li>
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li>
  <li><a href="/ja/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
  <li><a href="/ja/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
 </ul>
-- 
cgit v1.2.3-54-g00ecf


From 437cf8ebd65086548ea53d138e7ed2e9f3fffb94 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 23:44:49 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳 (#4335)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/element/firstelementchild/index.md  | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 files/ja/web/api/element/firstelementchild/index.md

diff --git a/files/ja/web/api/element/firstelementchild/index.md b/files/ja/web/api/element/firstelementchild/index.md
new file mode 100644
index 0000000000..a1a1182594
--- /dev/null
+++ b/files/ja/web/api/element/firstelementchild/index.md
@@ -0,0 +1,55 @@
+---
+title: Element.firstElementChild
+slug: Web/API/Element/firstElementChild
+tags:
+  - API
+  - DOM
+  - Element
+  - プロパティ
+browser-compat: api.Element.firstElementChild
+translation_of: Web/API/Element/firstElementChild
+---
+{{ APIRef("DOM") }}
+
+**`Element.firstElementChild`** は読み取り専用のプロパティで、要素の最初の子を {{domxref("Element")}} で返します。子要素がない場合は `null` を返します。
+
+`Element.firstElementChild` は要素ノードのみを含みます。
+テキストやコメントノードなど、要素以外のノードを含むすべての子ノードを取得するには、 {{domxref("Node.firstChild")}} を使用してください。
+
+## 構文
+
+```js
+// ゲッター
+element = el.firstElementChild;
+
+// セッターなし。読み取り専用プロパティ
+```
+
+## 例
+
+```html
+<ul id="list">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+const list = document.getElementById('list');
+console.log(list.firstElementChild.textContent);
+// logs "First (1)"
+</script>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.nextElementSibling")}}
+- {{domxref("Element.lastElementChild")}}
-- 
cgit v1.2.3-54-g00ecf


From 07b1e49337d5fda31acf76572fd712b434493948 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 23:45:15 +0900
Subject: 2022/01/24 時点の英語版に基づき新規翻訳 (#4337)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/element/nextelementsibling/index.md | 59 ++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 files/ja/web/api/element/nextelementsibling/index.md

diff --git a/files/ja/web/api/element/nextelementsibling/index.md b/files/ja/web/api/element/nextelementsibling/index.md
new file mode 100644
index 0000000000..ea24a59878
--- /dev/null
+++ b/files/ja/web/api/element/nextelementsibling/index.md
@@ -0,0 +1,59 @@
+---
+title: Element.nextElementSibling
+slug: Web/API/Element/nextElementSibling
+tags:
+  - API
+  - DOM
+  - Element
+  - プロパティ
+browser-compat: api.Element.nextElementSibling
+translation_of: Web/API/Element/nextElementSibling
+---
+{{APIRef("DOM")}}
+
+**`Element.nextElementSibling`** は読み取り専用のプロパティで、この要素の親の子リスト内ですぐ次にある要素を返します。このノードがリストの最後のノードであった場合は `null` を返します。
+
+## 構文
+
+```js
+// ゲッター
+element = el.nextElementSibling;
+
+// セッターなし。読み取り専用プロパティ
+```
+
+## 例
+
+```html
+<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  let el = document.getElementById('div-01').nextElementSibling;
+  console.log('Siblings of div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+```
+
+この例は読み込み時に、コンソールに以下のような出力を行います。
+
+```
+Siblings of div-01:
+DIV
+SCRIPT
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.previousElementSibling")}}
-- 
cgit v1.2.3-54-g00ecf


From 6a0af615e351a75f1c837bf88d90b34ba81bf463 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 23:45:35 +0900
Subject: 2022/01/25 時点の英語版に基づき新規翻訳 (#4338)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/element/previouselementsibling/index.md    | 68 ++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 files/ja/web/api/element/previouselementsibling/index.md

diff --git a/files/ja/web/api/element/previouselementsibling/index.md b/files/ja/web/api/element/previouselementsibling/index.md
new file mode 100644
index 0000000000..510b6efcc7
--- /dev/null
+++ b/files/ja/web/api/element/previouselementsibling/index.md
@@ -0,0 +1,68 @@
+---
+title: Element.previousElementSibling
+slug: Web/API/Element/previousElementSibling
+tags:
+  - API
+  - DOM
+  - Element
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+browser-compat: api.Element.previousElementSibling
+translation_of: Web/API/Element/nextElementSibling
+---
+{{APIRef("DOM")}}
+
+**`Element.previousElementSibling`** は読み取り専用のプロパティで、この要素 ({{domxref("Element")}}) の親の子リスト内ですぐ前にある要素を返します。このノードがリストの最初のノードであった場合は `null` を返します。
+
+## 構文
+
+```js
+// ゲッター
+element = el.previousElementSibling;
+
+// セッターなし。読み取り専用プロパティ
+```
+
+## 例
+
+```html
+<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+<li>This is a list item</li>
+<li>This is another list item</li>
+<div id="div-03">Here is div-03</div>
+
+<script>
+  let el = document.getElementById('div-03').previousElementSibling;
+  document.write('<p>Siblings of div-03</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.previousElementSibling;
+  }
+  document.write('</ol>');
+</script>
+```
+
+この例は読み込み時に、ぺ0時に以下のような出力を行います。
+
+```
+Siblings of div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.nextElementSibling")}}
-- 
cgit v1.2.3-54-g00ecf


From fcaf278de3a2d71b1a94cabdaa934b895b3916bf Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 28 Feb 2022 23:16:41 +0900
Subject: Element 以下のプロパティの記事を移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/attributes/index.html     | 118 ------------
 files/ja/web/api/element/attributes/index.md       | 118 ++++++++++++
 .../web/api/element/childelementcount/index.html   |  42 ----
 .../ja/web/api/element/childelementcount/index.md  |  42 ++++
 files/ja/web/api/element/children/index.html       |  58 ------
 files/ja/web/api/element/children/index.md         |  58 ++++++
 files/ja/web/api/element/classname/index.html      |  35 ----
 files/ja/web/api/element/classname/index.md        |  35 ++++
 files/ja/web/api/element/clientheight/index.html   |  67 -------
 files/ja/web/api/element/clientheight/index.md     |  67 +++++++
 files/ja/web/api/element/clientleft/index.html     |  86 ---------
 files/ja/web/api/element/clientleft/index.md       |  86 +++++++++
 files/ja/web/api/element/clienttop/index.html      |  37 ----
 files/ja/web/api/element/clienttop/index.md        |  37 ++++
 files/ja/web/api/element/clientwidth/index.html    |  65 -------
 files/ja/web/api/element/clientwidth/index.md      |  65 +++++++
 files/ja/web/api/element/id/index.html             |  57 ------
 files/ja/web/api/element/id/index.md               |  57 ++++++
 files/ja/web/api/element/innerhtml/index.html      | 213 ---------------------
 files/ja/web/api/element/innerhtml/index.md        | 213 +++++++++++++++++++++
 files/ja/web/api/element/localname/index.html      |  87 ---------
 files/ja/web/api/element/localname/index.md        |  87 +++++++++
 files/ja/web/api/element/namespaceuri/index.html   |  35 ----
 files/ja/web/api/element/namespaceuri/index.md     |  35 ++++
 files/ja/web/api/element/outerhtml/index.html      | 118 ------------
 files/ja/web/api/element/outerhtml/index.md        | 118 ++++++++++++
 files/ja/web/api/element/prefix/index.html         |  48 -----
 files/ja/web/api/element/prefix/index.md           |  48 +++++
 files/ja/web/api/element/scrollheight/index.html   | 173 -----------------
 files/ja/web/api/element/scrollheight/index.md     | 173 +++++++++++++++++
 files/ja/web/api/element/scrollleft/index.html     | 111 -----------
 files/ja/web/api/element/scrollleft/index.md       | 111 +++++++++++
 files/ja/web/api/element/scrolltop/index.html      |  92 ---------
 files/ja/web/api/element/scrolltop/index.md        |  92 +++++++++
 files/ja/web/api/element/scrollwidth/index.html    | 125 ------------
 files/ja/web/api/element/scrollwidth/index.md      | 125 ++++++++++++
 files/ja/web/api/element/tagname/index.html        |  36 ----
 files/ja/web/api/element/tagname/index.md          |  36 ++++
 38 files changed, 1603 insertions(+), 1603 deletions(-)
 delete mode 100644 files/ja/web/api/element/attributes/index.html
 create mode 100644 files/ja/web/api/element/attributes/index.md
 delete mode 100644 files/ja/web/api/element/childelementcount/index.html
 create mode 100644 files/ja/web/api/element/childelementcount/index.md
 delete mode 100644 files/ja/web/api/element/children/index.html
 create mode 100644 files/ja/web/api/element/children/index.md
 delete mode 100644 files/ja/web/api/element/classname/index.html
 create mode 100644 files/ja/web/api/element/classname/index.md
 delete mode 100644 files/ja/web/api/element/clientheight/index.html
 create mode 100644 files/ja/web/api/element/clientheight/index.md
 delete mode 100644 files/ja/web/api/element/clientleft/index.html
 create mode 100644 files/ja/web/api/element/clientleft/index.md
 delete mode 100644 files/ja/web/api/element/clienttop/index.html
 create mode 100644 files/ja/web/api/element/clienttop/index.md
 delete mode 100644 files/ja/web/api/element/clientwidth/index.html
 create mode 100644 files/ja/web/api/element/clientwidth/index.md
 delete mode 100644 files/ja/web/api/element/id/index.html
 create mode 100644 files/ja/web/api/element/id/index.md
 delete mode 100644 files/ja/web/api/element/innerhtml/index.html
 create mode 100644 files/ja/web/api/element/innerhtml/index.md
 delete mode 100644 files/ja/web/api/element/localname/index.html
 create mode 100644 files/ja/web/api/element/localname/index.md
 delete mode 100644 files/ja/web/api/element/namespaceuri/index.html
 create mode 100644 files/ja/web/api/element/namespaceuri/index.md
 delete mode 100644 files/ja/web/api/element/outerhtml/index.html
 create mode 100644 files/ja/web/api/element/outerhtml/index.md
 delete mode 100644 files/ja/web/api/element/prefix/index.html
 create mode 100644 files/ja/web/api/element/prefix/index.md
 delete mode 100644 files/ja/web/api/element/scrollheight/index.html
 create mode 100644 files/ja/web/api/element/scrollheight/index.md
 delete mode 100644 files/ja/web/api/element/scrollleft/index.html
 create mode 100644 files/ja/web/api/element/scrollleft/index.md
 delete mode 100644 files/ja/web/api/element/scrolltop/index.html
 create mode 100644 files/ja/web/api/element/scrolltop/index.md
 delete mode 100644 files/ja/web/api/element/scrollwidth/index.html
 create mode 100644 files/ja/web/api/element/scrollwidth/index.md
 delete mode 100644 files/ja/web/api/element/tagname/index.html
 create mode 100644 files/ja/web/api/element/tagname/index.md

diff --git a/files/ja/web/api/element/attributes/index.html b/files/ja/web/api/element/attributes/index.html
deleted file mode 100644
index f3653263ef..0000000000
--- a/files/ja/web/api/element/attributes/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Element.attributes
-slug: Web/API/Element/attributes
-tags:
-  - API
-  - Attributes
-  - DOM
-  - Element
-  - Property
-  - プロパティ
-  - リファレンス
-  - 属性
-translation_of: Web/API/Element/attributes
----
-<p>{{ APIRef("DOM") }}</p>
-
-<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3>
-
-<pre class="brush: js">// ドキュメント内の最初の &lt;p&gt; 要素を取得する
-var para = document.getElementsByTagName("p")[0];
-var atts = para.attributes;</pre>
-
-<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3>
-
-<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br>
- 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-
-&lt;html&gt;
-
- &lt;head&gt;
-  &lt;title&gt;Attributes example&lt;/title&gt;
-  &lt;script type="text/javascript"&gt;
-   function listAttributes() {
-     var paragraph = document.getElementById("paragraph");
-     var result = document.getElementById("result");
-
-     // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう
-     if (paragraph.hasAttributes()) {
-       var attrs = paragraph.attributes;
-       var output = "";
-       for(var i = attrs.length - 1; i &gt;= 0; i--) {
-         output += attrs[i].name + "-&gt;" + attrs[i].value;
-       }
-       result.value = output;
-     } else {
-       result.value = "No attributes to show";
-     }
-   }
-  &lt;/script&gt;
- &lt;/head&gt;
-
-&lt;body&gt;
- &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
- &lt;form action=""&gt;
-  &lt;p&gt;
-    &lt;input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();"&gt;
-    &lt;input id="result" type="text" value=""&gt;
-  &lt;/p&gt;
- &lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Specifications" 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-element-attributes', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>{{SpecName('DOM2 Core')}} から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>{{SpecName('DOM1')}}から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.attributes")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li>
- <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li>
-</ul>
diff --git a/files/ja/web/api/element/attributes/index.md b/files/ja/web/api/element/attributes/index.md
new file mode 100644
index 0000000000..f3653263ef
--- /dev/null
+++ b/files/ja/web/api/element/attributes/index.md
@@ -0,0 +1,118 @@
+---
+title: Element.attributes
+slug: Web/API/Element/attributes
+tags:
+  - API
+  - Attributes
+  - DOM
+  - Element
+  - Property
+  - プロパティ
+  - リファレンス
+  - 属性
+translation_of: Web/API/Element/attributes
+---
+<p>{{ APIRef("DOM") }}</p>
+
+<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3>
+
+<pre class="brush: js">// ドキュメント内の最初の &lt;p&gt; 要素を取得する
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;</pre>
+
+<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3>
+
+<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br>
+ 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+
+ &lt;head&gt;
+  &lt;title&gt;Attributes example&lt;/title&gt;
+  &lt;script type="text/javascript"&gt;
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i &gt;= 0; i--) {
+         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No attributes to show";
+     }
+   }
+  &lt;/script&gt;
+ &lt;/head&gt;
+
+&lt;body&gt;
+ &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
+ &lt;form action=""&gt;
+  &lt;p&gt;
+    &lt;input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();"&gt;
+    &lt;input id="result" type="text" value=""&gt;
+  &lt;/p&gt;
+ &lt;/form&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Specifications" 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-element-attributes', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM3 Core')}}</td>
+   <td>{{SpecName('DOM2 Core')}} から変更無し</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM2 Core')}}</td>
+   <td>{{SpecName('DOM1')}}から変更無し</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
+   <td>{{Spec2('DOM1')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>{{Compat("api.Element.attributes")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li>
+ <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li>
+</ul>
diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html
deleted file mode 100644
index c3520c9a31..0000000000
--- a/files/ja/web/api/element/childelementcount/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: Element.childElementCount
-slug: Web/API/Element/childElementCount
-tags:
-  - API
-  - DOM
-  - Property
-  - Reference
-browser-compat: api.Element.childElementCount
-translation_of: Web/API/Element/childElementCount
-original_slug: Web/API/ParentNode/childElementCount
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">element.childElementCount;</pre>
-
-<h2 id="Example">例</h2>
-
-<pre class="brush:js">let sidebar = document.getElementById('sidebar');
-if (sidebar.childElementCount &gt; 0) {
-  // 何もしない
-}
-</pre>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Document.childElementCount")}}</li>
-  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/childelementcount/index.md b/files/ja/web/api/element/childelementcount/index.md
new file mode 100644
index 0000000000..c3520c9a31
--- /dev/null
+++ b/files/ja/web/api/element/childelementcount/index.md
@@ -0,0 +1,42 @@
+---
+title: Element.childElementCount
+slug: Web/API/Element/childElementCount
+tags:
+  - API
+  - DOM
+  - Property
+  - Reference
+browser-compat: api.Element.childElementCount
+translation_of: Web/API/Element/childElementCount
+original_slug: Web/API/ParentNode/childElementCount
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">element.childElementCount;</pre>
+
+<h2 id="Example">例</h2>
+
+<pre class="brush:js">let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount &gt; 0) {
+  // 何もしない
+}
+</pre>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Document.childElementCount")}}</li>
+  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html
deleted file mode 100644
index 5dd887af4f..0000000000
--- a/files/ja/web/api/element/children/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Element.children
-slug: Web/API/Element/children
-tags:
-  - API
-  - DOM
-  - Element
-  - HTMLCollection
-  - Property
-  - children
-browser-compat: api.Element.children
-translation_of: Web/API/Element/children
-original_slug: Web/API/ParentNode/children
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p>
-
-<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">
-// Getter
-collection = myElement.children;
-
-// No setter; read-only property
-</pre>
-
-<h3 id="Return_value">返値</h3>
-
-<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
-
-<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
-
-<h2 id="Example">例 </h2>
-
-<pre class="brush: js">const myElement = document.getElementById('foo');
-for (let i = 0; i &lt; myElement.children.length; i++) {
-  console.log(myElement.children[i].tagName);
-}
-</pre>
-
-<h2 id="Specification">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>
-    {{domxref("Node.childNodes")}}
-  </li>
-</ul>
diff --git a/files/ja/web/api/element/children/index.md b/files/ja/web/api/element/children/index.md
new file mode 100644
index 0000000000..5dd887af4f
--- /dev/null
+++ b/files/ja/web/api/element/children/index.md
@@ -0,0 +1,58 @@
+---
+title: Element.children
+slug: Web/API/Element/children
+tags:
+  - API
+  - DOM
+  - Element
+  - HTMLCollection
+  - Property
+  - children
+browser-compat: api.Element.children
+translation_of: Web/API/Element/children
+original_slug: Web/API/ParentNode/children
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p>
+
+<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+// Getter
+collection = myElement.children;
+
+// No setter; read-only property
+</pre>
+
+<h3 id="Return_value">返値</h3>
+
+<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
+
+<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
+
+<h2 id="Example">例 </h2>
+
+<pre class="brush: js">const myElement = document.getElementById('foo');
+for (let i = 0; i &lt; myElement.children.length; i++) {
+  console.log(myElement.children[i].tagName);
+}
+</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>
+    {{domxref("Node.childNodes")}}
+  </li>
+</ul>
diff --git a/files/ja/web/api/element/classname/index.html b/files/ja/web/api/element/classname/index.html
deleted file mode 100644
index 00f15100e7..0000000000
--- a/files/ja/web/api/element/classname/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: element.className
-slug: Web/API/Element/className
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Element/className
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className;
-<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
-<ul>
- <li><var>cName</var> : クラス名（文字列）</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("element.classList")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md
new file mode 100644
index 0000000000..00f15100e7
--- /dev/null
+++ b/files/ja/web/api/element/classname/index.md
@@ -0,0 +1,35 @@
+---
+title: element.className
+slug: Web/API/Element/className
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Element/className
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className;
+<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
+<ul>
+ <li><var>cName</var> : クラス名（文字列）</li>
+</ul>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得
+
+if (elm.className == "fixed") {
+  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
+}</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
+</ul>
+<h2 id="See_also" name="See_also">関連情報</h2>
+<ul>
+ <li>{{domxref("element.classList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/clientheight/index.html b/files/ja/web/api/element/clientheight/index.html
deleted file mode 100644
index 4cde36518d..0000000000
--- a/files/ja/web/api/element/clientheight/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: Element.clientHeight
-slug: Web/API/Element/clientHeight
-tags:
-  - API
-  - CSSOM View
-  - NeedsMarkupWork
-  - Property
-  - Reference
-translation_of: Web/API/Element/clientHeight
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p>
-
-<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p>
-
-<p><code>clientHeight</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p>
-
-<div class="note">
-<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre>
-
-<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Notes" name="Notes">注</h3>
-
-<p><code>clientHeight</code> は Internet Explorer オブジェクトモデルで導入されたプロパティです。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.clientHeight")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li>{{domxref("Element.scrollHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md
new file mode 100644
index 0000000000..4cde36518d
--- /dev/null
+++ b/files/ja/web/api/element/clientheight/index.md
@@ -0,0 +1,67 @@
+---
+title: Element.clientHeight
+slug: Web/API/Element/clientHeight
+tags:
+  - API
+  - CSSOM View
+  - NeedsMarkupWork
+  - Property
+  - Reference
+translation_of: Web/API/Element/clientHeight
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p>
+
+<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p>
+
+<p><code>clientHeight</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p>
+
+<div class="note">
+<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre>
+
+<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">注</h3>
+
+<p><code>clientHeight</code> は Internet Explorer オブジェクトモデルで導入されたプロパティです。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.clientHeight")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li>{{domxref("Element.scrollHeight")}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+</ul>
diff --git a/files/ja/web/api/element/clientleft/index.html b/files/ja/web/api/element/clientleft/index.html
deleted file mode 100644
index 7a17600640..0000000000
--- a/files/ja/web/api/element/clientleft/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Element.clientLeft
-slug: Web/API/Element/clientLeft
-tags:
-- API
-- CSSOM View
-- NeedsAgnostify
-- NeedsMarkupWork
-- Property
-- Reference
-browser-compat: api.Element.clientLeft
-translation_of: Web/API/Element/clientLeft
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
-
-<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
-
-<div class="note">
-	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-	</p>
-</div>
-
-<p style="height: 5px !important; margin: 0px;"></p>
-
-<div class="note">
-	<p><strong>注:</strong> 要素に
-		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
-</div>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
-</pre>
-
-<h2 id="Example">例</h2>
-
-<div id="offsetContainer"
-	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-	<div id="idDiv"
-		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-		<p id="PaddingTopLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-top</p>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-		</p>
-
-		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-			culpa qui officia deserunt mollit anim id est laborum.</p>
-
-		<p id="PaddingBottomLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-bottom</p>
-	</div>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
-	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
-</div>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="Notes">注</h2>
-
-<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-
-<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
-
-<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
-	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
new file mode 100644
index 0000000000..7a17600640
--- /dev/null
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -0,0 +1,86 @@
+---
+title: Element.clientLeft
+slug: Web/API/Element/clientLeft
+tags:
+- API
+- CSSOM View
+- NeedsAgnostify
+- NeedsMarkupWork
+- Property
+- Reference
+browser-compat: api.Element.clientLeft
+translation_of: Web/API/Element/clientLeft
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
+
+<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
+
+<div class="note">
+	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+	</p>
+</div>
+
+<p style="height: 5px !important; margin: 0px;"></p>
+
+<div class="note">
+	<p><strong>注:</strong> 要素に
+		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
+</div>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
+</pre>
+
+<h2 id="Example">例</h2>
+
+<div id="offsetContainer"
+	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+	<div id="idDiv"
+		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+		<p id="PaddingTopLabel"
+			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
+			padding-top</p>
+
+		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+		</p>
+
+		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+			culpa qui officia deserunt mollit anim id est laborum.</p>
+
+		<p id="PaddingBottomLabel"
+			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
+			padding-bottom</p>
+	</div>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
+	<strong
+		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
+	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
+</div>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="Notes">注</h2>
+
+<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
+
+<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
+
+<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
+	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
diff --git a/files/ja/web/api/element/clienttop/index.html b/files/ja/web/api/element/clienttop/index.html
deleted file mode 100644
index 95ae5ad2b3..0000000000
--- a/files/ja/web/api/element/clienttop/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: element.clientTop
-slug: Web/API/Element/clientTop
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Element/clientTop
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p>
-<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop;
-</pre>
-<h2 id="Example" name="Example">例</h2>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{mediawiki.external('endif')}}</span></div>
-<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>W3C の仕様の一部ではありません。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-<h2 id="References" name="References">リファレンス</h2>
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
-</ul>
diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md
new file mode 100644
index 0000000000..95ae5ad2b3
--- /dev/null
+++ b/files/ja/web/api/element/clienttop/index.md
@@ -0,0 +1,37 @@
+---
+title: element.clientTop
+slug: Web/API/Element/clientTop
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Element/clientTop
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p>
+<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop;
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
+ <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
+  <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
+  <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
+  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+ </div>
+ <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{mediawiki.external('endif')}}</span></div>
+<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p>
+<h2 id="Specification" name="Specification">仕様</h2>
+<p>W3C の仕様の一部ではありません。</p>
+<h2 id="Notes" name="Notes">注記</h2>
+<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
+<h2 id="References" name="References">リファレンス</h2>
+<ul>
+ <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li>
+ <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
+</ul>
diff --git a/files/ja/web/api/element/clientwidth/index.html b/files/ja/web/api/element/clientwidth/index.html
deleted file mode 100644
index 47753e0077..0000000000
--- a/files/ja/web/api/element/clientwidth/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Element.clientWidth
-slug: Web/API/Element/clientWidth
-tags:
-  - API
-  - CSSOM View
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/API/Element/clientWidth
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p>
-
-<p><code>clientWidth</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p>
-
-<div class="note">
-<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
-
-<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Notes" name="Notes">メモ</h3>
-
-<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.clientWidth")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li>{{domxref("Element.scrollWidth")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md
new file mode 100644
index 0000000000..47753e0077
--- /dev/null
+++ b/files/ja/web/api/element/clientwidth/index.md
@@ -0,0 +1,65 @@
+---
+title: Element.clientWidth
+slug: Web/API/Element/clientWidth
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/Element/clientWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p>
+
+<p><code>clientWidth</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p>
+
+<div class="note">
+<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+
+<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.clientWidth")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li>{{domxref("Element.scrollWidth")}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+</ul>
diff --git a/files/ja/web/api/element/id/index.html b/files/ja/web/api/element/id/index.html
deleted file mode 100644
index 46cf1c1a9e..0000000000
--- a/files/ja/web/api/element/id/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: element.id
-slug: Web/API/Element/id
-tags:
-  - DOM
-  - Gecko
-translation_of: Web/API/Element/id
----
-<div>{{ApiRef}}</div>
-
-<h2 id="Summary" name="Summary">概要</h2>
-
-<p>要素の 識別子 (identifier) を取得 / 設定します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得
-<em>element</em>.id = <var>idStr</var>; // 設定
-</pre>
-
-<h2 id="Notes" name="Notes">注意</h2>
-
-<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p>
-
-<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code>&lt;div id="part_3"&gt;</code>.</p>
-
-<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p>
-
-<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p>
-
-<pre class="brush:css">#thisID {
-  background: darkblue;
-  color; ghostwhite;
-}</pre>
-
-<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</p>
-
-<h2 id="Specification" name="Specification">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<p> </p>
diff --git a/files/ja/web/api/element/id/index.md b/files/ja/web/api/element/id/index.md
new file mode 100644
index 0000000000..46cf1c1a9e
--- /dev/null
+++ b/files/ja/web/api/element/id/index.md
@@ -0,0 +1,57 @@
+---
+title: element.id
+slug: Web/API/Element/id
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Element/id
+---
+<div>{{ApiRef}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p>要素の 識別子 (identifier) を取得 / 設定します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得
+<em>element</em>.id = <var>idStr</var>; // 設定
+</pre>
+
+<h2 id="Notes" name="Notes">注意</h2>
+
+<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p>
+
+<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code>&lt;div id="part_3"&gt;</code>.</p>
+
+<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p>
+
+<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p>
+
+<pre class="brush:css">#thisID {
+  background: darkblue;
+  color; ghostwhite;
+}</pre>
+
+<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</p>
+
+<h2 id="Specification" name="Specification">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
+   <td>{{Spec2('DOM2 HTML')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<p> </p>
diff --git a/files/ja/web/api/element/innerhtml/index.html b/files/ja/web/api/element/innerhtml/index.html
deleted file mode 100644
index bd63262b6c..0000000000
--- a/files/ja/web/api/element/innerhtml/index.html
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: Element.innerHTML
-slug: Web/API/Element/innerHTML
-tags:
-  - API
-  - DOM
-  - DOM Parsing
-  - Element
-  - Parsing HTML
-  - Property
-  - Reference
-  - innerHTML
-  - プロパティ
-browser-compat: api.Element.innerHTML
-translation_of: Web/API/Element/innerHTML
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p>
-
-<div class="note"><strong>メモ:</strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&amp;)</code>, <code>(&lt;)</code>, <code>(&gt;)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code>, <code>"&amp;gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div>
-
-<p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML;
-
-<var>element</var>.innerHTML = <var>htmlString</var>;
-</pre>
-
-<h3 id="Value">値</h3>
-
-<p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p>
-
-<h3 id="Exceptions">例外</h3>
-
-<dl>
-  <dt><code>SyntaxError</code></dt>
-  <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd>
-  <dt><code>NoModificationAllowedError</code></dt>
-  <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd>
-</dl>
-
-<h2 id="Usage_notes">使用上のメモ</h2>
-
-<p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p>
-
-<h3 id="Reading_the_HTML_contents_of_an_element">要素の HTML コンテンツの読み取り</h3>
-
-<p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p>
-
-<pre class="brush: js">let contents = myElement.innerHTML;</pre>
-
-<p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p>
-
-<div class="note">
-  <p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p>
-</div>
-
-<h3 id="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3>
-
-<p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p>
-
-<p>例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。</p>
-
-<pre class="brush: js">document.body.innerHTML = "";</pre>
-
-<p>この例は文書の現在の HTML マークアップを走査し、 <code>"&lt;"</code> の文字を HTML エンティティの <code>"&amp;lt;"</code> に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 <code>innerHTML</code> の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。</p>
-
-<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
-         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
-            "&lt;/pre&gt;";</pre>
-
-<h4 id="Operational_details">操作の詳細</h4>
-
-<p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p>
-
-<ol>
- <li>指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。</li>
- <li>中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <code>&lt;template&gt;</code> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい <code>DocumentFragment</code> で置き換えます。</li>
- <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li>
-</ol>
-
-<h3 id="Security_considerations">セキュリティの考慮事項</h3>
-
-<p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p>
-
-<pre class="brush: js">const name = "John";
-// 'el' を HTML の DOM 要素と想定します
-el.innerHTML = name; // この場合は無害
-
-// ...
-
-name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
-el.innerHTML = name; // この場合は無害</pre>
-
-<p>これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では <code>innerHTML</code> で挿入された {{HTMLElement("script")}} タグは<a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">実行するべきではない</a>と定義しているからです。</p>
-
-<p>しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために <code>innerHTML</code> を使用するたびに、セキュリティリスクは残ります。</p>
-
-<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
-el.innerHTML = name; // アラートが表示される</pre>
-
-<p>このため、プレーンテキストを挿入するときには <code>innerHTML</code> を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。</p>
-
-<div class="warning">
-<p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p>
-</div>
-
-<h2 id="Example">例</h2>
-
-<p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">function log(msg) {
-  var logElem = document.querySelector(".log");
-
-  var time = new Date();
-  var timeStr = time.toLocaleTimeString();
-  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
-}
-
-log("Logging mouse events inside this container...");
-</pre>
-
-<p><code>log()</code> 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから <code>"log"</code> クラスのボックスにメッセージを追加します。</p>
-
-<p>{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。</p>
-
-<pre class="brush: js">function logEvent(event) {
-  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
-            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
-  log(msg);
-}</pre>
-
-<p>それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。</p>
-
-<pre class="brush: js">var boxElem = document.querySelector(".box");
-
-boxElem.addEventListener("mousedown", logEvent);
-boxElem.addEventListener("mouseup", logEvent);
-boxElem.addEventListener("click", logEvent);
-boxElem.addEventListener("mouseenter", logEvent);
-boxElem.addEventListener("mouseleave", logEvent);</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<p>この例の HTML はとても単純です。</p>
-
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
-  &lt;div class="log"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<p><code>"box"</code> クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが <code>"log"</code> である <code>&lt;div&gt;</code> は、ログテキスト自身のコンテナーです。</p>
-
-<h3 id="CSS">CSS</h3>
-
-<p>以下の CSS が例の内容をスタイル付けします。</p>
-
-<pre class="brush: css">.box {
-  width: 600px;
-  height: 300px;
-  border: 1px solid black;
-  padding: 2px 4px;
-  overflow-y: scroll;
-  overflow-x: auto;
-}
-
-.log {
-  margin-top: 8px;
-  font-family: monospace;
-}</pre>
-
-<h3 id="Result">結果</h3>
-
-<p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p>
-
-<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
-
-<h2 id="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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
-      <td>{{Spec2('DOM Parsing')}}</td>
-      <td>初回定義</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}</li>
-  <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
-  <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li>
-  <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/innerhtml/index.md b/files/ja/web/api/element/innerhtml/index.md
new file mode 100644
index 0000000000..bd63262b6c
--- /dev/null
+++ b/files/ja/web/api/element/innerhtml/index.md
@@ -0,0 +1,213 @@
+---
+title: Element.innerHTML
+slug: Web/API/Element/innerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing HTML
+  - Property
+  - Reference
+  - innerHTML
+  - プロパティ
+browser-compat: api.Element.innerHTML
+translation_of: Web/API/Element/innerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p>
+
+<div class="note"><strong>メモ:</strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&amp;)</code>, <code>(&lt;)</code>, <code>(&gt;)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code>, <code>"&amp;gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div>
+
+<p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML;
+
+<var>element</var>.innerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value">値</h3>
+
+<p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p>
+
+<h3 id="Exceptions">例外</h3>
+
+<dl>
+  <dt><code>SyntaxError</code></dt>
+  <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd>
+  <dt><code>NoModificationAllowedError</code></dt>
+  <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd>
+</dl>
+
+<h2 id="Usage_notes">使用上のメモ</h2>
+
+<p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p>
+
+<h3 id="Reading_the_HTML_contents_of_an_element">要素の HTML コンテンツの読み取り</h3>
+
+<p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p>
+
+<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+
+<p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p>
+
+<div class="note">
+  <p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p>
+</div>
+
+<h3 id="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3>
+
+<p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p>
+
+<p>例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。</p>
+
+<pre class="brush: js">document.body.innerHTML = "";</pre>
+
+<p>この例は文書の現在の HTML マークアップを走査し、 <code>"&lt;"</code> の文字を HTML エンティティの <code>"&amp;lt;"</code> に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 <code>innerHTML</code> の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。</p>
+
+<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
+         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
+            "&lt;/pre&gt;";</pre>
+
+<h4 id="Operational_details">操作の詳細</h4>
+
+<p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p>
+
+<ol>
+ <li>指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。</li>
+ <li>中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <code>&lt;template&gt;</code> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい <code>DocumentFragment</code> で置き換えます。</li>
+ <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li>
+</ol>
+
+<h3 id="Security_considerations">セキュリティの考慮事項</h3>
+
+<p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p>
+
+<pre class="brush: js">const name = "John";
+// 'el' を HTML の DOM 要素と想定します
+el.innerHTML = name; // この場合は無害
+
+// ...
+
+name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
+el.innerHTML = name; // この場合は無害</pre>
+
+<p>これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では <code>innerHTML</code> で挿入された {{HTMLElement("script")}} タグは<a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">実行するべきではない</a>と定義しているからです。</p>
+
+<p>しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために <code>innerHTML</code> を使用するたびに、セキュリティリスクは残ります。</p>
+
+<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
+el.innerHTML = name; // アラートが表示される</pre>
+
+<p>このため、プレーンテキストを挿入するときには <code>innerHTML</code> を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。</p>
+
+<div class="warning">
+<p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p>
+</div>
+
+<h2 id="Example">例</h2>
+
+<p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+}
+
+log("Logging mouse events inside this container...");
+</pre>
+
+<p><code>log()</code> 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから <code>"log"</code> クラスのボックスにメッセージを追加します。</p>
+
+<p>{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。</p>
+
+<pre class="brush: js">function logEvent(event) {
+  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
+            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+  log(msg);
+}</pre>
+
+<p>それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。</p>
+
+<pre class="brush: js">var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);</pre>
+
+<h3 id="HTML">HTML</h3>
+
+<p>この例の HTML はとても単純です。</p>
+
+<pre class="brush: html">&lt;div class="box"&gt;
+  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
+  &lt;div class="log"&gt;&lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<p><code>"box"</code> クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが <code>"log"</code> である <code>&lt;div&gt;</code> は、ログテキスト自身のコンテナーです。</p>
+
+<h3 id="CSS">CSS</h3>
+
+<p>以下の CSS が例の内容をスタイル付けします。</p>
+
+<pre class="brush: css">.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}</pre>
+
+<h3 id="Result">結果</h3>
+
+<p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p>
+
+<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+
+<h2 id="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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
+      <td>{{Spec2('DOM Parsing')}}</td>
+      <td>初回定義</td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}</li>
+  <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
+  <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li>
+  <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/localname/index.html b/files/ja/web/api/element/localname/index.html
deleted file mode 100644
index b92152fbfa..0000000000
--- a/files/ja/web/api/element/localname/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Element.localName
-slug: Web/API/Element/localName
-tags:
-- API
-- DOM
-- NeedsBrowserCompatibility
-- NeedsMobileBrowserCompatibility
-- Property
-- Reference
-browser-compat: api.Element.localName
-translation_of: Web/API/Element/localName
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.localName</code></strong> は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js"><var>name</var> = <var>element</var>.localName
-</pre>
-
-<h3 id="Return_value">返値</h3>
-
-<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
-</p>
-
-<h2 id="Example">例</h2>
-
-<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。)</p>
-
-<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg"&gt;
-&lt;head&gt;
-  &lt;script type="application/javascript"&gt;&lt;![CDATA[
-  function test() {
-    var text = document.getElementById('text');
-    var circle = document.getElementById('circle');
-
-    text.value = "&lt;svg:circle&gt; has:\n" +
-                 "localName = '" + circle.localName + "'\n" +
-                 "namespaceURI = '" + circle.namespaceURI + "'";
-  }
-  ]]&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="test()"&gt;
-  &lt;svg:svg version="1.1"
-    width="100px" height="100px"
-    viewBox="0 0 100 100"&gt;
-    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
-  &lt;/svg:svg&gt;
-  &lt;textarea id="text" rows="4" cols="55"/&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<h2 id="Notes">注</h2>
-
-<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p>
-
-<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
-  &lt;ecomm:partners&gt;
-    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
-    &lt;/ecomm:partner&gt;
-  &lt;/ecomm:partner&gt;
-&lt;/ecomm:business&gt;
-</pre>
-
-<div class="note">
-<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p>
-</div>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.prefix")}}</li>
-  <li>{{domxref("Attr.localName")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md
new file mode 100644
index 0000000000..b92152fbfa
--- /dev/null
+++ b/files/ja/web/api/element/localname/index.md
@@ -0,0 +1,87 @@
+---
+title: Element.localName
+slug: Web/API/Element/localName
+tags:
+- API
+- DOM
+- NeedsBrowserCompatibility
+- NeedsMobileBrowserCompatibility
+- Property
+- Reference
+browser-compat: api.Element.localName
+translation_of: Web/API/Element/localName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.localName</code></strong> は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><var>name</var> = <var>element</var>.localName
+</pre>
+
+<h3 id="Return_value">返値</h3>
+
+<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
+</p>
+
+<h2 id="Example">例</h2>
+
+<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。)</p>
+
+<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg"&gt;
+&lt;head&gt;
+  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "&lt;svg:circle&gt; has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]&gt;&lt;/script&gt;
+&lt;/head&gt;
+&lt;body onload="test()"&gt;
+  &lt;svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100"&gt;
+    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
+  &lt;/svg:svg&gt;
+  &lt;textarea id="text" rows="4" cols="55"/&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h2 id="Notes">注</h2>
+
+<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p>
+
+<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
+  &lt;ecomm:partners&gt;
+    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
+    &lt;/ecomm:partner&gt;
+  &lt;/ecomm:partner&gt;
+&lt;/ecomm:business&gt;
+</pre>
+
+<div class="note">
+<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p>
+</div>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.namespaceURI")}}</li>
+  <li>{{domxref("Element.prefix")}}</li>
+  <li>{{domxref("Attr.localName")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/namespaceuri/index.html b/files/ja/web/api/element/namespaceuri/index.html
deleted file mode 100644
index ebf84fb77c..0000000000
--- a/files/ja/web/api/element/namespaceuri/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Node.namespaceURI
-slug: Web/API/Element/namespaceURI
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
-translation_of: Web/API/Node/namespaceURI
-original_slug: Web/API/Node/namespaceURI
----
-<p>{{ ApiRef() }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI
-</pre>
-<ul>
- <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li>
-</ul>
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code>&lt;browser/&gt;</code> と理解されます。</p>
-<pre>if (node.localName == "browser" &amp;&amp;
-    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // これは XUL browser です。
-}
-</pre>
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
-<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p>
-<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p>
-<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p>
-<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p>
diff --git a/files/ja/web/api/element/namespaceuri/index.md b/files/ja/web/api/element/namespaceuri/index.md
new file mode 100644
index 0000000000..ebf84fb77c
--- /dev/null
+++ b/files/ja/web/api/element/namespaceuri/index.md
@@ -0,0 +1,35 @@
+---
+title: Node.namespaceURI
+slug: Web/API/Element/namespaceURI
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - 要更新
+translation_of: Web/API/Node/namespaceURI
+original_slug: Web/API/Node/namespaceURI
+---
+<p>{{ ApiRef() }}</p>
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p>
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI
+</pre>
+<ul>
+ <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li>
+</ul>
+<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code>&lt;browser/&gt;</code> と理解されます。</p>
+<pre>if (node.localName == "browser" &amp;&amp;
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // これは XUL browser です。
+}
+</pre>
+<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
+<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p>
+<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p>
+<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p>
+<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p>
+<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p>
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p>
diff --git a/files/ja/web/api/element/outerhtml/index.html b/files/ja/web/api/element/outerhtml/index.html
deleted file mode 100644
index 1b476879bf..0000000000
--- a/files/ja/web/api/element/outerhtml/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: Element.outerHTML
-slug: Web/API/Element/outerHTML
-tags:
-  - API
-  - DOM
-  - DOM Parsing
-  - Element
-  - Parsing
-  - Property
-  - Reference
-  - Serialization
-  - Serializing
-  - outerHTML
-translation_of: Web/API/Element/outerHTML
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p>
-
-<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML;
-
-<var>element</var>.outerHTML = <var>htmlString</var>;
-</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd>
-</dl>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p>
-
-<pre class="brush: js">// HTML:
-// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
-
-d = document.getElementById("d");
-console.log(d.outerHTML);
-
-// 次の文字列 '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
-// が、コンソールウィンドウに出力されます。
-</pre>
-
-<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p>
-
-<pre class="brush: js">// HTML:
-// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
-
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // "DIV" が記録される
-
-d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
-console.log(container.firstChild.nodeName); // "P" が記録される
-
-// #d の div 要素はもはや文書ツリーの一部ではなく、
-// 新たな段落に置き換えられました。
-</pre>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p>
-
-<pre class="brush: js">var div = document.createElement("div");
-div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
-console.log(div.outerHTML); // output: "&lt;div&gt;&lt;/div&gt;"</pre>
-
-<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p>
-
-<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // "P" を表示
-p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
-console.log(p.nodeName); // "P" のまま
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.outerHTML")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li>
- <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li>
- <li>{{domxref("HTMLElement.outerText")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/outerhtml/index.md b/files/ja/web/api/element/outerhtml/index.md
new file mode 100644
index 0000000000..1b476879bf
--- /dev/null
+++ b/files/ja/web/api/element/outerhtml/index.md
@@ -0,0 +1,118 @@
+---
+title: Element.outerHTML
+slug: Web/API/Element/outerHTML
+tags:
+  - API
+  - DOM
+  - DOM Parsing
+  - Element
+  - Parsing
+  - Property
+  - Reference
+  - Serialization
+  - Serializing
+  - outerHTML
+translation_of: Web/API/Element/outerHTML
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p>
+
+<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML;
+
+<var>element</var>.outerHTML = <var>htmlString</var>;
+</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<dl>
+ <dt><code>SyntaxError</code></dt>
+ <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd>
+ <dt><code>NoModificationAllowedError</code></dt>
+ <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+
+d = document.getElementById("d");
+console.log(d.outerHTML);
+
+// 次の文字列 '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
+// が、コンソールウィンドウに出力されます。
+</pre>
+
+<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p>
+
+<pre class="brush: js">// HTML:
+// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // "DIV" が記録される
+
+d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
+console.log(container.firstChild.nodeName); // "P" が記録される
+
+// #d の div 要素はもはや文書ツリーの一部ではなく、
+// 新たな段落に置き換えられました。
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p>
+
+<pre class="brush: js">var div = document.createElement("div");
+div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
+console.log(div.outerHTML); // output: "&lt;div&gt;&lt;/div&gt;"</pre>
+
+<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p>
+
+<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // "P" を表示
+p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
+console.log(p.nodeName); // "P" のまま
+</pre>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
+   <td>{{ Spec2('DOM Parsing') }}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>{{Compat("api.Element.outerHTML")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li>
+ <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li>
+ <li>{{domxref("HTMLElement.outerText")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/prefix/index.html b/files/ja/web/api/element/prefix/index.html
deleted file mode 100644
index b2baf67888..0000000000
--- a/files/ja/web/api/element/prefix/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: Element.prefix
-slug: Web/API/Element/prefix
-tags:
-- API
-- DOM
-- NeedsBrowserCompatibility
-- NeedsMobileBrowserCompatibility
-- Property
-- Reference
-browser-compat: api.Element.prefix
-translation_of: Web/API/Element/prefix
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js"><var>string</var> = <var>element</var>.prefix
-</pre>
-
-<h2 id="Examples">例</h2>
-
-<p>次の例はコンソールに "x" を記録します。</p>
-
-<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
-</pre>
-
-<h2 id="Notes">注</h2>
-
-<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p>
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.localName")}}</li>
-  <li>{{domxref("Attr.prefix")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/prefix/index.md b/files/ja/web/api/element/prefix/index.md
new file mode 100644
index 0000000000..b2baf67888
--- /dev/null
+++ b/files/ja/web/api/element/prefix/index.md
@@ -0,0 +1,48 @@
+---
+title: Element.prefix
+slug: Web/API/Element/prefix
+tags:
+- API
+- DOM
+- NeedsBrowserCompatibility
+- NeedsMobileBrowserCompatibility
+- Property
+- Reference
+browser-compat: api.Element.prefix
+translation_of: Web/API/Element/prefix
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js"><var>string</var> = <var>element</var>.prefix
+</pre>
+
+<h2 id="Examples">例</h2>
+
+<p>次の例はコンソールに "x" を記録します。</p>
+
+<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
+</pre>
+
+<h2 id="Notes">注</h2>
+
+<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.namespaceURI")}}</li>
+  <li>{{domxref("Element.localName")}}</li>
+  <li>{{domxref("Attr.prefix")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/scrollheight/index.html b/files/ja/web/api/element/scrollheight/index.html
deleted file mode 100644
index a2146b9db5..0000000000
--- a/files/ja/web/api/element/scrollheight/index.html
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: Element.scrollHeight
-slug: Web/API/Element/scrollHeight
-tags:
-  - API
-  - CSSOM View
-  - NeedsDHTMLRemovalInExample
-  - Property
-  - Reference
-translation_of: Web/API/Element/scrollHeight
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p>
-
-<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p>
-
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
-</div>
-<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
-
-<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
-
-<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2>
-
-<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3>
-
-<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p>
-
-<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight
-</pre>
-
-<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p>
-
-<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
-</pre>
-
-<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2>
-
-<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html notranslate">&lt;form name="registration"&gt;
-  &lt;p&gt;
-    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
-Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
-neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
-velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
-ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
-Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
-mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
-at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
-dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
-luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
-sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
-turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
-Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
-ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
-platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
-consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
-a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
-pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
-ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
-interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
-laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
-nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    &lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="checkbox" id="agree" name="accept" /&gt;
-    &lt;label for="agree"&gt;I agree&lt;/label&gt;
-    &lt;input type="submit" id="nextstep" value="Next" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">#notice {
-  display: inline-block;
-  margin-bottom: 12px;
-  border-radius: 5px;
-  width: 600px;
-  padding: 5px;
-  border: 2px #7FDF55 solid;
-}
-
-#rules {
-  width: 600px;
-  height: 130px;
-  padding: 5px;
-  border: #2A9F00 solid 2px;
-  border-radius: 5px;
-}</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js notranslate">function checkReading () {
-  if (checkReading.read) {
-    return;
-  }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
-  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
-}
-
-onload = function () {
-  var oToBeRead = document.getElementById("rules");
-  checkReading.noticeBox = document.createElement("span");
-  document.registration.accept.checked = false;
-  checkReading.noticeBox.id = "notice";
-  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
-  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
-  oToBeRead.onscroll = checkReading;
-  checkReading.call(oToBeRead);
-}</pre>
-
-<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollHeight")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
- <li>{{domxref("Element.clientHeight")}}</li>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md
new file mode 100644
index 0000000000..a2146b9db5
--- /dev/null
+++ b/files/ja/web/api/element/scrollheight/index.md
@@ -0,0 +1,173 @@
+---
+title: Element.scrollHeight
+slug: Web/API/Element/scrollHeight
+tags:
+  - API
+  - CSSOM View
+  - NeedsDHTMLRemovalInExample
+  - Property
+  - Reference
+translation_of: Web/API/Element/scrollHeight
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p>
+
+<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p>
+
+<div class="note">
+<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+
+<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2>
+
+<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3>
+
+<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p>
+
+<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight
+</pre>
+
+<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p>
+
+<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+</pre>
+
+<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2>
+
+<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;form name="registration"&gt;
+  &lt;p&gt;
+    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    &lt;/textarea&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;input type="checkbox" id="agree" name="accept" /&gt;
+    &lt;label for="agree"&gt;I agree&lt;/label&gt;
+    &lt;input type="submit" id="nextstep" value="Next" /&gt;
+  &lt;/p&gt;
+&lt;/form&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}</pre>
+
+<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.scrollHeight")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
+ <li>{{domxref("Element.clientHeight")}}</li>
+ <li>{{domxref("HTMLElement.offsetHeight")}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+</ul>
diff --git a/files/ja/web/api/element/scrollleft/index.html b/files/ja/web/api/element/scrollleft/index.html
deleted file mode 100644
index 4a593af238..0000000000
--- a/files/ja/web/api/element/scrollleft/index.html
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: Element.scrollLeft
-slug: Web/API/Element/scrollLeft
-tags:
-  - API
-  - CSSOM View
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/API/Element/scrollLeft
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p>
-
-<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p>
-
-<div class="blockIndicator warning">
-<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3>
-
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <em>sLeft</em> = <em>element</em>.scrollLeft;
-</pre>
-
-<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p>
-
-<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3>
-
-<pre class="syntaxbox">// スクロールしたピクセル数を設定
-<em>element</em>.scrollLeft = 10;
-</pre>
-
-<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p>
-
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div id="content"&gt;ボタンをクリックすると右にスライドします。&lt;/div&gt;
-&lt;/div&gt;
-
-&lt;button id="slide" type="button"&gt;右へスライド&lt;/button&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">#container {
-  width: 100px;
-  height: 100px;
-  border: 1px solid #ccc;
-  overflow-x: scroll;
-}
-
-#content {
-  width: 250px;
-  background-color: #ccc;
-}</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">const button = document.getElementById('slide');
-
-button.onclick = function () {
-  document.getElementById('container').scrollLeft += 20;
-};</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollLeft")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollTop")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md
new file mode 100644
index 0000000000..4a593af238
--- /dev/null
+++ b/files/ja/web/api/element/scrollleft/index.md
@@ -0,0 +1,111 @@
+---
+title: Element.scrollLeft
+slug: Web/API/Element/scrollLeft
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/Element/scrollLeft
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p>
+
+<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p>
+
+<div class="blockIndicator warning">
+<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3>
+
+<pre class="syntaxbox">// スクロールしたピクセル数を取得
+var <em>sLeft</em> = <em>element</em>.scrollLeft;
+</pre>
+
+<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p>
+
+<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3>
+
+<pre class="syntaxbox">// スクロールしたピクセル数を設定
+<em>element</em>.scrollLeft = 10;
+</pre>
+
+<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p>
+
+<ul>
+ <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
+ <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
+ <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;div id="container"&gt;
+  &lt;div id="content"&gt;ボタンをクリックすると右にスライドします。&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;button id="slide" type="button"&gt;右へスライド&lt;/button&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">#container {
+  width: 100px;
+  height: 100px;
+  border: 1px solid #ccc;
+  overflow-x: scroll;
+}
+
+#content {
+  width: 250px;
+  background-color: #ccc;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">const button = document.getElementById('slide');
+
+button.onclick = function () {
+  document.getElementById('container').scrollLeft += 20;
+};</pre>
+
+<h3 id="Result" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample("Example")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.scrollLeft")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
+ <li>{{domxref("Element.scrollTop")}}</li>
+ <li>{{domxref("Element.scrollTo()")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/scrolltop/index.html b/files/ja/web/api/element/scrolltop/index.html
deleted file mode 100644
index 21f8478a46..0000000000
--- a/files/ja/web/api/element/scrolltop/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Element.scrollTop
-slug: Web/API/Element/scrollTop
-tags:
-  - API
-  - CSSOM View
-  - NeedsArtUpdate
-  - NeedsMarkupWork
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/API/Element/scrollTop
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p>
-
-<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p>
-
-<p><code>scrollTop</code> がルート要素 (<code>&lt;html&gt;</code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p>
-
-<div class="warning">
-<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <var>intElemScrollTop</var> = someElement.scrollTop;
-</pre>
-
-<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p>
-
-<pre class="brush: js">// スクロールするピクセル数を設定
-<var>element</var>.scrollTop = <var>intValue</var>;
-</pre>
-
-<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p>
-
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li>
- <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-<em><strong>If you can see this, scrollTop = 0</strong></em>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
-
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
-
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
-</div>
-<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
-
-<h2 id="Specifications" 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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollTop")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollLeft")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md
new file mode 100644
index 0000000000..21f8478a46
--- /dev/null
+++ b/files/ja/web/api/element/scrolltop/index.md
@@ -0,0 +1,92 @@
+---
+title: Element.scrollTop
+slug: Web/API/Element/scrollTop
+tags:
+  - API
+  - CSSOM View
+  - NeedsArtUpdate
+  - NeedsMarkupWork
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/Element/scrollTop
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p>
+
+<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p>
+
+<p><code>scrollTop</code> がルート要素 (<code>&lt;html&gt;</code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p>
+
+<div class="warning">
+<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">// スクロールしたピクセル数を取得
+var <var>intElemScrollTop</var> = someElement.scrollTop;
+</pre>
+
+<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p>
+
+<pre class="brush: js">// スクロールするピクセル数を設定
+<var>element</var>.scrollTop = <var>intValue</var>;
+</pre>
+
+<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p>
+
+<ul>
+ <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li>
+ <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li>
+ <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
+<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
+<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+<em><strong>If you can see this, scrollTop = 0</strong></em>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
+
+<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
+
+<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+</div>
+<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+
+<h2 id="Specifications" 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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.scrollTop")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
+ <li>{{domxref("Element.scrollLeft")}}</li>
+ <li>{{domxref("Element.scrollTo()")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/scrollwidth/index.html b/files/ja/web/api/element/scrollwidth/index.html
deleted file mode 100644
index 5f3e98892d..0000000000
--- a/files/ja/web/api/element/scrollwidth/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Element.scrollWidth
-slug: Web/API/Element/scrollWidth
-tags:
-  - API
-  - CSSOM View
-  - Property
-  - Reference
-  - プロパティ
-translation_of: Web/API/Element/scrollWidth
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.scrollWidth</code></strong> は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。</p>
-
-<p><code>scrollWidth</code> の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 <code>scrollWidth</code> は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。</p>
-
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
-
-<p><code><var>xScrollWidth</var></code> はピクセル単位の <code><var>element</var></code> のコンテンツの幅です。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;title&gt;Example&lt;/title&gt;
-    &lt;style&gt;
-        div {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        #aDiv {
-            width: 100px;
-        }
-
-        button {
-            margin-bottom: 2em;
-        }
-    &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-    &lt;div id="aDiv"&gt;
-        FooBar-FooBar-FooBar-FooBar
-    &lt;/div&gt;
-    &lt;button id="aButton"&gt;
-        Check for overflow
-    &lt;/button&gt;
-
-    &lt;div id="anotherDiv"&gt;
-        FooBar-FooBar-FooBar-FooBar
-    &lt;/div&gt;
-    &lt;button id="anotherButton"&gt;
-        Check for overflow
-    &lt;/button&gt;
-&lt;/body&gt;
-&lt;script&gt;
-    var buttonOne = document.getElementById('aButton'),
-    buttonTwo = document.getElementById('anotherButton'),
-    divOne = document.getElementById('aDiv'),
-    divTwo = document.getElementById('anotherDiv');
-
-    //check to determine if an overflow is happening
-    function isOverflowing(element) {
-        return (element.scrollWidth &gt; element.offsetWidth);
-    }
-
-    function alertOverflow(element) {
-        if (isOverflowing(element)) {
-            alert('Contents are overflowing the container.');
-        } else {
-            alert('No overflows!');
-        }
-    }
-
-    buttonOne.addEventListener('click', function() {
-        alertOverflow(divOne);
-    });
-
-    buttonTwo.addEventListener('click', function() {
-        alertOverflow(divTwo);
-    });
-&lt;/script&gt;
-&lt;/html&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("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.scrollWidth")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.clientWidth")}}</li>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
diff --git a/files/ja/web/api/element/scrollwidth/index.md b/files/ja/web/api/element/scrollwidth/index.md
new file mode 100644
index 0000000000..5f3e98892d
--- /dev/null
+++ b/files/ja/web/api/element/scrollwidth/index.md
@@ -0,0 +1,125 @@
+---
+title: Element.scrollWidth
+slug: Web/API/Element/scrollWidth
+tags:
+  - API
+  - CSSOM View
+  - Property
+  - Reference
+  - プロパティ
+translation_of: Web/API/Element/scrollWidth
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><strong><code>Element.scrollWidth</code></strong> は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。</p>
+
+<p><code>scrollWidth</code> の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 <code>scrollWidth</code> は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。</p>
+
+<div class="note">
+<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
+
+<p><code><var>xScrollWidth</var></code> はピクセル単位の <code><var>element</var></code> のコンテンツの幅です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Example&lt;/title&gt;
+    &lt;style&gt;
+        div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #aDiv {
+            width: 100px;
+        }
+
+        button {
+            margin-bottom: 2em;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+    &lt;div id="aDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="aButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+
+    &lt;div id="anotherDiv"&gt;
+        FooBar-FooBar-FooBar-FooBar
+    &lt;/div&gt;
+    &lt;button id="anotherButton"&gt;
+        Check for overflow
+    &lt;/button&gt;
+&lt;/body&gt;
+&lt;script&gt;
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //check to determine if an overflow is happening
+    function isOverflowing(element) {
+        return (element.scrollWidth &gt; element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+        if (isOverflowing(element)) {
+            alert('Contents are overflowing the container.');
+        } else {
+            alert('No overflows!');
+        }
+    }
+
+    buttonOne.addEventListener('click', function() {
+        alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+        alertOverflow(divTwo);
+    });
+&lt;/script&gt;
+&lt;/html&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("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p>{{Compat("api.Element.scrollWidth")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.clientWidth")}}</li>
+ <li>{{domxref("HTMLElement.offsetWidth")}}</li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
+</ul>
diff --git a/files/ja/web/api/element/tagname/index.html b/files/ja/web/api/element/tagname/index.html
deleted file mode 100644
index e10c5acf43..0000000000
--- a/files/ja/web/api/element/tagname/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: element.tagName
-slug: Web/API/Element/tagName
-tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
-translation_of: Web/API/Element/tagName
----
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の名前を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>elementName</var> = element.tagName
-</pre>
-<ul>
- <li><code>elementName</code> : 現在の要素の名前を含む文字列</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p>
-<h2 id="Example" name="Example">例</h2>
-<p>以下のようなマークアップを想定します。</p>
-<pre class="brush:html">&lt;span id="born"&gt;When I was born...&lt;/span&gt;
-</pre>
-<p>上記 HTML に対し以下のスクリプトを実行した場合...</p>
-<pre class="brush:js">var span = document.getElementById("born");
-
-alert(span.tagName);
-</pre>
-<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
diff --git a/files/ja/web/api/element/tagname/index.md b/files/ja/web/api/element/tagname/index.md
new file mode 100644
index 0000000000..e10c5acf43
--- /dev/null
+++ b/files/ja/web/api/element/tagname/index.md
@@ -0,0 +1,36 @@
+---
+title: element.tagName
+slug: Web/API/Element/tagName
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+translation_of: Web/API/Element/tagName
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p>要素の名前を返します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>elementName</var> = element.tagName
+</pre>
+<ul>
+ <li><code>elementName</code> : 現在の要素の名前を含む文字列</li>
+</ul>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p>
+<h2 id="Example" name="Example">例</h2>
+<p>以下のようなマークアップを想定します。</p>
+<pre class="brush:html">&lt;span id="born"&gt;When I was born...&lt;/span&gt;
+</pre>
+<p>上記 HTML に対し以下のスクリプトを実行した場合...</p>
+<pre class="brush:js">var span = document.getElementById("born");
+
+alert(span.tagName);
+</pre>
+<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p>
+<h2 id="Specifications" name="Specifications">仕様</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf


From 10ba082441b43b1b232a2439ee2d181316bae8fa Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 28 Feb 2022 23:27:56 +0900
Subject: 2021/09/15 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/attributes/index.md       | 136 ++++++++-------------
 .../ja/web/api/element/childelementcount/index.md  |  39 +++---
 files/ja/web/api/element/children/index.md         |  47 ++++---
 files/ja/web/api/element/classname/index.md        |  82 ++++++++-----
 files/ja/web/api/element/clientheight/index.md     |  66 ++++------
 files/ja/web/api/element/clientwidth/index.md      |  64 ++++------
 files/ja/web/api/element/localname/index.md        |  96 +++++++--------
 files/ja/web/api/element/prefix/index.md           |  44 +++----
 files/ja/web/api/element/tagname/index.md          |  85 ++++++++-----
 9 files changed, 324 insertions(+), 335 deletions(-)

diff --git a/files/ja/web/api/element/attributes/index.md b/files/ja/web/api/element/attributes/index.md
index f3653263ef..05f85d4bf7 100644
--- a/files/ja/web/api/element/attributes/index.md
+++ b/files/ja/web/api/element/attributes/index.md
@@ -6,113 +6,85 @@ tags:
   - Attributes
   - DOM
   - Element
-  - Property
   - プロパティ
   - リファレンス
-  - 属性
+browser-compat: api.Element.attributes
 translation_of: Web/API/Element/attributes
 ---
-<p>{{ APIRef("DOM") }}</p>
+{{ APIRef("DOM") }}
 
-<p><strong><code>Element.attributes</code></strong> プロパティは、そのノードに登録された全ての属性ノードのコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 <code><strong>Array</strong></code> ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 <code><strong>attributes</strong></code> はその属性に関するあらゆる情報を表す文字列のキーと値の組です。</p>
+**`Element.attributes`** プロパティは、そのノードに登録されたすべての属性ノードの生きたコレクションを返却します。返却される値は {{domxref("NamedNodeMap")}} であり、 `Array` ではありません。つまり、 {{jsxref("Array")}} のメソッドは持っておらず、 {{domxref("Attr")}} ノードのインデックスはブラウザーによって変わる可能性があります。より正確に言うと、 `attributes` はその属性に関するあらゆる情報を表す文字列のキーと値の組です。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <em>attr</em> =<em> element</em>.attributes;
-</pre>
+```js
+var attr = element.attributes;
+```
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="Basic_examples" name="Basic_examples">基本的な例</h3>
+### 基本的な例
 
-<pre class="brush: js">// ドキュメント内の最初の &lt;p&gt; 要素を取得する
+```js
+// 文書内の最初の <p> 要素を取得
 var para = document.getElementsByTagName("p")[0];
-var atts = para.attributes;</pre>
+var atts = para.attributes;
+```
 
-<h3 id="Enumerating_elements_attributes" name="Enumerating_elements_attributes">要素の属性を列挙する</h3>
+### 要素の属性を列挙する
 
-<p>ある要素の全ての属性を走査したい時には、インデックスを使うと便利です。<br>
- 次の例では、 "paragraph" を id に持つ要素の全ての属性ノードを走査し、その属性の値を表示します。</p>
+ある要素のすべての属性を走査したい場合は、数値のインデックスを使うと便利です。
+次の例では、 "paragraph" を id に持つ要素のすべての属性ノードを走査し、その属性の値を表示します。
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
+```html
+<!DOCTYPE html>
 
-&lt;html&gt;
+<html>
 
- &lt;head&gt;
-  &lt;title&gt;Attributes example&lt;/title&gt;
-  &lt;script type="text/javascript"&gt;
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
    function listAttributes() {
      var paragraph = document.getElementById("paragraph");
      var result = document.getElementById("result");
 
-     // まず、最初の段落(p1)がなんらかの属性を持っているか確かめよう
+     // まず、段落に属性があるか確かめる
      if (paragraph.hasAttributes()) {
        var attrs = paragraph.attributes;
        var output = "";
-       for(var i = attrs.length - 1; i &gt;= 0; i--) {
-         output += attrs[i].name + "-&gt;" + attrs[i].value;
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
        }
        result.value = output;
      } else {
-       result.value = "No attributes to show";
+       result.value = "表示する属性はありません";
      }
    }
-  &lt;/script&gt;
- &lt;/head&gt;
-
-&lt;body&gt;
- &lt;p id="paragraph" style="color: green;"&gt;Sample Paragraph&lt;/p&gt;
- &lt;form action=""&gt;
-  &lt;p&gt;
-    &lt;input type="button" value="Show first attribute name and value"
-      onclick="listAttributes();"&gt;
-    &lt;input id="result" type="text" value=""&gt;
-  &lt;/p&gt;
- &lt;/form&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Specifications" 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-element-attributes', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>{{SpecName('DOM3 Core')}} 以降、 {{domxref("Node")}} から {{domxref("Element")}} へ移動</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM3 Core')}}</td>
-   <td>{{SpecName('DOM2 Core')}} から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM2 Core')}}</td>
-   <td>{{SpecName('DOM1')}}から変更無し</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}</td>
-   <td>{{Spec2('DOM1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.attributes")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>返却される値のインターフェースである {{domxref("NamedNodeMap")}}</li>
- <li><a href="http://www.quirksmode.org/dom/w3c_core.html#attributes">quirksmode</a> におけるブラウザー間の互換性への配慮</li>
-</ul>
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">サンプルの段落</p>
+ <form action="">
+  <p>
+    <input type="button" value="Show first attribute name and value"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 返却される値のインターフェースである {{domxref("NamedNodeMap")}}
+- [quirksmode](https://www.quirksmode.org/dom/w3c_core.html#attributes) におけるブラウザー間の互換性の考慮事項
diff --git a/files/ja/web/api/element/childelementcount/index.md b/files/ja/web/api/element/childelementcount/index.md
index c3520c9a31..1e869a7dc2 100644
--- a/files/ja/web/api/element/childelementcount/index.md
+++ b/files/ja/web/api/element/childelementcount/index.md
@@ -4,39 +4,40 @@ slug: Web/API/Element/childElementCount
 tags:
   - API
   - DOM
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.childElementCount
 translation_of: Web/API/Element/childElementCount
 original_slug: Web/API/ParentNode/childElementCount
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p>
+**`Element.childElementCount`** は読み取り専用のプロパティで、この要素の子要素の数を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">element.childElementCount;</pre>
+```js
+element.childElementCount;
+```
 
-<h2 id="Example">例</h2>
+## 例
 
-<pre class="brush:js">let sidebar = document.getElementById('sidebar');
-if (sidebar.childElementCount &gt; 0) {
-  // 何もしない
+```js
+let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount > 0) {
+  // 何かを行う
 }
-</pre>
+```
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Document.childElementCount")}}</li>
-  <li>{{domxref("DocumentFragment.childElementCount")}}</li>
-</ul>
+- {{domxref("Document.childElementCount")}}
+- {{domxref("DocumentFragment.childElementCount")}}
diff --git a/files/ja/web/api/element/children/index.md b/files/ja/web/api/element/children/index.md
index 5dd887af4f..01e0dc6627 100644
--- a/files/ja/web/api/element/children/index.md
+++ b/files/ja/web/api/element/children/index.md
@@ -6,53 +6,50 @@ tags:
   - DOM
   - Element
   - HTMLCollection
-  - Property
+  - プロパティ
   - children
 browser-compat: api.Element.children
 translation_of: Web/API/Element/children
 original_slug: Web/API/ParentNode/children
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p>
+**`children`** は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。
 
-<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p>
+`Element.children` は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
-// Getter
+```js
+// ゲッター
 collection = myElement.children;
 
-// No setter; read-only property
-</pre>
+// セッターはありません。読み取り専用プロパティです。
+```
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p>
+生きた {{ domxref("HTMLCollection") }} で、 `node` の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。
 
-<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p>
+ノードが子要素を持たない場合、 `children` は要素を含まず、`length` は `0` です。
 
-<h2 id="Example">例 </h2>
+## 例
 
-<pre class="brush: js">const myElement = document.getElementById('foo');
-for (let i = 0; i &lt; myElement.children.length; i++) {
+```js
+const myElement = document.getElementById('foo');
+for (let i = 0; i < myElement.children.length; i++) {
   console.log(myElement.children[i].tagName);
 }
-</pre>
+```
 
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>
-    {{domxref("Node.childNodes")}}
-  </li>
-</ul>
+- {{domxref("Node.childNodes")}}
diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md
index 00f15100e7..bbdbcc000b 100644
--- a/files/ja/web/api/element/classname/index.md
+++ b/files/ja/web/api/element/classname/index.md
@@ -1,35 +1,61 @@
 ---
-title: element.className
+title: Element.className
 slug: Web/API/Element/className
 tags:
+  - API
   - DOM
   - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.className
 translation_of: Web/API/Element/className
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className;
-<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
-<ul>
- <li><var>cName</var> : クラス名（文字列）</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("element.classList")}}</li>
-</ul>
+{{APIRef("DOM")}}
+
+**`className`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)の値を取得したり設定したりします。
+
+## 構文
+
+```js
+var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+```
+
+- `cName` は文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。
+
+## 例
+
+```js
+let el = document.getElementById('item');
+
+if (el.className === 'active'){
+  el.className = 'inactive';
+} else {
+  el.className = 'active';
+}
+```
+
+## メモ
+
+このプロパティでは、 `className` という名前が `class` の代わりに使用されています。
+これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。
+
+`className` は {{domxref("SVGAnimatedString")}} のインスタンスにも、 `element` が {{domxref("SVGElement")}} であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は {{domxref("Element.getAttribute")}} や {{domxref("Element.setAttribute")}} を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)が空であった場合、 {{domxref("Element.getAttribute")}} は`""` ではなく [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) を返すことに注意してください。
+
+```js
+elm.setAttribute('class', elm.getAttribute('class'))
+```
+
+> **Note:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("element.classList")}}
diff --git a/files/ja/web/api/element/clientheight/index.md b/files/ja/web/api/element/clientheight/index.md
index 4cde36518d..15d1cc596a 100644
--- a/files/ja/web/api/element/clientheight/index.md
+++ b/files/ja/web/api/element/clientheight/index.md
@@ -5,63 +5,47 @@ tags:
   - API
   - CSSOM View
   - NeedsMarkupWork
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientHeight
 translation_of: Web/API/Element/clientHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.clientHeight</code></strong> は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 水平スクロールバーは含みません。</p>
+**`Element.clientHeight`** は読み取り専用のプロパティで、 CSS のない要素やインラインレイアウトボックスではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）水平スクロールバーは含みません。
 
-<p><code>clientHeight</code> は CSS <code>height</code> + CSS <code>padding</code> - 水平スクロールバーの高さ(height) (もしあれば) として計算できます。</p>
+`clientHeight` は CSS `height` + CSS `padding` - 水平スクロールバーの高さ (もしあれば) として計算できます。
 
-<p><code>clientHeight</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーを除いた) ビューポートの高さが返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight">これは <code>clientHeight</code> の特例です</a>。</p>
+`clientHeight` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientHeight` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientheight)。
 
-<div class="note">
-<p><strong>注:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox notranslate">var <var>intElemClientHeight</var> = <var>element</var>.clientHeight;</pre>
+```js
+var intElemClientHeight = element.clientHeight;
+```
 
-<p><code><var>intElemClientHeight</var></code> は <code><var>element</var></code> の <code>clientHeight</code> をピクセル単位で表す整数値です。 <code>clientHeight</code> プロパティは読み取り専用です。</p>
+`intElemClientHeight` は `element` の `clientHeight` をピクセル単位で表す整数値です。 `clientHeight` プロパティは読み取り専用です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-clientheight', 'clientHeight')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">注</h3>
+### メモ
 
-<p><code>clientHeight</code> は Internet Explorer オブジェクトモデルで導入されたプロパティです。</p>
+`clientHeight` は Internet Explorer オブジェクトモデルで導入されたプロパティです。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.clientHeight")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li>{{domxref("Element.scrollHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+- {{domxref("HTMLElement.offsetHeight")}}
+- {{domxref("Element.scrollHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/clientwidth/index.md b/files/ja/web/api/element/clientwidth/index.md
index 47753e0077..af5d5481ca 100644
--- a/files/ja/web/api/element/clientwidth/index.md
+++ b/files/ja/web/api/element/clientwidth/index.md
@@ -4,62 +4,46 @@ slug: Web/API/Element/clientWidth
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
+  - NeedsMarkupWork
+  - リファレンス
   - プロパティ
+browser-compat: api.Element.clientWidth
 translation_of: Web/API/Element/clientWidth
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.clientWidth</strong></code> プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、 (もしあれば) 垂直スクロールバーは含みません。</p>
+**`Element.clientWidth`** プロパティは、インライン要素や CSS のない要素ではゼロになります。それ以外では、要素の内側の寸法をピクセル単位で表します。パディングは含みますが、境界、マージン、（もしあれば）垂直スクロールバーは含みません。
 
-<p><code>clientWidth</code> がルート要素 (<code>&lt;html&gt;</code> 要素) (または文書が後方互換モードである場合は <code>&lt;body&gt;</code>) に使用された場合、 (スクロールバーの幅を除く) ビューポートの幅が返されます。<a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth">これは <code>clientWidth</code></a> の特例です。</p>
+`clientWidth` がルート要素（`<html>` 要素）（または文書が後方互換モードである場合は `<body>`）に使用された場合、（スクロールバーを除いた）ビューポートの高さが返されます。[これは `clientWidth` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-clientwidth)。
 
-<div class="note">
-<p><strong>メモ:</strong> このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>intElemClientWidth</var> = <var>element</var>.clientWidth;</pre>
+```js
+var intElemClientWidth = element.clientWidth;
+```
 
-<p><code><var>intElemClientWidth</var></code> は <code><var>element</var></code> の <code>clientWidth</code> をピクセル数で表す整数値です。 <code>clientWidth</code> プロパティは読み取り専用です。</p>
+`intElemClientWidth` は `element` の `clientWidth` をピクセル数で表す整数値です。 `clientWidth` プロパティは読み取り専用です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p>
+![](dimensions-client.png)
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">メモ</h3>
+## メモ
 
-<p><code>clientWidth</code> は MS IE DHTML オブジェクトモデルにおいて初めて導入されました。</p>
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.clientWidth")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li>{{domxref("Element.scrollWidth")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+- {{domxref("HTMLElement.offsetWidth")}}
+- {{domxref("Element.scrollWidth")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
diff --git a/files/ja/web/api/element/localname/index.md b/files/ja/web/api/element/localname/index.md
index b92152fbfa..c676607ad5 100644
--- a/files/ja/web/api/element/localname/index.md
+++ b/files/ja/web/api/element/localname/index.md
@@ -6,82 +6,80 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.localName
 translation_of: Web/API/Element/localName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.localName</code></strong> は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。</p>
+**`Element.localName`** は読み取り専用プロパティで、要素の修飾名のローカル部分を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js"><var>name</var> = <var>element</var>.localName
-</pre>
+```js
+name = element.localName
+```
 
-<h3 id="Return_value">返値</h3>
+### 返値
 
-<p>要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
-</p>
+要素の修飾名の、ローカル部分を示す {{domxref("DOMString")}} です。
 
-<h2 id="Example">例</h2>
+## 例
 
-<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような、XML のコンテンツタイプで送出される必要があります。)</p>
+(`text/xml` や `application/xhtml+xml` のような、XML のコンテンツタイプで送出される必要があります。)
 
-<pre class="brush:xml">&lt;html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:svg="http://www.w3.org/2000/svg"&gt;
-&lt;head&gt;
-  &lt;script type="application/javascript"&gt;&lt;![CDATA[
+```xml
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
   function test() {
     var text = document.getElementById('text');
     var circle = document.getElementById('circle');
 
-    text.value = "&lt;svg:circle&gt; has:\n" +
+    text.value = "<svg:circle> has:\n" +
                  "localName = '" + circle.localName + "'\n" +
                  "namespaceURI = '" + circle.namespaceURI + "'";
   }
-  ]]&gt;&lt;/script&gt;
-&lt;/head&gt;
-&lt;body onload="test()"&gt;
-  &lt;svg:svg version="1.1"
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
     width="100px" height="100px"
-    viewBox="0 0 100 100"&gt;
-    &lt;svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/&gt;
-  &lt;/svg:svg&gt;
-  &lt;textarea id="text" rows="4" cols="55"/&gt;
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+```
 
-<h2 id="Notes">注</h2>
+## メモ
 
-<p>ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、<code>ecomm:partners</code> という修飾名において、 <code>partners</code> はローカル名、<code>ecomm</code> は接頭辞です。</p>
+ノードのローカル名とは、ノードの修飾名の、コロンの後に続く部分です。 XML において修飾名は、一般に特定の XML 文書の名前空間の一部として使われます。例えば、`ecomm:partners` という修飾名において、 `partners` はローカル名、`ecomm` は接頭辞です。
 
-<pre class="brush:xml">&lt;ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"&gt;
-  &lt;ecomm:partners&gt;
-    &lt;ecomm:partner id="1001"&gt;Tony's Syrup Warehouse
-    &lt;/ecomm:partner&gt;
-  &lt;/ecomm:partner&gt;
-&lt;/ecomm:business&gt;
-</pre>
+```xml
+<ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+```
 
-<div class="note">
-<p><strong>注: </strong>{{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML要素と XHTML DOM における XHTML要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。</p>
-</div>
+> **Note:** {{Gecko("1.9.2")}} 以前、このプロパティは、HTML DOM における HTML 要素ではローカル名を大文字で返していました（XML DOM における XHTML 要素とは対照的に）。最新バージョンでは HTML5 に従い、このプロパティは内部の DOM ストレージの場合、 HTML DOM における HTML 要素と XHTML DOM における XHTML 要素のいずれも、小文字で返します。{{domxref("element.tagName","tagName")}} プロパティは引き続き、 HTML DOM における HTML 要素では大文字で返します。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.prefix")}}</li>
-  <li>{{domxref("Attr.localName")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.localName")}}
diff --git a/files/ja/web/api/element/prefix/index.md b/files/ja/web/api/element/prefix/index.md
index b2baf67888..e45b334480 100644
--- a/files/ja/web/api/element/prefix/index.md
+++ b/files/ja/web/api/element/prefix/index.md
@@ -6,43 +6,43 @@ tags:
 - DOM
 - NeedsBrowserCompatibility
 - NeedsMobileBrowserCompatibility
-- Property
-- Reference
+- プロパティ
+- リファレンス
 browser-compat: api.Element.prefix
 translation_of: Web/API/Element/prefix
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.prefix</strong></code> は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は <code>null</code> を返します。</p>
+**`Element.prefix`** は読み取り専用プロパティで、指定された要素の名前空間の接頭辞を、接頭辞が指定されていない場合は `null` を返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js"><var>string</var> = <var>element</var>.prefix
-</pre>
+```js
+string = element.prefix
+```
 
-<h2 id="Examples">例</h2>
+## 例
 
-<p>次の例はコンソールに "x" を記録します。</p>
+次の例はコンソールに "x" を記録します。
 
-<pre class="brush:xml">&lt;x:div onclick="console.log(this.prefix)"/&gt;
-</pre>
+```xml
+<x:div onclick="console.log(this.prefix)"/>
+```
 
-<h2 id="Notes">注</h2>
+## 注
 
-<p>これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。</p>
+これは、名前空間を認識するパーサーを使用しているとき、すなわち、文書が XML の MIME タイプで送信されたときのみ動作します。 HTML 文書では動作しません。
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.namespaceURI")}}</li>
-  <li>{{domxref("Element.localName")}}</li>
-  <li>{{domxref("Attr.prefix")}}</li>
-</ul>
+- {{domxref("Element.namespaceURI")}}
+- {{domxref("Element.localName")}}
+- {{domxref("Attr.prefix")}}
diff --git a/files/ja/web/api/element/tagname/index.md b/files/ja/web/api/element/tagname/index.md
index e10c5acf43..520ec73461 100644
--- a/files/ja/web/api/element/tagname/index.md
+++ b/files/ja/web/api/element/tagname/index.md
@@ -1,36 +1,63 @@
 ---
-title: element.tagName
+title: Element.tagName
 slug: Web/API/Element/tagName
 tags:
+  - API
   - DOM
+  - DOM リファレンス
+  - Element
   - Gecko
-  - Gecko DOM Reference
+  - NeedsBrowserCompatibility
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+  - tagName
+browser-compat: api.Element.tagName
 translation_of: Web/API/Element/tagName
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の名前を返します。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>elementName</var> = element.tagName
-</pre>
-<ul>
- <li><code>elementName</code> : 現在の要素の名前を含む文字列</li>
-</ul>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>XML (および XHTML など XML ベースの言語) では、tagName は大文字・小文字が保たれます。HTML では、<code>tagName</code> は標準的な大文字で要素名を返します。 <code>tagName</code> の値は <a href="/ja/docs/Web/API/Node.nodeName">nodeName</a> の値と同じになります。</p>
-<h2 id="Example" name="Example">例</h2>
-<p>以下のようなマークアップを想定します。</p>
-<pre class="brush:html">&lt;span id="born"&gt;When I was born...&lt;/span&gt;
-</pre>
-<p>上記 HTML に対し以下のスクリプトを実行した場合...</p>
-<pre class="brush:js">var span = document.getElementById("born");
-
-alert(span.tagName);
-</pre>
-<p>XHTML (および他の XML 形式) では、「span」という警告ダイアログが表示されます。HTML では、その代わりに「SPAN」と表示されます。</p>
-<h2 id="Specifications" name="Specifications">仕様</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">DOM Level 2 Core: tagName</a></li>
- <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li>
-</ul>
+{{ApiRef("DOM")}}
+
+**`tagName`** は {{domxref("Element")}} インターフェイスのプロパティで、呼び出された要素のタグ名を返します。
+
+例えば、この要素が {{HTMLElement("img")}} であれば、 `tagName` プロパティは `"IMG"` となります（HTML 文書の場合。 XML/XHTML 文書では大文字小文字が違うかもしれません）。
+
+## 構文
+
+```js
+elementName = Element.tagName;
+```
+
+### 値
+
+この要素のタグ名を示す文字列です。文字列が大文字であるかどうかは、文書型によって変わります。
+
+- HTML 文書を表す DOM ツリーでは、タグ名は常に大文字に正規化されます。例えば、 `tagName` が {{HTMLElement("div")}} 要素で呼び出された場合は、 `"DIV"` を返します。
+- XML の DOM ツリー内にある要素のタグ名は、元の XML ファイルに書かれているのと大文字小文字が同じになります。 XML 文書に `"<SomeTag>"` タグがあった場合、 `tagName` プロパティの値は `"SomeTag"` になります。
+
+{{domxref("Element")}} オブジェクトにおいては、 `tagName` の値は要素オブジェクトの継承元である {{domxref("Node")}} の {{domxref("Node.nodeName", "nodeName")}} プロパティの値と同じになります。
+
+## 例
+
+### HTML
+
+```html
+<span id="born">When I was born...</span>
+```
+
+### JavaScript
+
+```js
+var span = document.getElementById("born");
+console.log(span.tagName);
+```
+
+XHTML (および他の XML 形式) では、元の大文字小文字が保持されるので、元のタグ名が小文字で生成されている場合は `"span"` が出力されます。
+HTML では、元の文書を生成したときに大文字小文字のどちらが使われたかに関わらず、 `"SPAN"` と出力されます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 3382aad40019bc130174bcfecea68884bc4922a2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 00:28:03 +0900
Subject: 2022/01/25 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/clientleft/index.md | 115 ++++++++++++---------------
 files/ja/web/api/element/clienttop/index.md  | 104 ++++++++++++++++--------
 2 files changed, 123 insertions(+), 96 deletions(-)

diff --git a/files/ja/web/api/element/clientleft/index.md b/files/ja/web/api/element/clientleft/index.md
index 7a17600640..0f7ccf8fb9 100644
--- a/files/ja/web/api/element/clientleft/index.md
+++ b/files/ja/web/api/element/clientleft/index.md
@@ -2,85 +2,72 @@
 title: Element.clientLeft
 slug: Web/API/Element/clientLeft
 tags:
-- API
-- CSSOM View
-- NeedsAgnostify
-- NeedsMarkupWork
-- Property
-- Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
 browser-compat: api.Element.clientLeft
 translation_of: Web/API/Element/clientLeft
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p>要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 <code>clientLeft</code> は、左マージンまたは左パディングを含みません。 <code>clientLeft</code> は読み取り専用です。</p>
+要素の左境界の幅をピクセル数で表します。これは、要素の書字方向が右書きで、オーバーフローがある場合、左の垂直スクロールバーがレンダリングされると垂直スクロールバーの幅を含みます。 `clientLeft` は、左マージンまたは左パディングを含みません。 `clientLeft` は読み取り専用です。
 
-<p><a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> 設定項目</a>が 1 または 3 に設定されており、書字方向が RTL に設定されている場合、<strong>垂直スクロールバーは左側に配置され</strong>、これが clientLeft の計算方法に影響します。</p>
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
 
-<div class="note">
-	<p><strong>注:</strong> このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
-	</p>
-</div>
+> **Note:** 要素に `display: inline` が設定されている場合、境界の幅に関わらず `clientLeft` は `0` を返します。
 
-<p style="height: 5px !important; margin: 0px;"></p>
+## 構文
 
-<div class="note">
-	<p><strong>注:</strong> 要素に
-		<code>display: inline</code> が設定されている場合、境界の幅に関わらず <code>clientLeft</code> は <code>0</code> を返します。</p>
-</div>
+```js
+var left = element.clientLeft;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-left` が 24px の黒になっています。 `clientLeft` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
 
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">var <var>left</var> = <var>element</var>.clientLeft;
-</pre>
-
-<h2 id="Example">例</h2>
-
-<div id="offsetContainer"
-	style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-	<div id="idDiv"
-		style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-		<p id="PaddingTopLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-top</p>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-			incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-			nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-		</p>
-
-		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-			fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-			culpa qui officia deserunt mollit anim id est laborum.</p>
-
-		<p id="PaddingBottomLabel"
-			style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">
-			padding-bottom</p>
-	</div>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong>
-	<strong
-		style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong>
-	<em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em>
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
 </div>
+```
 
-<h2 id="Specifications">仕様書</h2>
+### CSS
 
-{{Specifications}}
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+#contained {
+  margin: 1rem;
+  border-left: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
 
-<p>{{Compat}}</p>
+### 結果
 
-<h2 id="Notes">注</h2>
+{{EmbedLiveSample("Example", 400, 350)}}
 
-<p><code>clientLeft</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
+## 仕様書
+
+{{Specifications}}
 
-<p>要素に設定された書字方向が右書きである場合の垂直スクロールバーの位置は、 <a class="external"	href="http://kb.mozillazine.org/Layout.scrollbar.side"><code>layout.scrollbar.side</code> の設定に依存します</a></p>
+## ブラウザーの互換性
 
-<p><a href="/ja/Gecko">Gecko</a> ベースのアプリケーションは、 <code>clientLeft</code> を Gecko 1.9 (<a href="/ja/Firefox_3">Firefox 3</a>、 {{
-	Bug(111207) }} による実装) から実装しました。このプロパティは Firefox 2 以前では対応していません。</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/clienttop/index.md b/files/ja/web/api/element/clienttop/index.md
index 95ae5ad2b3..1438ca59a4 100644
--- a/files/ja/web/api/element/clienttop/index.md
+++ b/files/ja/web/api/element/clienttop/index.md
@@ -1,37 +1,77 @@
 ---
-title: element.clientTop
+title: Element.clientTop
 slug: Web/API/Element/clientTop
 tags:
-  - DOM
-  - Gecko
-  - Gecko DOM Reference
+  - API
+  - CSSOM View
+  - NeedsAgnostify
+  - NeedsMarkupWork
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.clientTop
 translation_of: Web/API/Element/clientTop
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p>要素の上ボーダーの幅のピクセル数です。上マージン、及び、上パディングは含みません。<code>clientTop</code> は読込専用です。</p>
-<p><a href="/ja/docs/Gecko">Gecko</a> ベースアプリケーションは、 Gecko 1.9 (<a href="/ja/docs/Mozilla/Firefox/Releases/3">Firefox 3</a>、{{Bug("111207")}} で実装) から <code>clientTop</code> をサポートします。このプロパティは、Firefox 2 以前ではサポートされません。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>top</var> = <var>element</var>.clientTop;
-</pre>
-<h2 id="Example" name="Example">例</h2>
-<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;">
- <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-  <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-  <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
-  <p><span style="float: right;"><img height="69" src="https://mdn.mozillademos.org/files/143/BirmanCat.jpg" width="129"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
-  <p>Cat image and text coming from <a href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p>
-  <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
- </div>
- <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{mediawiki.external('if IE')}}&gt;&lt;span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-left&lt;/span&gt;&lt;span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-left&lt;/span&gt;&lt;span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;padding-left&lt;/span&gt;&lt;span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;"&gt;padding-right&lt;/span&gt;&lt;span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;border-right&lt;/span&gt;&lt;span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;"&gt;margin-right&lt;/span&gt;&lt;!{{mediawiki.external('endif')}}</span></div>
-<p style="margin-top: 270px;"><img height="302" src="https://mdn.mozillademos.org/files/263/clientTop.png" width="548"></p>
-<h2 id="Specification" name="Specification">仕様</h2>
-<p>W3C の仕様の一部ではありません。</p>
-<h2 id="Notes" name="Notes">注記</h2>
-<p><code>clientTop</code> は MS IE DHTML オブジェクトモデルで最初に導入されました。</p>
-<h2 id="References" name="References">リファレンス</h2>
-<ul>
- <li><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a>（<a href="http://msdn.microsoft.com/library/ja/default.asp?url=/library/ja/jpisdk/dhtml/references/properties/clientTop.asp">日本語版</a>）</li>
- <li><a href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a>（<a href="http://msdn.microsoft.com/library/ja/jpisdk/dhtml/measure/measuring.asp?FRAME=true#chp_measuring">日本語版</a>）</li>
-</ul>
+{{ APIRef("DOM") }}
+
+要素の上境界の幅をピクセル数で表します。これは要素の読み取り専用で整数型のプロパティです。
+
+たまたま、 2 つの位置（`offsetTop` とクライアント領域の上端）の間にあるのは、要素の境界だけです。これは、 `offsetTop` が（マージンではなく）境界の上端の位置を示し、クライアント領域は境界の直下から始まるからです（クライアント領域はパディングを含みます）。したがって、 **clientTop** 値は常に "border-top-width" に対する `.getComputedStyle()` 値の整数部分と一致します。（実際には Math.round(parseFloat()) かもしれません。）例えば、計算された "border-top-width" が 0 の場合、 **`clientTop`** も 0 になります。
+
+> **Note:** このプロパティは値を整数に丸めます。小数の値が必要な場合は、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+
+## 構文
+
+```js
+var top = element.clientTop;
+```
+
+## 例
+
+次の例では、クライアント領域の背景が白で、 `border-top` が 24px の黒になっています。 `clientTop` の値は、マージン（黄色）領域の末端から、パディングとコンテンツ領域（白色）が始まるまでの距離、つまり 24px となります。
+
+### HTML
+
+```html
+<div id="container">
+  <div id="contained">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+
+#container {
+  margin: 3rem;
+  background-color: rgb(255, 255, 204);
+  border: 4px dashed black;
+}
+
+#contained {
+  margin: 1rem;
+  border-top: 24px black solid;
+  padding: 0px 28px;
+  overflow: auto;
+  background-color: white;
+}
+```
+
+### 結果
+
+{{EmbedLiveSample("Example", 400, 350)}}
+
+## メモ
+
+`clientTop` は MS IE DHTML オブジェクトモデルで最初に導入されました。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From da6cac831bf3c0dbb0e744f8cb92448932b515bf Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 00:57:33 +0900
Subject: 2022/01/14 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/id/index.md | 63 +++++++++++++++---------------------
 1 file changed, 26 insertions(+), 37 deletions(-)

diff --git a/files/ja/web/api/element/id/index.md b/files/ja/web/api/element/id/index.md
index 46cf1c1a9e..9cd313c8ca 100644
--- a/files/ja/web/api/element/id/index.md
+++ b/files/ja/web/api/element/id/index.md
@@ -1,57 +1,46 @@
 ---
-title: element.id
+title: Element.id
 slug: Web/API/Element/id
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.id
 translation_of: Web/API/Element/id
 ---
-<div>{{ApiRef}}</div>
+{{ ApiRef("DOM") }}
 
-<h2 id="Summary" name="Summary">概要</h2>
+**`id`** は {{domxref("Element")}} インターフェイスのプロパティで、グローバル属性の [**`id`**](/ja/docs/Web/HTML/Global_attributes/id) を反映した要素の識別子を表します。
 
-<p>要素の 識別子 (identifier) を取得 / 設定します。</p>
+`id` の値が空文字列でない場合は、文書内で固有でなければなりません。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+`id` はよく {{domxref("Document.getElementById()", "getElementById()")}} で特定の要素を受け取るために使用します。他の一般的な用途としては、要素の [ID をセレクターとして](/ja/docs/Web/CSS/ID_selectors) [CSS](/ja/docs/Web/CSS) で文書をスタイル付けするために使用されます。
 
-<pre class="syntaxbox"><var>idStr</var> =<em>element</em>.id; // 取得
-<em>element</em>.id = <var>idStr</var>; // 設定
-</pre>
+> **Note:** 識別子は大文字小文字の区別がありますが、大文字小文字の区別だけで見分ける ID を作ることは避けてください。
 
-<h2 id="Notes" name="Notes">注意</h2>
 
-<p>ID は文書内でユニークでなくてはならず、{{domxref("document.getElementById")}} を使って要素を取り出すために使われることがあります。仮に文法を無視して同一 <code>id</code> の要素が文書内に複数存在する場合、このメソッドは最初の要素を取得します。</p>
+## 構文
 
-<p>document によっては(特に <a href="/ja/docs/Web/HTML">HTML</a> 、 <a href="/ja/docs/XUL">XUL</a> 、<a href="/ja/docs/SVG">SVG</a>)、要素の <code>id</code> は次のような要素の属性として指定することができます: <code>&lt;div id="part_3"&gt;</code>.</p>
+```js
+var idStr = element.id; // id を取得
+```
 
-<p>但しカスタム XML 文書に於いては、<code>id</code> 属性の型を DOCTYPE で定められたとおりに正しく指定しなければなりません。詳細については『<a href="http://blog.bitflux.ch/wiki/GetElementById_Pitfalls">getElementById Pitfalls (getElementById の落とし穴)</a>』をご覧下さい。</p>
+```js
+element.id = 'newid'; // id を設定
+```
 
-<p><code>id</code> 属性は、<a href="/ja/docs/CSS">スタイルシート</a>でスタイルを適用するために要素を参照する要素でも用いられます。スタイルシート内から特定の要素を参照するには、HTML に指定した <code>id</code> 属性値の先頭に <code>#</code> を付けます。</p>
+- `idStr` はこの要素の識別子です。
 
-<pre class="brush:css">#thisID {
-  background: darkblue;
-  color; ghostwhite;
-}</pre>
+## 仕様書
 
-<p><code>id</code> 属性はケースセンシティブ……即ち、大文字と小文字を区別するという点に注意して下さい。つまり、 "<code>thisID</code>" と "<code>ThisID</code>" は別の <code>id</code> として扱われ、それぞれ別の要素を指し示す識別子となります (参照 : <a href="/ja/docs/Case_Sensitivity_in_class_and_id_Names">class 属性 / id 属性 / name 属性はケースセンシティブである</a>)</p>
+{{Specifications}}
 
-<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('DOM2 HTML', 'html.html#ID-63534901', 'id')}}</td>
-   <td>{{Spec2('DOM2 HTML')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+{{Compat}}
 
-<p> </p>
+## 関連情報
+
+- DOM の [**id**](/ja/docs/Web/HTML/Global_attributes/id) グローバル属性
-- 
cgit v1.2.3-54-g00ecf


From 239b41906761fa70d23244f8bf068391e3e6366a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:20:15 +0900
Subject: 2022/01/22 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/namespaceuri/index.md | 79 +++++++++++++++++---------
 1 file changed, 51 insertions(+), 28 deletions(-)

diff --git a/files/ja/web/api/element/namespaceuri/index.md b/files/ja/web/api/element/namespaceuri/index.md
index ebf84fb77c..cd898c602d 100644
--- a/files/ja/web/api/element/namespaceuri/index.md
+++ b/files/ja/web/api/element/namespaceuri/index.md
@@ -1,35 +1,58 @@
 ---
-title: Node.namespaceURI
+title: Element.namespaceURI
 slug: Web/API/Element/namespaceURI
 tags:
+  - API
   - DOM
-  - Gecko
-  - Gecko DOM Reference
-  - 要更新
-translation_of: Web/API/Node/namespaceURI
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.namespaceURI
+translation_of: Web/API/Element/namespaceURI
 original_slug: Web/API/Node/namespaceURI
 ---
-<p>{{ ApiRef() }}</p>
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p>
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI
-</pre>
-<ul>
- <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li>
-</ul>
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-<p>この断片では、ノードの <a href="/ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code>&lt;browser/&gt;</code> と理解されます。</p>
-<pre>if (node.localName == "browser" &amp;&amp;
-    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
-  // これは XUL browser です。
+{{APIRef("DOM")}}
+
+**`Element.namespaceURI`** は読み取り専用のプロパティで、この要素の名前空間 URI を返します。この要素が名前空間に所属していない場合は `null` を返します。
+
+## 構文
+
+```js
+namespace = element.namespaceURI
+```
+
+## 例
+
+このスニペットでは、ある要素が {{domxref("Element.localName", "localName")}} と `namespaceURI` で調べます。この `namespaceURI` は XUL の名前空間を返し、 `localName` は "browser" を返すので、このノードは XUL の `<browser/>` と解釈されます。
+
+```js
+if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // これは XUL browser です
 }
-</pre>
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
-<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p>
-<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="/ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p>
-<p>DOM Level 2 の <a href="/ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p>
-<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p>
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p>
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p>
+```
+
+## メモ
+
+これは、スコープ内の名前空間宣言を調べて名前空間を検索した結果であり、計算値ではありません。ノードの名前空間 URI は、ノードの生成時に凍結されます。
+
+Firefox 3.5 以前では、 HTML 文書中の HTML 要素の名前空間 URI は `null` です。それ以降のバージョンでは、 HTML5 に準拠し、 XHTML と同様に [`http://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) となります。
+
+DOM Level 2 のメソッド [document.createElementNS](/en-US/docs/Web/API/Document/createElementNS) を用いると、指定した `namespaceURI` を持つ要素を作成することができる。
+
+DOM はそれ自体で名前空間の検証を行ったり強制したりすることはありません。必要な検証を行うのは DOM アプリケーションに任されています。また、一度特定の要素に関連付けられた名前空間接頭辞は、変更することができないことに注意しましょう。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.localName")}}
+- {{domxref("Element.prefix")}}
+- {{domxref("Attr.namespaceURI")}}
-- 
cgit v1.2.3-54-g00ecf


From f1de0acba8891d05407df18d01153c1f368533b2 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:33:48 +0900
Subject: 2021/12/08 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/outerhtml/index.md | 184 +++++++++++++++-------------
 1 file changed, 99 insertions(+), 85 deletions(-)

diff --git a/files/ja/web/api/element/outerhtml/index.md b/files/ja/web/api/element/outerhtml/index.md
index 1b476879bf..3b6278d25e 100644
--- a/files/ja/web/api/element/outerhtml/index.md
+++ b/files/ja/web/api/element/outerhtml/index.md
@@ -4,115 +4,129 @@ slug: Web/API/Element/outerHTML
 tags:
   - API
   - DOM
-  - DOM Parsing
+  - DOM 解釈
   - Element
+  - NeedsMobileBrowserCompatibility
   - Parsing
-  - Property
-  - Reference
-  - Serialization
+  - プロパティ
+  - リファレンス
+  - シリアライズ
   - Serializing
   - outerHTML
+browser-compat: api.Element.outerHTML
 translation_of: Web/API/Element/outerHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>outerHTML</code></strong> は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。</p>
+**`outerHTML`** は {{ domxref("Element") }} DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで、指定された文字列を解釈したノードの要素に置き換えることができます。
 
-<p>要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。</p>
+要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに {{domxref("Element.innerHTML", "innerHTML")}} プロパティを使用してください。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>content</var> = <var>element</var>.outerHTML;
+```js
+var content = element.outerHTML;
 
-<var>element</var>.outerHTML = <var>htmlString</var>;
-</pre>
+element.outerHTML = htmlString;
+```
 
-<h3 id="Value" name="Value">値</h3>
+### 値
 
-<p><code>outerHTML</code> の値を読み取ると、 <code><var>element</var></code> およびその子孫の HTML シリアライズを含む {{domxref("DOMString")}} が返されます。 <code>outerHTML</code> の値を設定すると、その要素とそのすべての子孫を、指定された <code><var>htmlString</var></code> を解釈して構築された新しい DOM ツリーで置き換えます。</p>
+`outerHTML` の値を読み取ると、 `element` およびその子孫を HTML にシリアライズしたものを含む {{domxref("DOMString")}} が返されます。 `outerHTML` の値を設定すると、その要素とそのすべての子孫を、指定された `htmlString` を解釈して構築された新しい DOM ツリーで置き換えます。
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+### 例外
 
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd><code>outerHTML</code> に正しくない HTML の文字列を使用して設定しようとした場合。</dd>
- <dt><code>NoModificationAllowedError</code></dt>
- <dd><code>outerHTML</code> を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。</dd>
-</dl>
+- `SyntaxError` {{domxref("DOMException")}}
+  - : `outerHTML` に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。
+- `NoModificationAllowedError` {{domxref("DOMException")}}
+  - : `outerHTML` を {{domxref("Document")}} の直接の子である要素、たとえば {{domxref("Document.documentElement")}} に対して設定しようとした場合。
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<p>要素の <code>outerHTML</code> プロパティの値を得る例を示します。</p>
+要素の `outerHTML` プロパティの値を得る例を示します。
 
-<pre class="brush: js">// HTML:
-// &lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;
+### HTML
 
-d = document.getElementById("d");
+```html
+<div id="d">
+  <p>Content</p>
+  <p>Further Elaborated</p>
+</div>
+```
+
+### Javascript
+
+```js
+var d = document.getElementById("d");
 console.log(d.outerHTML);
 
-// 次の文字列 '&lt;div id="d"&gt;&lt;p&gt;Content&lt;/p&gt;&lt;p&gt;Further Elaborated&lt;/p&gt;&lt;/div&gt;'
-// が、コンソールウィンドウに出力されます。
-</pre>
+// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// がコンソールウィンドウに書き出されます。
+```
+
+次の例では、 `outerHTML` プロパティに値を設定し、ノードを置換します。
+
+### HTML
+
+```html
+<div id="container">
+  <div id="d">これは div です。</div>
+</div>
+```
 
-<p>次の例では、 <code>outerHTML</code> プロパティに値を設定し、ノードを置換します。</p>
+### Javascript
 
-<pre class="brush: js">// HTML:
-// &lt;div id="container"&gt;&lt;div id="d"&gt;This is a div.&lt;/div&gt;&lt;/div&gt;
+```js
+var container = document.getElementById("container");
+var d = document.getElementById("d");
 
-container = document.getElementById("container");
-d = document.getElementById("d");
-console.log(container.firstChild.nodeName); // "DIV" が記録される
+console.log(container.firstElementChild.nodeName); // "DIV" と出力
 
-d.outerHTML = "&lt;p&gt;This paragraph replaced the original div.&lt;/p&gt;";
-console.log(container.firstChild.nodeName); // "P" が記録される
+d.outerHTML = "<p>この段落は元の div を置き換えたものです。</p>";
 
-// #d の div 要素はもはや文書ツリーの一部ではなく、
+console.log(container.firstElementChild.nodeName); // "P" と出力
+
+// #d の div 要素は文書ツリーの一部ではなくなり、
 // 新たな段落に置き換えられました。
-</pre>
-
-<h2 id="Notes" name="Notes">メモ</h2>
-
-<p>要素が親要素を持たない場合、その <code>outerHTML</code> プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。</p>
-
-<pre class="brush: js">var div = document.createElement("div");
-div.outerHTML = "&lt;div class=\"test\"&gt;test&lt;/div&gt;";
-console.log(div.outerHTML); // output: "&lt;div&gt;&lt;/div&gt;"</pre>
-
-<p>また、文書の中で要素が置換された場合も、 <code>outerHTML</code> プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。</p>
-
-<pre class="brush: js">var p = document.getElementsByTagName("p")[0];
-console.log(p.nodeName); // "P" を表示
-p.outerHTML = "&lt;div&gt;This div replaced a paragraph.&lt;/div&gt;";
-console.log(p.nodeName); // "P" のまま
-</pre>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}</td>
-   <td>{{ Spec2('DOM Parsing') }}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.outerHTML")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>DOM ツリーを XML または HTML にシリアライズ: {{domxref("XMLSerializer")}}</li>
- <li>XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}</li>
- <li>{{domxref("HTMLElement.outerText")}}</li>
-</ul>
+```
+
+## メモ
+
+要素が親要素を持たない場合、その `outerHTML` プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。
+
+```js
+var div = document.createElement("div");
+div.outerHTML = "<div class=\"test\">test</div>";
+console.log(div.outerHTML); // output: "<div></div>"
+```
+
+また、文書の中で要素が置換された場合も、 `outerHTML` プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。
+
+```js
+var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // shows: "P"
+p.outerHTML = "<div>This div replaced a paragraph.</div>";
+console.log(p.nodeName); // still "P";
+```
+
+返値には HTML エスケープされた属性が入ります。
+
+```js
+var anc = document.createElement("a");
+anc.href = "https://developer.mozilla.org?a=b&c=d";
+console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- DOM ツリーを XML 文字列にシリアライズ: {{domxref("XMLSerializer")}}
+- XML または HTML を DOM ツリーに解釈: {{domxref("DOMParser")}}
+- {{domxref("HTMLElement.outerText")}}
-- 
cgit v1.2.3-54-g00ecf


From 3c8c08b293f12013ae05a770b754c9ce2e10a01c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 23:54:19 +0900
Subject: 2022/02/12 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/scrollheight/index.md | 172 ++++++++++++-------------
 1 file changed, 83 insertions(+), 89 deletions(-)

diff --git a/files/ja/web/api/element/scrollheight/index.md b/files/ja/web/api/element/scrollheight/index.md
index a2146b9db5..cead8be682 100644
--- a/files/ja/web/api/element/scrollheight/index.md
+++ b/files/ja/web/api/element/scrollheight/index.md
@@ -5,68 +5,70 @@ tags:
   - API
   - CSSOM View
   - NeedsDHTMLRemovalInExample
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollHeight
 translation_of: Web/API/Element/scrollHeight
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.scrollHeight</code></strong> は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。</p>
+**`Element.scrollHeight`** は読み取り専用のプロパティで、あふれて画面上に表示されない部分を含めた、要素の中身の高さの寸法です。
 
-<p><code>scrollHeight</code> の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その <code>scrollHeight</code> は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。</p>
+![](scrollheight.png)
 
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
+`scrollHeight` の値は、垂直スクロールバーを使用せずにすべてのコンテンツをビューポート内に収めるために要素に必要な最小の高さに等しくなります。高さは {{domxref("Element.clientHeight", "clientHeight")}} と同じ方法で測定されます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 水平スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような擬似要素の高さを含むことがあります。要素の内容が垂直スクロールバーを表示することなく収まる場合、その `scrollHeight` は {{domxref("Element.clientHeight", "clientHeight")}} と等しくなります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("Element.getBoundingClientRect()") }} を使用してください。
 
-<pre class="syntaxbox notranslate"><var>elemScrollHeight</var> = <var>element</var>.scrollHeight;</pre>
+## 構文
 
-<h3 id="Value" name="Value">値</h3>
+```js
+elemScrollHeight = element.scrollHeight;
+```
 
-<p>整数値で、要素の scrollHeight ピクセル値に対応します。</p>
+### 値
 
-<h2 id="Example" name="Example">例</h2>
+整数値で、要素の scrollHeight ピクセル値に対応します。
 
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
+## 問題と解決方法
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+## 要素が完全にスクロールされたかどうかの判定
 
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+`scrollTop` は丸められない数値で、 `scrollHeight` と `clientHeight` は丸められます。したがって、スクロール領域が下までスクロールされているかどうかを判断する唯一の方法は、スクロール量が何らかの閾値 (この例では `1`) に十分に近いかどうかを確認することです。
 
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
-</div>
-<strong>Left</strong> <strong>Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 225px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
+```js
+Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
+```
 
-<p><img alt="Image:scrollHeight.png" class="internal" src="/@api/deki/files/840/=ScrollHeight.png"></p>
+次の例は動作しません。 `scrollTop` が小数を含む可能性があるからです。
 
-<h2 id="Problems_and_solutions" name="Problems_and_solutions">問題と解決方法</h2>
+```js
+element.scrollHeight - Math.abs(element.scrollTop) === element.clientHeight
+```
 
-<h3 id="要素が完全にスクロールされたかどうかを判定する">要素が完全にスクロールされたかどうかを判定する</h3>
+### 要素がスクロール可能かどうかを判定
 
-<p>次の等式は、要素がスクロールの終点にあると <code>true</code> になり、それ以外は <code>false</code> になります。</p>
+コンテナーは、スクロールしないがあふれる子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。
 
-<pre class="syntaxbox notranslate">element.scrollHeight - element.scrollTop === element.clientHeight
-</pre>
+```js
+window.getComputedStyle(element).overflowY === 'visible'
+window.getComputedStyle(element).overflowY !== 'hidden'
+```
 
-<p>コンテナーは、スクロールしないがオーバーフローする子要素を持つ場合、次の条件式はコンテナーがスクロールできるかどうかを判定します。</p>
+## 例
 
-<pre class="syntaxbox notranslate">window.getComputedStyle(element).overflowY === 'visible'
-window.getComputedStyle(element).overflowY !== 'hidden'
-</pre>
+### ユーザーがテキストを読んだかどうかをチェック
 
-<h2 id="scrollHeight_Demo" name="scrollHeight_Demo">scrollHeight のデモ</h2>
+{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。
 
-<p>{{domxref("GlobalEventHandlers/onscroll", "onscroll")}} イベントに関連付けることで、この等価性はユーザーがテキストを読んだかどうかを判断するのに役立ちます ({{domxref("element.scrollTop")}} および {{domxref("element.clientHeight")}} プロパティも参照してください）。例：</p>
+以下のデモにあるチェックボックスは無効になっており、テキストエリアの内容が最後までスクロールするまでチェックして同意を表すことができなくなっています。
 
-<h3 id="HTML">HTML</h3>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;form name="registration"&gt;
-  &lt;p&gt;
-    &lt;textarea id="rules"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+```html
+<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
 Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
 neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
 velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
@@ -88,18 +90,20 @@ ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maec
 interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
 laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
 nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
-    &lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="checkbox" id="agree" name="accept" /&gt;
-    &lt;label for="agree"&gt;I agree&lt;/label&gt;
-    &lt;input type="submit" id="nextstep" value="Next" /&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css notranslate">#notice {
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+```
+
+#### CSS
+
+```css
+#notice {
   display: inline-block;
   margin-bottom: 12px;
   border-radius: 5px;
@@ -114,17 +118,19 @@ nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci
   padding: 5px;
   border: #2A9F00 solid 2px;
   border-radius: 5px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+#### JavaScript
 
-<pre class="brush: js notranslate">function checkReading () {
+```js
+function checkReading () {
   if (checkReading.read) {
     return;
   }
-  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  checkReading.read = this.scrollHeight - Math.round(this.scrollTop) === this.clientHeight;
   document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
-  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+  checkReading.noticeBox.textContent = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
 }
 
 onload = function () {
@@ -136,38 +142,26 @@ onload = function () {
   oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
   oToBeRead.onscroll = checkReading;
   checkReading.call(oToBeRead);
-}</pre>
-
-<p>{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollHeight")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9</a></li>
- <li>{{domxref("Element.clientHeight")}}</li>
- <li>{{domxref("HTMLElement.offsetHeight")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Checking_that_the_user_has_read_a_text', '640', '400')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN:
+  Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer
+  9](<https://docs.microsoft.com/previous-versions/hh781509(v=vs.85)>)
+- {{domxref("Element.clientHeight")}}
+- {{domxref("HTMLElement.offsetHeight")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
-- 
cgit v1.2.3-54-g00ecf


From 9f0e826282054eab8175b4cae7e93112a380a7e0 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 00:00:04 +0900
Subject: 2022/02/07 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/scrollleft/index.md | 129 +++++++++++------------
 files/ja/web/api/element/scrolltop/index.md  | 148 +++++++++++++++------------
 2 files changed, 141 insertions(+), 136 deletions(-)

diff --git a/files/ja/web/api/element/scrollleft/index.md b/files/ja/web/api/element/scrollleft/index.md
index 4a593af238..0d7dc3bbb4 100644
--- a/files/ja/web/api/element/scrollleft/index.md
+++ b/files/ja/web/api/element/scrollleft/index.md
@@ -4,58 +4,59 @@ slug: Web/API/Element/scrollLeft
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollLeft
 translation_of: Web/API/Element/scrollLeft
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.scrollLeft</code></strong> プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。</p>
+**`Element.scrollLeft`** プロパティは、要素の内容が左端からスクロールするピクセル数を取得または設定します。
 
-<p>要素の {{cssxref("direction")}} が <code>rtl</code> (right-to-left、右書き) の場合、 <code>scrollLeft</code> が <code>0</code> のときにスクロールバーが右端の位置 (スクロールする内容の開始位置) にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。</p>
+要素の {{cssxref("direction")}} が `rtl` (right-to-left、右書き) の場合、 `scrollLeft` が `0` のときにスクロールバーが右端の位置（スクロールする内容の開始位置）にあり、コンテンツの末尾にスクロールするにつれて、負の数が増加していきます。
 
-<div class="blockIndicator warning">
-<p>画面拡大を使用するシステムでは、 <code>scrollLeft</code> が小数になることがあります。</p>
-</div>
+> **Warning:** 画面拡大を使用するシステムでは、 `scrollLeft` が小数になることがあります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<h3 id="Getting_the_value" name="Getting_the_value">値の取得</h3>
+### 値の取得
 
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <em>sLeft</em> = <em>element</em>.scrollLeft;
-</pre>
+```js
+// スクロールしたピクセル数を取得
+var sLeft = element.scrollLeft;
+```
 
-<p><code>sLeft</code> は <code>element</code> が左端からスクロールしたピクセル数を整数で表現したものです。</p>
+`sLeft` は `element` が左端からスクロールしたピクセル数を整数で表現したものです。
 
-<h3 id="Setting_the_value" name="Setting_the_value">値の設定</h3>
+### 値の設定
 
-<pre class="syntaxbox">// スクロールしたピクセル数を設定
-<em>element</em>.scrollLeft = 10;
-</pre>
+```js
+// スクロールしたピクセル数を設定
+element.scrollLeft = 10;
+```
 
-<p><code>scrollLeft</code> は任意の整数値で設定することができます。しかし、</p>
+`scrollLeft` は任意の整数値で設定することができます。しかし、
 
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が <code>0</code> より小さかったら (右書きの要素では <code>0</code> より大きかったら)、 <code>scrollLeft</code> は <code>0</code> に設定されます。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollLeft</code> は最大値に設定されます。</li>
-</ul>
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が `0` より小さかったら (右書きの要素では `0` より大きかったら)、 `scrollLeft` は `0` に設定されます。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollLeft` は最大値に設定されます。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div id="container"&gt;
-  &lt;div id="content"&gt;ボタンをクリックすると右にスライドします。&lt;/div&gt;
-&lt;/div&gt;
+```html
+<div id="container">
+  <div id="content">ボタンをクリックすると右へスライドします。</div>
+</div>
 
-&lt;button id="slide" type="button"&gt;右へスライド&lt;/button&gt;</pre>
+<button id="slide" type="button">右へスライド</button>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">#container {
+```css
+#container {
   width: 100px;
   height: 100px;
   border: 1px solid #ccc;
@@ -65,47 +66,33 @@ var <em>sLeft</em> = <em>element</em>.scrollLeft;
 #content {
   width: 250px;
   background-color: #ccc;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">const button = document.getElementById('slide');
+```js
+const button = document.getElementById('slide');
 
 button.onclick = function () {
   document.getElementById('container').scrollLeft += 20;
-};</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample("Example")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollLeft")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollTop")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
+};
+```
+
+### 結果
+
+{{EmbedLiveSample("Example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollTop")}}
+- {{domxref("Element.scrollTo()")}}
diff --git a/files/ja/web/api/element/scrolltop/index.md b/files/ja/web/api/element/scrolltop/index.md
index 21f8478a46..898f8cc7bb 100644
--- a/files/ja/web/api/element/scrolltop/index.md
+++ b/files/ja/web/api/element/scrolltop/index.md
@@ -6,87 +6,105 @@ tags:
   - CSSOM View
   - NeedsArtUpdate
   - NeedsMarkupWork
-  - Property
-  - Reference
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollTop
 translation_of: Web/API/Element/scrollTop
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary"><code><strong>Element.scrollTop</strong></code> プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。</span></p>
+**`Element.scrollTop`** プロパティは、要素の内容が垂直にスクロールするピクセル数を取得または設定します。
 
-<p>要素の <code>scrollTop</code> の値は、要素の上から最も上の<em>表示されている</em>コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 <code>scrollTop</code> の値は <code>0</code> になります。</p>
+要素の `scrollTop` の値は、要素の上から最も上の*表示されている*コンテンツまでの距離を測ったものです。要素の内容が垂直スクロールバーを生成しなかった場合は、 `scrollTop` の値は `0` になります。
 
-<p><code>scrollTop</code> がルート要素 (<code>&lt;html&gt;</code> 要素) に対して使用されると、ウィンドウの <code>scrollY</code> が返されます。 <a href="https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop">これは <code>scrollTop</code> の特例です</a>。</p>
+`scrollTop` がルート要素 (`<html>` 要素) に対して使用されると、ウィンドウの `scrollY` が返されます。[これは `scrollTop` の特例です](https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop)。
 
-<div class="warning">
-<p>画面の拡大縮小を使用するシステムでは、 <code>scrollTop</code> が小数になることがあります。</p>
-</div>
+> **Warning:** 画面の拡大縮小を使用するシステムでは、 `scrollTop` が小数になることがあります。
+
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+// スクロールしたピクセル数を取得
+var intElemScrollTop = someElement.scrollTop;
+```
 
-<pre class="syntaxbox">// スクロールしたピクセル数を取得
-var <var>intElemScrollTop</var> = someElement.scrollTop;
-</pre>
+このコードを実行した後、 `intElemScrollTop` はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。
 
-<p>このコードを実行した後、 <code><var>intElemScrollTop</var></code> はこの要素 ({{domxref("Element")}}) が上方向にスクロールしたピクセル数に対応した整数になります。</p>
+```js
+// スクロールするピクセル数を設定
+element.scrollTop = intValue;
+```
 
-<pre class="brush: js">// スクロールするピクセル数を設定
-<var>element</var>.scrollTop = <var>intValue</var>;
-</pre>
+`scrollTop` は任意の整数値で設定することができます。しかし、
 
-<p><code>scrollTop</code> は任意の整数値で設定することができます。しかし、</p>
+- 要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "**non-scrollable**" のプロパティがある場合)、 `scrollTop` は `0` に設定されます。
+- `scrollTop` は負の数には対応していません。代わりに、 `0` に戻ります。
+- 指定された値が、コンテンツがスクロールできる最大値を超えていたら、 `scrollTop` は最大値に設定されます。
 
-<ul>
- <li>要素がスクロールできない場合 (例えば、はみ出した部分がない場合や、要素に "<strong>non-scrollable</strong>" のプロパティがある場合)、 <code>scrollTop</code> は <code>0</code> に設定されます。</li>
- <li><code>scrollTop</code> は負の数には対応していません。代わりに、 <code>0</code> に戻ります。</li>
- <li>指定された値が、コンテンツがスクロールできる最大値を超えていたら、 <code>scrollTop</code> は最大値に設定されます。</li>
-</ul>
+## 例
 
-<h2 id="Example" name="Example">例</h2>
+### 要素のスクロール
 
-<div id="offsetContainer" style="margin: 40px 50px 50px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: relative; display: inline-block;">
-<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;">
-<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
-<em><strong>If you can see this, scrollTop = 0</strong></em>
+この例で、破線の境界線の付いた内部のコンテナーをスクロールしてみて、 `scrollTop` の値がどのように変わるかを確認してください。
 
-<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-<strong><em>If you can see this, scrollTop is &gt; 0</em></strong>
+#### HTML
 
-<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-<strong><em>If you can see this, scrollTop is maxed-out</em></strong>
+```html
 
-<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p>
+<div id="container">
+  <div id="scroller">
+      <p>Far out in the uncharted backwaters of the unfashionable end
+      of the western spiral arm of the Galaxy lies a small unregarded
+      yellow sun. Orbiting this at a distance of roughly ninety-two million
+      miles is an utterly insignificant little blue green planet whose
+      ape-descended life forms are so amazingly primitive that they still
+      think digital watches are a pretty neat idea.</p>
+  </div>
 </div>
-<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong> <strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong> <em>margin-top</em> <em>margin-bottom</em> <em>border-top</em> <em>border-bottom</em></div>
-
-<h2 id="Specifications" 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('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.scrollTop")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh781509(v=vs.85).aspx" title="MSDN Measuring Element Dimension and Location">MSDN's Measuring Element Dimension and Location</a></li>
- <li>{{domxref("Element.scrollLeft")}}</li>
- <li>{{domxref("Element.scrollTo()")}}</li>
-</ul>
+
+<div id="output">scrollTop: 0</div>
+```
+
+#### CSS
+
+```css
+#scroller {
+  overflow: scroll;
+  height: 150px;
+  width: 150px;
+  border: 5px dashed orange;
+}
+
+#output {
+  padding: 1rem 0;
+}
+```
+
+#### JavaScript
+
+```js
+const scroller = document.querySelector("#scroller");
+const output = document.querySelector("#output");
+
+scroller.addEventListener("scroll", event => {
+  output.textContent = `scrollTop: ${scroller.scrollTop}`;
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("Scrolling_an_element", 400, 250)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [MSDN's Measuring Element Dimension and Location](<https://msdn.microsoft.com/library/hh781509(v=vs.85).aspx> "MSDN Measuring Element Dimension and Location")
+- {{domxref("Element.scrollLeft")}}
+- {{domxref("Element.scrollTo()")}}
-- 
cgit v1.2.3-54-g00ecf


From d30020571ea7fb60de06f9b8fa8ad876dda1006d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 1 Mar 2022 22:58:26 +0900
Subject: 2022/02/18 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/innerhtml/index.md   | 254 +++++++++++++++-----------
 files/ja/web/api/element/scrollwidth/index.md | 222 +++++++++++-----------
 2 files changed, 249 insertions(+), 227 deletions(-)

diff --git a/files/ja/web/api/element/innerhtml/index.md b/files/ja/web/api/element/innerhtml/index.md
index bd63262b6c..f3e54ca72c 100644
--- a/files/ja/web/api/element/innerhtml/index.md
+++ b/files/ja/web/api/element/innerhtml/index.md
@@ -7,160 +7,205 @@ tags:
   - DOM Parsing
   - Element
   - Parsing HTML
-  - Property
-  - Reference
+  - プロパティ
+  - リファレンス
   - innerHTML
   - プロパティ
 browser-compat: api.Element.innerHTML
 translation_of: Web/API/Element/innerHTML
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary">{{domxref("Element")}} オブジェクトの <strong><code>innerHTML</code></strong> プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。</span></p>
+{{domxref("Element")}} オブジェクトの **`innerHTML`** プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。
 
-<div class="note"><strong>メモ:</strong> {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("noembed")}} ノードが <code>(&amp;)</code>, <code>(&lt;)</code>, <code>(&gt;)</code> の文字を含むテキストの子ノードを持っている場合、 <code>innerHTML</code> はこれらの文字を HTML エンティティの <code>"&amp;amp;"</code>, <code>"&amp;lt;"</code>, <code>"&amp;gt;"</code> としてそれぞれ返します。これらのテキストノードの内容の生のコピーを取得するには {{domxref("Node.textContent")}} を使用してください。</div>
+要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。
 
-<p>要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、 {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}} メソッドを使用してください。</p>
+## 構文
 
-<h2 id="Syntax">構文</h2>
+```js
+const content = element.innerHTML;
 
-<pre class="brush: js">const <var>content</var> = <var>element</var>.innerHTML;
+element.innerHTML = content;
+```
 
-<var>element</var>.innerHTML = <var>htmlString</var>;
-</pre>
+### 値
 
-<h3 id="Value">値</h3>
+要素の子孫を HTML にシリアライズしたものを含んだ {{domxref("DOMString")}} です。 `innerHTML` に値を設定すると、要素のすべての子孫を削除して、 _htmlString_ の文字列で与えられた HTML を解釈して構築されたノードに置き換えます。
 
-<p>要素の子孫を HTML シリアライズしたものを含んだ {{domxref("DOMString")}} です。 <code>innerHTML</code> に値を設定すると、要素のすべての子孫を削除して、 <var>htmlString</var> の文字列で与えられた HTML を解析して構築されたノードに置き換えます。</p>
+### 例外
 
-<h3 id="Exceptions">例外</h3>
+- `SyntaxError` {{domxref("DOMException")}}
+  - : 正しくない形の HTML の文字列を使用して `innerHTML` の値を設定しようとした場合に発生します。
+- `NoModificationAllowedError` {{domxref("DOMException")}}
+  - : 親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合に発生します。
 
-<dl>
-  <dt><code>SyntaxError</code></dt>
-  <dd>正しくない形の HTML の文字列を使用して <code>innerHTML</code> の値を設定しようとした場合。</dd>
-  <dt><code>NoModificationAllowedError</code></dt>
-  <dd>親が {{domxref("Document")}} であるノードに HTML を挿入しようとした場合。</dd>
-</dl>
+## 使用上のメモ
 
-<h2 id="Usage_notes">使用上のメモ</h2>
+`innerHTML` プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。
 
-<p><code>innerHTML</code> プロパティは、ページの現在の HTML ソースを、ページが最初に読み込まれてから行われたあらゆる変更を含めて、見るために利用することができます。</p>
+### 要素の HTML コンテンツの読み取り
 
-<h3 id="Reading_the_HTML_contents_of_an_element">要素の HTML コンテンツの読み取り</h3>
+`innerHTML` を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。
 
-<p><code>innerHTML</code> を読み取ると、ユーザーエージェントが要素の子孫で構成される HTML または XML の断片をシリアライズします。結果として文字列が返ります。</p>
+```js
+let contents = myElement.innerHTML;
+```
 
-<pre class="brush: js">let contents = myElement.innerHTML;</pre>
+これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。
 
-<p>これで、 HTML のコンテンツのノードの HTML マークアップを見ることができます。</p>
+> **Note:** 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。
 
-<div class="note">
-  <p><strong>メモ:</strong> 返される HTML または XML の断片は、現在の要素の中身に基づいて生成されますので、返される断片のマークアップや整形方法は、元のページのマークアップと同じであるとは限りません。</p>
-</div>
+### 要素の中身の置き換え
+
+`innerHTML` の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。
+
+> **Note:** 挿入される文字列に悪意のある内容が含まれる可能性がある場合、[セキュリティ上のリスク](#セキュリティの考慮事項)になります。
+> ユーザーが提供したデータを挿入する場合は、 {{domxref("Element.SetHTML()")}} を使用するよう常に検討してください。こちらは挿入する前に無害化を行います。
+
+例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。
 
-<h3 id="Replacing_the_contents_of_an_element">要素の中身の置き換え</h3>
+```js
+document.body.innerHTML = "";
+```
 
-<p><code>innerHTML</code> の値を設定することで、既存の要素の内容を新しい内容に置き換えることが簡単にできます。</p>
+この例は文書の現在の HTML マークアップを走査し、 `"<"` の文字を HTML エンティティの `"&lt;"` に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 `innerHTML` の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。
 
-<p>例えば、文書の {{domxref("Document.body", "body")}} 属性の内容を消去することで、文書の内容全体を消去することができます。</p>
+```js
+document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+```
 
-<pre class="brush: js">document.body.innerHTML = "";</pre>
+#### 操作の詳細
 
-<p>この例は文書の現在の HTML マークアップを走査し、 <code>"&lt;"</code> の文字を HTML エンティティの <code>"&amp;lt;"</code> に置き換え、それによって本質的に HTML を生テキストに変換します。そしてこれを {{HTMLElement("pre")}} で囲みます。そして、 <code>innerHTML</code> の値をこの新しい文字列に変更します。結果として、文書の内容がページ全体のソースコードの表示に置き換わります。</p>
+`innerHTML` に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。
 
-<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
-         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
-            "&lt;/pre&gt;";</pre>
+1. 指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。
+2. 中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 `<template>` 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ 1 で生成された新しい `DocumentFragment` で置き換えます。
+3. その他の要素はすべて、要素の内容を新しい `DocumentFragment` のノードで置き換えます。
 
-<h4 id="Operational_details">操作の詳細</h4>
+### HTML を要素に適用
+
+`innerHTML` に値を設定すると、既存の要素の一つに新しい内容物を追加します。
+
+例えば、新しいリスト項目 (`<li>`) を既存のリスト (`<ul>`) に追加することができます。
+
+#### HTML
+
+```html
+<ul id="list">
+  <li><a href="#">Item 1</a></li>
+  <li><a href="#">Item 2</a></li>
+  <li><a href="#">Item 3</a></li>
+</ul>
+```
 
-<p><code>innerHTML</code> に値を設定すると、正確には何が起きるのでしょうか？これを行うと、ユーザーエージェントは以下のステップを追います。</p>
+#### JavaScript
 
-<ol>
- <li>指定された値は (文書型に基づいて) HTML または XML として解釈され、新しい一連の要素の DOM ノードを表す {{domxref("DocumentFragment")}} オブジェクトの中に結果が入れられます。</li>
- <li>中身を置き換えようとしている要素が {{HTMLElement("template")}} 要素である場合は、 <code>&lt;template&gt;</code> 要素の {{domxref("HTMLTemplateElement.content", "content")}} 属性を、ステップ1で生成された新しい <code>DocumentFragment</code> で置き換えます。</li>
- <li>その他の要素はすべて、要素の内容を新しい <code>DocumentFragment</code> のノードで置き換えます。</li>
-</ol>
+```js
+const list = document.getElementById("list");
 
-<h3 id="Security_considerations">セキュリティの考慮事項</h3>
+list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
+```
 
-<p>ウェブページにテキストを挿入するために <code>innerHTML</code> を使用している例は珍しくありませんありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。</p>
+なお、 `innerHTML` を使用して HTML 要素を追加すると（例えば `el.innerHTML += "<a href='...'>link</a>"`）、以前設定したイベントリスナーを取り除くことになります。
+つまり、この方法で HTML 要素を追加すると、以前設定したイベントリスナーで待ち受けすることができなくなります。
 
-<pre class="brush: js">const name = "John";
+### セキュリティの考慮事項
+
+ウェブページにテキストを挿入するために `innerHTML` を使用している例は珍しくありません。これがサイト上の攻撃ベクトルになる可能性があり、潜在的なセキュリティリスクが生じます。
+
+```js
+const name = "John";
 // 'el' を HTML の DOM 要素と想定します
 el.innerHTML = name; // この場合は無害
 
 // ...
 
-name = "&lt;script&gt;alert('I am John in an annoying alert!')&lt;/script&gt;";
-el.innerHTML = name; // この場合は無害</pre>
+name = "<script>alert('I am John in an annoying alert!')</script>";
+el.innerHTML = name; // この場合は無害
+```
 
-<p>これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では <code>innerHTML</code> で挿入された {{HTMLElement("script")}} タグは<a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">実行するべきではない</a>と定義しているからです。</p>
+これは{{interwiki("wikipedia", "クロスサイトスクリプティング")}}攻撃のように見えますが、結果的には無害です。 HTML5 では `innerHTML` で挿入された {{HTMLElement("script")}} タグは[実行するべきではない](https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0)と定義しているからです。
 
-<p>しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために <code>innerHTML</code> を使用するたびに、セキュリティリスクは残ります。</p>
+しかし、次のように {{HTMLElement("script")}} を使わずに JavaScript を実行する方法もあるので、制御することができない文字列を設定するために `innerHTML` を使用するたびに、セキュリティリスクは残ります。
 
-<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
-el.innerHTML = name; // アラートが表示される</pre>
+```js
+const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // アラートが表示される
+```
 
-<p>このため、プレーンテキストを挿入するときには <code>innerHTML</code> を使用せず、代わりに {{domxref("Node.textContent")}} を使用することをお勧めします。これは渡されたコンテンツを HTML として解釈するのではなく、生テキストとして挿入します。</p>
+このため、 `innerHTML` を使用する代わりに次のようにしてください。
 
-<div class="warning">
-<p><strong>警告:</strong> プロジェクトに対して何らかの形のセキュリティレビューが行われる場合、 <code>innerHTML</code> は多くの場合、コードが拒絶される結果になります。例えば、<a href="/ja/docs/Mozilla/Add-ons/WebExtensions">ブラウザー拡張機能</a>の中で <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation"><code>innerHTML</code> を使用した場合</a>、拡張機能を <a href="https://addons.mozilla.org/">addons.mozilla.org</a> に提出すると、自動レビュープロセスを通過できないでしょう。</p>
-</div>
+- {{domxref("Element.SetHTML()")}} で DOM に挿入する前にテキストを無害化する。
+- プレーンテキストを挿入する際には、代わりに {{domxref("Node.textContent")}} を使用する。これは渡されたコンテンツを HTML として解釈するのではなく、生のテキストとして挿入します。
+
+> **Warning:** プロジェクトに対して何らかの形のセキュリティレビューが行われた場合、 `innerHTML` は多くの場合で、コードが拒絶される結果になります。
+> 例えば、[ブラウザー拡張機能](/ja/docs/Mozilla/Add-ons/WebExtensions)の中で [`innerHTML` を使用した場合](https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation)、拡張機能を [addons.mozilla.org](https://addons.mozilla.org/) に提出すると、自動レビュープロセスを通過できないでしょう。
+> 代替方法については、[ページへ外部コンテンツを安全に挿入する](/ja/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page)を参照してください。
 
-<h2 id="Example">例</h2>
+## 例
 
-<p>この例は <code>innerHTML</code> を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。</p>
+この例は `innerHTML` を使用して、ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">function log(msg) {
+```js
+function log(msg) {
   var logElem = document.querySelector(".log");
 
   var time = new Date();
   var timeStr = time.toLocaleTimeString();
-  logElem.innerHTML += timeStr + ": " + msg + "&lt;br/&gt;";
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
 }
 
 log("Logging mouse events inside this container...");
-</pre>
+```
 
-<p><code>log()</code> 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから <code>"log"</code> クラスのボックスにメッセージを追加します。</p>
+`log()` 関数は {{jsxref("Date")}} オブジェクトから {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから `"log"` クラスのボックスにメッセージを追加します。
 
-<p>{{domxref("MouseEvent")}} ベースのイベント ({{event("mousedown")}}, {{event("click")}}, {{event("mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。</p>
+{{domxref("MouseEvent")}} ベースのイベント ({{domxref("Element/mousedown_event", "mousedown")}}, {{domxref("Element/click_event", "click")}}, {{domxref("Element/mouseenter_event", "mouseenter")}} など) についての情報を記録する第二のメソッドを追加します。
 
-<pre class="brush: js">function logEvent(event) {
-  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
-            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
+```js
+function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
   log(msg);
-}</pre>
+}
+```
 
-<p>それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。</p>
+それから、これをログを収めるボックスの様々なマウスイベントのイベントハンドラーとして登録します。
 
-<pre class="brush: js">var boxElem = document.querySelector(".box");
+```js
+var boxElem = document.querySelector(".box");
 
 boxElem.addEventListener("mousedown", logEvent);
 boxElem.addEventListener("mouseup", logEvent);
 boxElem.addEventListener("click", logEvent);
 boxElem.addEventListener("mouseenter", logEvent);
-boxElem.addEventListener("mouseleave", logEvent);</pre>
+boxElem.addEventListener("mouseleave", logEvent);
+```
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>この例の HTML はとても単純です。</p>
+この例の HTML はとても単純です。
 
-<pre class="brush: html">&lt;div class="box"&gt;
-  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
-  &lt;div class="log"&gt;&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+```
 
-<p><code>"box"</code> クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが <code>"log"</code> である <code>&lt;div&gt;</code> は、ログテキスト自身のコンテナーです。</p>
+`"box"` クラスが付いた {{HTMLElement("div")}} は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。
+クラスが `"log"` である `<div>` は、ログテキスト自身のコンテナーです。
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>以下の CSS が例の内容をスタイル付けします。</p>
+以下の CSS が例の内容をスタイル付けします。
 
-<pre class="brush: css">.box {
+```css
+.box {
   width: 600px;
   height: 300px;
   border: 1px solid black;
@@ -172,42 +217,29 @@ boxElem.addEventListener("mouseleave", logEvent);</pre>
 .log {
   margin-top: 8px;
   font-family: monospace;
-}</pre>
+}
+```
 
-<h3 id="Result">結果</h3>
+### 結果
 
-<p>結果の内容はこのように見えます。マウスが移動してボックスを出入りしたり、中でクリックしたりすると、ログが出力されるのを見ることができます。</p>
+結果の内容はこのように見えます。
+マウスを移動してボックスを出入りさせたり、中でクリックしたりすると、ログが出力されるのを見ることができます。
 
-<p>{{EmbedLiveSample("Example", 640, 350)}}</p>
+{{EmbedLiveSample("Example", 640, 350)}}
 
-<h2 id="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 Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
-      <td>{{Spec2('DOM Parsing')}}</td>
-      <td>初回定義</td>
-    </tr>
-  </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}</li>
-  <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
-  <li>HTML を解析して DOM ツリーへ入れる: {{domxref("DOMParser")}}</li>
-  <li>XML または HTML をシリアライズして DOM ツリーへ入れる: {{domxref("XMLSerializer")}}</li>
-</ul>
+- {{domxref("Node.textContent")}} および {{domxref("HTMLElement.innerText")}}
+- {{domxref("Element.insertAdjacentHTML()")}}
+- {{domxref("Element.outerHTML")}}
+- {{domxref("Element.setHTML")}}
+- HTML または XML を解釈して DOM ツリーへ: {{domxref("DOMParser")}}
+- DOM ツリーを XML 文字列へシリアライズ: {{domxref("XMLSerializer")}}
diff --git a/files/ja/web/api/element/scrollwidth/index.md b/files/ja/web/api/element/scrollwidth/index.md
index 5f3e98892d..3a8a21d6b8 100644
--- a/files/ja/web/api/element/scrollwidth/index.md
+++ b/files/ja/web/api/element/scrollwidth/index.md
@@ -4,122 +4,112 @@ slug: Web/API/Element/scrollWidth
 tags:
   - API
   - CSSOM View
-  - Property
-  - Reference
+  - NeedsMarkupWork
+  - NeedsSpecTable
   - プロパティ
+  - リファレンス
+browser-compat: api.Element.scrollWidth
 translation_of: Web/API/Element/scrollWidth
 ---
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>Element.scrollWidth</code></strong> は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。</p>
-
-<p><code>scrollWidth</code> の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 <code>scrollWidth</code> は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。</p>
-
-<div class="note">
-<p>このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth;</pre>
-
-<p><code><var>xScrollWidth</var></code> はピクセル単位の <code><var>element</var></code> のコンテンツの幅です。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-&lt;head&gt;
-    &lt;title&gt;Example&lt;/title&gt;
-    &lt;style&gt;
-        div {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-        }
-
-        #aDiv {
-            width: 100px;
-        }
-
-        button {
-            margin-bottom: 2em;
-        }
-    &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-    &lt;div id="aDiv"&gt;
-        FooBar-FooBar-FooBar-FooBar
-    &lt;/div&gt;
-    &lt;button id="aButton"&gt;
-        Check for overflow
-    &lt;/button&gt;
-
-    &lt;div id="anotherDiv"&gt;
-        FooBar-FooBar-FooBar-FooBar
-    &lt;/div&gt;
-    &lt;button id="anotherButton"&gt;
-        Check for overflow
-    &lt;/button&gt;
-&lt;/body&gt;
-&lt;script&gt;
-    var buttonOne = document.getElementById('aButton'),
-    buttonTwo = document.getElementById('anotherButton'),
-    divOne = document.getElementById('aDiv'),
-    divTwo = document.getElementById('anotherDiv');
-
-    //check to determine if an overflow is happening
-    function isOverflowing(element) {
-        return (element.scrollWidth &gt; element.offsetWidth);
-    }
-
-    function alertOverflow(element) {
-        if (isOverflowing(element)) {
-            alert('Contents are overflowing the container.');
-        } else {
-            alert('No overflows!');
-        }
-    }
-
-    buttonOne.addEventListener('click', function() {
-        alertOverflow(divOne);
-    });
-
-    buttonTwo.addEventListener('click', function() {
-        alertOverflow(divTwo);
-    });
-&lt;/script&gt;
-&lt;/html&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("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("api.Element.scrollWidth")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.clientWidth")}}</li>
- <li>{{domxref("HTMLElement.offsetWidth")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements">要素の寸法の決定</a></li>
-</ul>
+{{APIRef("DOM")}}
+
+**`Element.scrollWidth`** は読み取り専用のプロパティで、あふれたために画面に表示されない部分を含めた、要素の中身の幅の寸法です。
+
+`scrollWidth` の値は、水平スクロールバーを使用せずにすべてのコンテンツをビューポート内に合わせるために要素が必要とする最小幅に等しくなります。幅は {{domxref("Element.clientWidth", "clientWidth")}} と同じ方法で定めます。要素のパディングは含みますが、境界線、マージン、 (もしあれば) 垂直スクロールバーは含みません。これには {{cssxref("::before")}} または {{cssxref("::after")}} のような疑似要素の幅を含むことがあります。要素の内容が水平スクロールバーが必要なく合うのであれば、 `scrollWidth` は {{domxref("Element.clientWidth", "clientWidth")}} と等しくなります。
+
+> **Note:** このプロパティは値を整数値に丸めます。小数値が必要であれば、 {{ domxref("element.getBoundingClientRect()") }} を使用してください。
+
+## 構文
+
+```js
+var xScrollWidth = element.scrollWidth;
+```
+
+`xScrollWidth` はピクセル単位の `element` のコンテンツの幅です。
+
+## 例
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Example</title>
+    <style>
+      div {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      #aDiv {
+        width: 100px;
+      }
+
+      button {
+        margin-bottom: 2em;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="aDiv">
+      FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="aButton">
+      Check for overflow
+    </button>
+
+    <div id="anotherDiv">
+      FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="anotherButton">
+      Check for overflow
+    </button>
+  </body>
+  <script>
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //check to determine if an overflow is happening
+    function isOverflowing(element) {
+      return (element.scrollWidth > element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+      if (isOverflowing(element)) {
+        alert('Contents are overflowing the container.');
+      } else {
+        alert('No overflows!');
+      }
+    }
+
+    buttonOne.addEventListener('click', function() {
+      alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+      alertOverflow(divTwo);
+    });
+  </script>
+</html>
+```
+
+### 結果
+
+{{EmbedLiveSample('Example')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.clientWidth")}}
+- {{domxref("HTMLElement.offsetWidth")}}
+- [要素の寸法の決定](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements)
-- 
cgit v1.2.3-54-g00ecf


From a87edb6a4990b8b6f15e37dc0ea0106b3b1386d3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 01:45:12 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/part/index.md | 59 ++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 files/ja/web/api/element/part/index.md

diff --git a/files/ja/web/api/element/part/index.md b/files/ja/web/api/element/part/index.md
new file mode 100644
index 0000000000..ea93a70d1a
--- /dev/null
+++ b/files/ja/web/api/element/part/index.md
@@ -0,0 +1,59 @@
+---
+title: Element.part
+slug: Web/API/Element/part
+tags:
+  - API
+  - Element
+  - プロパティ
+  - リファレンス
+  - part
+browser-compat: api.Element.part
+---
+{{ ApiRef("DOM") }}
+
+**`part`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の部品識別子（すなわち `part` 属性を使用して設定されたもの）を {{domxref("DOMTokenList")}} で返します。これらはシャドウ DOM の部品を {{cssxref("::part")}} 擬似要素でスタイル付けするために使用することができます。
+
+## 構文
+
+```js
+let elementPartList = element.part
+```
+
+## 例
+
+以下は、 [shadow-part](https://mdn.github.io/web-components-examples/shadow-part/) の例から抜粋したものです。ここでは、 `part` 属性を使用してシャドウ部品を見つけ、 `part` プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。
+
+```js
+let tabs = [];
+let children = this.shadowRoot.children;
+
+for(let elem of children) {
+  if(elem.getAttribute('part')) {
+    tabs.push(elem);
+  }
+}
+
+tabs.forEach((tab) => {
+  tab.addEventListener('click', (e) => {
+    tabs.forEach((tab) => {
+      tab.part = 'tab';
+    })
+    e.target.part = 'tab active';
+  })
+
+  console.log(tab.part);
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("::part")}}
+- {{htmlattrxref("part")}}
-- 
cgit v1.2.3-54-g00ecf


From 3bc8d8cc092ecb9ea8d8455ffa10546d07fd6d52 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 01:58:21 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/scrollleftmax/index.md | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 files/ja/web/api/element/scrollleftmax/index.md

diff --git a/files/ja/web/api/element/scrollleftmax/index.md b/files/ja/web/api/element/scrollleftmax/index.md
new file mode 100644
index 0000000000..a1801fb0fb
--- /dev/null
+++ b/files/ja/web/api/element/scrollleftmax/index.md
@@ -0,0 +1,35 @@
+---
+title: Element.scrollLeftMax
+slug: Web/API/Element/scrollLeftMax
+tags:
+  - API
+  - CSSOM View
+  - Element
+  - 標準外
+  - プロパティ
+  - 読み取り専用
+  - リファレンス
+browser-compat: api.Element.scrollLeftMax
+translation_of: Web/API/Element/scrollLeftMax
+---
+{{APIRef("DOM")}}{{Non-standard_header}}
+
+**`Element.scrollLeftMax`** は読み取り専用のプロパティで、この要素で可能な最大の左スクロールオフセットを表す数値を返します。
+
+## 構文
+
+```js
+var pxl = element.scrollLeftMax;
+```
+
+## 仕様書
+
+_このプロパティはどの仕様書にも含まれていません。_
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 他の軸で同じ情報を提供する {{domxref("Element.scrollTopMax")}}。
-- 
cgit v1.2.3-54-g00ecf


From 9728c5435d5a51a5bd81b49fc6cea63824dcfae8 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 02:18:18 +0900
Subject: 2022/01/20 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/sethtml/index.md | 73 +++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 files/ja/web/api/element/sethtml/index.md

diff --git a/files/ja/web/api/element/sethtml/index.md b/files/ja/web/api/element/sethtml/index.md
new file mode 100644
index 0000000000..f00984c539
--- /dev/null
+++ b/files/ja/web/api/element/sethtml/index.md
@@ -0,0 +1,73 @@
+---
+title: Element.setHTML()
+slug: Web/API/Element/setHTML
+tags:
+  - HTML 無害化 API
+  - メソッド
+  - Element.setHTML
+  - setHTML
+  - 実験的
+browser-compat: api.Element.setHTML
+translation_of: Web/API/Element/setHTML
+---
+{{SeeCompatTable}}{{DefaultAPISidebar("HTML Sanitizer API")}}
+
+**`setHTML()`** は {{domxref("Element")}} インターフェイスのメソッドで、 HTML の文字列を解釈して無害化し、この要素のサブツリーとして DOM に挿入します。
+信頼できない HTML の文字列を挿入するために、 {{domxref("Element.innerHTML")}} の代わりに使用してください。
+
+解釈処理では、現在の要素のコンテキストで無効な HTML 文字列の要素を削除し、無害化処理では、安全でない、あるいは不要な要素、属性、コメントを削除します。
+既定の `Sanitizer()` 設定では、{{HTMLElement("script")}} タグ、カスタム要素、コメントを含む XSS 関連の入力が取り除かれます。
+無害化の設定は {{domxref("Sanitizer.Sanitizer", "Sanitizer()")}} コンストラクターのオプションを使用してカスタマイズすることができます。
+
+> **Note:** 対象となる要素がまだない場合など、後の時点で DOM に文字列を挿入する必要がある場合は、このメソッドの代わりに {{domxref("Sanitizer.sanitizeFor()")}} を使用してください。
+
+## 構文
+
+```js
+setHTML(input, sanitizer)
+```
+
+### 引数
+
+- `input`
+  - : 無害化する HTML を定義する文字列です。
+- `sanitizer`
+  - : {{domxref("Sanitizer")}} で、入力されたどの要素を無害化するかを定義します。
+
+### 返値
+
+`undefined`
+
+### 例外
+
+なし。
+
+## 例
+
+以下のコードは、 HTML の文字列を無害化して、 id が `target` である `Element` に挿入する方法を示しています。
+
+```js
+const unsanitized_string = "abc <script>alert(1)</script> def";  // 無害化前の HTML の文字列
+const sanitizer = new Sanitizer();  // 既定の無害化
+
+// id が "target" の Element を取得し、無害化された文字列を設定します。
+document.getElementById("target").setHTML(unsanitized_string, sanitizer);
+
+// 結果 (文字列): "abc  def"
+```
+
+> **Note:** この例では既定の無害化を使用しています。
+> {{domxref("Sanitizer/Sanitizer","Sanitizer")}} コンストラクターで無害化のオプションを構成することができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Sanitizer.sanitizeFor()")}}
+- {{domxref('HTML Sanitizer API')}}
-- 
cgit v1.2.3-54-g00ecf


From c44382a6c2ae617dd4e36d987ac3b97446c46111 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Mar 2022 16:19:44 +0100
Subject: Bump technote-space/get-diff-action from 4.2 to 6.0.1 (#3619)

Bumps [technote-space/get-diff-action](https://github.com/technote-space/get-diff-action) from 4.2 to 6.0.1.
- [Release notes](https://github.com/technote-space/get-diff-action/releases)
- [Changelog](https://github.com/technote-space/get-diff-action/blob/main/.releasegarc)
- [Commits](https://github.com/technote-space/get-diff-action/compare/v4.2...v6.0.1)

---
updated-dependencies:
- dependency-name: technote-space/get-diff-action
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/pr-test.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index 115403b438..7ef6985799 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -67,7 +67,7 @@ jobs:
           # Now, this gets used by the `git diff ...` inside get-diff-action.
           git config --global core.quotePath false
 
-      - uses: technote-space/get-diff-action@v4.2
+      - uses: technote-space/get-diff-action@v6.0.1
         id: git_diff_content
         with:
           PATTERNS: files/**/*.+(html|md)
@@ -168,7 +168,7 @@ jobs:
           name: build
           path: ${{ env.BUILD_OUT_ROOT }}
 
-      - uses: technote-space/get-diff-action@v4.2
+      - uses: technote-space/get-diff-action@v6.0.1
         with:
           PATTERNS: files/**/*.+(png|jpeg|jpg|gif|svg|webp)
           ABSOLUTE: true
-- 
cgit v1.2.3-54-g00ecf


From 9cde6268bb046e6648757e553254163c53257885 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Mar 2022 16:23:48 +0100
Subject: Bump actions/setup-node from 2 to 3 (#4485)

Bumps [actions/setup-node](https://github.com/actions/setup-node) from 2 to 3.
- [Release notes](https://github.com/actions/setup-node/releases)
- [Commits](https://github.com/actions/setup-node/compare/v2...v3)

---
updated-dependencies:
- dependency-name: actions/setup-node
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/markdown-lint.yml           | 2 +-
 .github/workflows/pr-check_redirects.yml      | 2 +-
 .github/workflows/pr-test.yml                 | 2 +-
 .github/workflows/sync-translated-content.yml | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml
index 7a6fde4818..8b6e8d75b1 100644
--- a/.github/workflows/markdown-lint.yml
+++ b/.github/workflows/markdown-lint.yml
@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: "12"
 
diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml
index 7fbc1a99b6..11cf9344d0 100644
--- a/.github/workflows/pr-check_redirects.yml
+++ b/.github/workflows/pr-check_redirects.yml
@@ -22,7 +22,7 @@ jobs:
           path: mdn/content
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.4
+        uses: actions/setup-node@v3
         with:
           node-version: "12"
 
diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index 7ef6985799..017a060423 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -28,7 +28,7 @@ jobs:
           path: mdn/content
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.4
+        uses: actions/setup-node@v3
         with:
           node-version: "12"
 
diff --git a/.github/workflows/sync-translated-content.yml b/.github/workflows/sync-translated-content.yml
index abaf2514aa..be7f5f5a39 100644
--- a/.github/workflows/sync-translated-content.yml
+++ b/.github/workflows/sync-translated-content.yml
@@ -24,7 +24,7 @@ jobs:
           path: mdn/content
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.4
+        uses: actions/setup-node@v3
         with:
           node-version: "12"
 
-- 
cgit v1.2.3-54-g00ecf


From d5bb7deaa1df267437346f9c346a4658cc028987 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Mar 2022 16:26:41 +0100
Subject: Bump actions/checkout from 2 to 3 (#4484)

Bumps [actions/checkout](https://github.com/actions/checkout) from 2 to 3.
- [Release notes](https://github.com/actions/checkout/releases)
- [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md)
- [Commits](https://github.com/actions/checkout/compare/v2...v3)

---
updated-dependencies:
- dependency-name: actions/checkout
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/markdown-lint.yml           | 2 +-
 .github/workflows/pr-check_redirects.yml      | 4 ++--
 .github/workflows/pr-review-companion.yml     | 2 +-
 .github/workflows/pr-test.yml                 | 4 ++--
 .github/workflows/sync-translated-content.yml | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml
index 8b6e8d75b1..2c6022c677 100644
--- a/.github/workflows/markdown-lint.yml
+++ b/.github/workflows/markdown-lint.yml
@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml
index 11cf9344d0..a46d3c413b 100644
--- a/.github/workflows/pr-check_redirects.yml
+++ b/.github/workflows/pr-check_redirects.yml
@@ -14,9 +14,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           repository: mdn/content
           path: mdn/content
diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml
index fa92d70475..72c334d945 100644
--- a/.github/workflows/pr-review-companion.yml
+++ b/.github/workflows/pr-review-companion.yml
@@ -61,7 +61,7 @@ jobs:
         run: |
           7z x build.zip -obuild -bb1
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
            repository: mdn/yari
            path: yari
diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml
index 017a060423..22dbe62b4a 100644
--- a/.github/workflows/pr-test.yml
+++ b/.github/workflows/pr-test.yml
@@ -16,13 +16,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         # Needed otherswise it will check out a merge commit which means
         # you can't get a `git diff` for this PR compared to its base.
         # with:
         #   ref: ${{ github.event.pull_request.head.sha }}
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           repository: mdn/content
           path: mdn/content
diff --git a/.github/workflows/sync-translated-content.yml b/.github/workflows/sync-translated-content.yml
index be7f5f5a39..ac2c163933 100644
--- a/.github/workflows/sync-translated-content.yml
+++ b/.github/workflows/sync-translated-content.yml
@@ -16,9 +16,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           repository: mdn/content
           path: mdn/content
-- 
cgit v1.2.3-54-g00ecf


From a1d4f7bde47e212fa231f624f3a09eb49abda2a5 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Mar 2022 17:52:53 +0200
Subject: Bump actions/setup-python from 2.2.2 to 3 (#4457)

Bumps [actions/setup-python](https://github.com/actions/setup-python) from 2.2.2 to 3.
- [Release notes](https://github.com/actions/setup-python/releases)
- [Commits](https://github.com/actions/setup-python/compare/v2.2.2...v3)

---
updated-dependencies:
- dependency-name: actions/setup-python
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/pr-review-companion.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml
index 72c334d945..97bc8ffb9a 100644
--- a/.github/workflows/pr-review-companion.yml
+++ b/.github/workflows/pr-review-companion.yml
@@ -67,7 +67,7 @@ jobs:
            path: yari
 
       - name: Install Python
-        uses: actions/setup-python@v2.2.2
+        uses: actions/setup-python@v3
         with:
           python-version: "3.8"
 
-- 
cgit v1.2.3-54-g00ecf


From 8c4d9e888565bf2c225b78df8f2a6094c88e709c Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Tue, 8 Mar 2022 22:18:26 +0100
Subject: Update console.dir (#4479)

* update console.dir after browsing

* Link to french doc/clarify page is english

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
---
 files/fr/web/api/console/dir/index.md | 40 ++++++++++++++---------------------
 1 file changed, 16 insertions(+), 24 deletions(-)

diff --git a/files/fr/web/api/console/dir/index.md b/files/fr/web/api/console/dir/index.md
index c63a997ea5..638d28ac5c 100644
--- a/files/fr/web/api/console/dir/index.md
+++ b/files/fr/web/api/console/dir/index.md
@@ -1,47 +1,39 @@
 ---
-title: Console.dir()
-slug: Web/API/Console/dir
-tags:
-  - API
-  - DOM
-  - Développement
-  - Méthodes
-  - Web
-  - console
-  - débogage
+title: console.dir()
+slug: Web/API/console/dir
 translation_of: Web/API/Console/dir
+browser-compat: api.console.dir
 ---
 {{APIRef("Console API")}}
 
-Affiche une liste interactive des propriétés de l'objet Javascript spécifié. La sortie est présenté comme un listing hiérarchique avec des triangles qui permettent l'affichage du contenu des objets-enfants.
+La méthode **`console.dir()`** affiche une liste interactive des propriétés de l'objet JavaScript passé en argument. La sortie est présentée comme une liste hiérarchique avec des triangles qui permettent de développer l'arborescence de l'objet et de voir le contenu des objets descendants.
 
-En d'autres termes, console.dir est le moyen de voir toutes les propriétés de l'objet JavaScript spécifié dans la console, par lequel le développeur peut facilement obtenir les propriétés de l'objet.
+Autrement dit, `console.dir()` permet de voir l'ensemble des propriétés d'un objet JavaScript dans la console.
 
 {{AvailableInWorkers}}
 
-![](console-dir.png)
+![Une capture d'écran de l'instruction console.dir() où on peut voir les propriétés de `document.location`](console-dir.png)
 
 ## Syntaxe
 
-    console.dir(object);
+```js
+console.dir(object);
+```
 
-## Paramètres
+### Paramètres
 
 - `object`
-  - : Un objet Javascript qui contient les propriétés qui doivent être affichées.
+  - : Un objet JavaScript dont on souhaite afficher les propriétés dans la console.
 
-## Spécification
+## Spécifications
 
-| Spécification                                                        | Statut                           | Commentaire          |
-| -------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName("Console API", "#dir", "console.dir()")}} | {{Spec2("Console API")}} | Définition initiale. |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("api.Console.dir")}}
+{{Compat}}
 
 ## Voir aussi
 
-- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
-- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
-- [Chrome Console API reference](https://developers.google.com/chrome-developer-tools/docs/console-api#consoledirobject)
+- [Microsoft Docs&nbsp;: référence de l'API Console](https://docs.microsoft.com/fr-fr/microsoft-edge/devtools-guide-chromium/console/api#dir)
+- [Chrome&nbsp;: référence de l'API Console (en anglais)](https://developer.chrome.com/docs/devtools/console/api/#dir)
-- 
cgit v1.2.3-54-g00ecf


From 48fc140678926d51b14411105262c87301860575 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Wed, 9 Mar 2022 00:13:03 +0000
Subject: [CRON] sync translated content

---
 files/ja/_redirects.txt                            |  1 +
 files/ja/_wikihistory.json                         |  8 +--
 .../web/api/screen/onorientationchange/index.html  | 56 ---------------------
 .../api/screen/orientationchange_event/index.html  | 57 ++++++++++++++++++++++
 files/ko/_redirects.txt                            |  7 +--
 files/ko/_wikihistory.json                         | 12 ++---
 .../web/api/screen/onorientationchange/index.html  | 41 ----------------
 .../api/screen/orientationchange_event/index.html  | 41 ++++++++++++++++
 8 files changed, 113 insertions(+), 110 deletions(-)
 delete mode 100644 files/ja/web/api/screen/onorientationchange/index.html
 create mode 100644 files/ja/web/api/screen/orientationchange_event/index.html
 delete mode 100644 files/ko/web/api/screen/onorientationchange/index.html
 create mode 100644 files/ko/web/api/screen/orientationchange_event/index.html

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 3adaee9525..f7931e8e02 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3268,6 +3268,7 @@
 /ja/docs/Web/API/Response/useFinalURL	/ja/docs/orphaned/Web/API/Response/useFinalURL
 /ja/docs/Web/API/SVGTests	/ja/docs/orphaned/Web/API/SVGTests
 /ja/docs/Web/API/SVGTransformable	/ja/docs/orphaned/Web/API/SVGTransformable
+/ja/docs/Web/API/Screen/onorientationchange	/ja/docs/Web/API/Screen/orientationchange_event
 /ja/docs/Web/API/ScrollToOptions	/ja/docs/conflicting/Web/API/Window/scroll
 /ja/docs/Web/API/ServiceWorkerGlobalScope/caches	/ja/docs/conflicting/Web/API/caches
 /ja/docs/Web/API/ServiceWorker_API	/ja/docs/Web/API/Service_Worker_API
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index d17ceed58b..7615f224f5 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -21161,15 +21161,15 @@
       "shuuji3"
     ]
   },
-  "Web/API/Screen/onorientationchange": {
-    "modified": "2020-10-15T21:52:15.970Z",
+  "Web/API/Screen/orientation": {
+    "modified": "2020-10-15T21:52:16.035Z",
     "contributors": [
       "mfuji09",
       "shuuji3"
     ]
   },
-  "Web/API/Screen/orientation": {
-    "modified": "2020-10-15T21:52:16.035Z",
+  "Web/API/Screen/orientationchange_event": {
+    "modified": "2020-10-15T21:52:15.970Z",
     "contributors": [
       "mfuji09",
       "shuuji3"
diff --git a/files/ja/web/api/screen/onorientationchange/index.html b/files/ja/web/api/screen/onorientationchange/index.html
deleted file mode 100644
index 975b5ede0e..0000000000
--- a/files/ja/web/api/screen/onorientationchange/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Screen.onorientationchange
-slug: Web/API/Screen/onorientationchange
-tags:
-  - API
-  - CSSOM View
-  - Deprecated
-  - Event Handler
-  - Property
-  - Screen Orientation
-translation_of: Web/API/Screen/onorientationchange
----
-<p>{{APIRef("Screen Orientation API")}}{{Deprecated_Header}}</p>
-
-<div class="blockIndicator warning">
-<p><strong>警告:</strong> これは標準外で非推奨の機能であり、 Firefox だけが異なる名前で実装されていました。代わりに {{DOMxRef("ScreenOrientation.onchange")}} を使用してください。</p>
-</div>
-
-<p>Screen オブジェクトに送信される {{domxref("Window/orientationchange_event", "orientationchange")}} イベントのイベントハンドラーです。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">screen.onorientationchange = <var>funcRef</var>;
-</pre>
-
-<p>ここで <code>funcRef</code> は関数への参照です。</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Screen Orientation', 'published/20140220.html#extensions-to-the-screen-interface', 'onorientationchange')}}</td>
-   <td>{{Spec2('Screen Orientation')}}</td>
-   <td>初回定義 (草稿には既に存在しません)</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Screen.onorientationchange")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{event("orientationchange")}}</li>
- <li><a href="/ja/docs/Managing_screen_orientation">画面の向きの管理</a></li>
-</ul>
diff --git a/files/ja/web/api/screen/orientationchange_event/index.html b/files/ja/web/api/screen/orientationchange_event/index.html
new file mode 100644
index 0000000000..67b8f8a6b2
--- /dev/null
+++ b/files/ja/web/api/screen/orientationchange_event/index.html
@@ -0,0 +1,57 @@
+---
+title: Screen.onorientationchange
+slug: Web/API/Screen/orientationchange_event
+tags:
+  - API
+  - CSSOM View
+  - Deprecated
+  - Event Handler
+  - Property
+  - Screen Orientation
+translation_of: Web/API/Screen/onorientationchange
+original_slug: Web/API/Screen/onorientationchange
+---
+<p>{{APIRef("Screen Orientation API")}}{{Deprecated_Header}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>警告:</strong> これは標準外で非推奨の機能であり、 Firefox だけが異なる名前で実装されていました。代わりに {{DOMxRef("ScreenOrientation.onchange")}} を使用してください。</p>
+</div>
+
+<p>Screen オブジェクトに送信される {{domxref("Window/orientationchange_event", "orientationchange")}} イベントのイベントハンドラーです。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">screen.onorientationchange = <var>funcRef</var>;
+</pre>
+
+<p>ここで <code>funcRef</code> は関数への参照です。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Screen Orientation', 'published/20140220.html#extensions-to-the-screen-interface', 'onorientationchange')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>初回定義 (草稿には既に存在しません)</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Screen.onorientationchange")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{event("orientationchange")}}</li>
+ <li><a href="/ja/docs/Managing_screen_orientation">画面の向きの管理</a></li>
+</ul>
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index f8ecb5e8f5..a69d0e95b6 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -489,10 +489,11 @@
 /ko/docs/Web/API/RandomSource/getRandomValues	/ko/docs/Web/API/Crypto/getRandomValues
 /ko/docs/Web/API/Screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
 /ko/docs/Web/API/Screen.lockOrientation/window.screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
-/ko/docs/Web/API/Screen.onorientationchange	/ko/docs/Web/API/Screen/onorientationchange
-/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange	/ko/docs/Web/API/Screen/onorientationchange
+/ko/docs/Web/API/Screen.onorientationchange	/ko/docs/Web/API/Screen/orientationchange_event
+/ko/docs/Web/API/Screen.onorientationchange/window.screen.onorientationchange	/ko/docs/Web/API/Screen/orientationchange_event
 /ko/docs/Web/API/Screen.orientation	/ko/docs/Web/API/Screen/orientation
 /ko/docs/Web/API/Screen.orientation/window.screen.orientation	/ko/docs/Web/API/Screen/orientation
+/ko/docs/Web/API/Screen/onorientationchange	/ko/docs/Web/API/Screen/orientationchange_event
 /ko/docs/Web/API/Streams_API/컨셉	/ko/docs/Web/API/Streams_API/Concepts
 /ko/docs/Web/API/WebGL_API/Adding_2D_content_to_a_WebGL_context	/ko/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
 /ko/docs/Web/API/WebGL_API/Animating_objects_with_WebGL	/ko/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
@@ -512,7 +513,7 @@
 /ko/docs/Web/API/window.navigator.battery	/ko/docs/Web/API/Navigator/battery
 /ko/docs/Web/API/window.navigator.connection	/ko/docs/Web/API/Navigator/connection
 /ko/docs/Web/API/window.screen.lockOrientation	/ko/docs/Web/API/Screen/lockOrientation
-/ko/docs/Web/API/window.screen.onorientationchange	/ko/docs/Web/API/Screen/onorientationchange
+/ko/docs/Web/API/window.screen.onorientationchange	/ko/docs/Web/API/Screen/orientationchange_event
 /ko/docs/Web/API/window.screen.orientation	/ko/docs/Web/API/Screen/orientation
 /ko/docs/Web/API/window.screen.unlockOrientation	/ko/docs/Web/API/Screen/unlockOrientation
 /ko/docs/Web/CSS/All_About_The_Containing_Block	/ko/docs/Web/CSS/Containing_block
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index ecc1af296f..6c67d4c18d 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -6381,18 +6381,18 @@
       "junho85"
     ]
   },
-  "Web/API/Screen/onorientationchange": {
-    "modified": "2019-03-23T23:26:53.977Z",
+  "Web/API/Screen/orientation": {
+    "modified": "2019-03-23T23:27:06.864Z",
     "contributors": [
-      "jsx",
+      "fscholz",
       "teoli",
       "junho85"
     ]
   },
-  "Web/API/Screen/orientation": {
-    "modified": "2019-03-23T23:27:06.864Z",
+  "Web/API/Screen/orientationchange_event": {
+    "modified": "2019-03-23T23:26:53.977Z",
     "contributors": [
-      "fscholz",
+      "jsx",
       "teoli",
       "junho85"
     ]
diff --git a/files/ko/web/api/screen/onorientationchange/index.html b/files/ko/web/api/screen/onorientationchange/index.html
deleted file mode 100644
index 2e8c0c3e83..0000000000
--- a/files/ko/web/api/screen/onorientationchange/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: window.screen.onorientationchange
-slug: Web/API/Screen/onorientationchange
-translation_of: Web/API/Screen/onorientationchange
-original_slug: Web/API/Screen.onorientationchange
----
-<p>{{ ApiRef() }}</p>
-<p>{{SeeCompatTable}}</p>
-<h2 id="Summary" name="Summary">Summary</h2>
-<p>{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.</p>
-<h2 id="Syntax" name="Syntax">Syntax</h2>
-<pre>screen.onorientationchange = <em>funcRef</em>;
-</pre>
-<p><code>funcRef</code> 는 함수로의 참조 이다.</p>
-<h2 id="Specifications">Specifications</h2>
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Screen Orientation')}}</td>
-   <td>{{Spec2('Screen Orientation')}}</td>
-   <td>Draft specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-<p>{{Compat("api.Screen.onorientationchange")}}</p>
-
-<h2 id="See_also">See also</h2>
-<ul>
- <li>{{ event("orientationchange") }}</li>
- <li><a href="/ko/docs/Managing_screen_orientation" title="/ko/docs/Managing_screen_orientation">Managing screen orientation</a></li>
-</ul>
diff --git a/files/ko/web/api/screen/orientationchange_event/index.html b/files/ko/web/api/screen/orientationchange_event/index.html
new file mode 100644
index 0000000000..9a2ee40715
--- /dev/null
+++ b/files/ko/web/api/screen/orientationchange_event/index.html
@@ -0,0 +1,41 @@
+---
+title: window.screen.onorientationchange
+slug: Web/API/Screen/orientationchange_event
+translation_of: Web/API/Screen/onorientationchange
+original_slug: Web/API/Screen/onorientationchange
+---
+<p>{{ ApiRef() }}</p>
+<p>{{SeeCompatTable}}</p>
+<h2 id="Summary" name="Summary">Summary</h2>
+<p>{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.</p>
+<h2 id="Syntax" name="Syntax">Syntax</h2>
+<pre>screen.onorientationchange = <em>funcRef</em>;
+</pre>
+<p><code>funcRef</code> 는 함수로의 참조 이다.</p>
+<h2 id="Specifications">Specifications</h2>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Screen Orientation')}}</td>
+   <td>{{Spec2('Screen Orientation')}}</td>
+   <td>Draft specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("api.Screen.onorientationchange")}}</p>
+
+<h2 id="See_also">See also</h2>
+<ul>
+ <li>{{ event("orientationchange") }}</li>
+ <li><a href="/ko/docs/Managing_screen_orientation" title="/ko/docs/Managing_screen_orientation">Managing screen orientation</a></li>
+</ul>
-- 
cgit v1.2.3-54-g00ecf


From 262b32d2dae209e058ab5942e8b2decad0c272f1 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Wed, 9 Mar 2022 06:28:45 +0100
Subject: Update index.md (#4490)

Add missing word
---
 files/fr/learn/javascript/first_steps/math/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md
index 33e7c0acda..c7f77d2fe1 100644
--- a/files/fr/learn/javascript/first_steps/math/index.md
+++ b/files/fr/learn/javascript/first_steps/math/index.md
@@ -373,7 +373,7 @@ function updateBtn() {
 
 Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau.
 
-> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état l'autre — allumé, éteint, etc.
+> **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc.
 
 ## Résumé
 
-- 
cgit v1.2.3-54-g00ecf


From b62ebf6755c2756564b5deeb67da222b595b65c1 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Wed, 9 Mar 2022 13:00:52 +0100
Subject: Update index.md (#4491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajout d'un mot manquant dans le paragraphe "Les chaînes de caractères sont des objets"
---
 files/fr/learn/javascript/first_steps/useful_string_methods/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
index 8575a06e76..6ee07beb5c 100644
--- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md
@@ -51,7 +51,7 @@ let string = 'Ceci est une chaîne';
 
 votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page !
 
-**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous utiliserez  certaines assez souvent. Nous allons les voir maintenant.
+**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant.
 
 Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez).
 
-- 
cgit v1.2.3-54-g00ecf


From eed124c5b15c59e88fb0d3dee7390c7c4e7b76c5 Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Wed, 9 Mar 2022 17:59:16 +0900
Subject: user_input_methods 修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 08cc862863..b2fde6515a 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -14,7 +14,7 @@ tags:
 translation_of: Web/Guide/User_input_methods
 ---
 <div class="summary">
-<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術についてより詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">ポインターロック API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ</a>などがあります。</span></p>
+<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>などがあります。</span></p>
 </div>
 
 <h2 id="User_input_and_controls_workflow" name="User_input_and_controls_workflow">ユーザー入力とコントロールのワークフロー</h2>
@@ -32,7 +32,7 @@ translation_of: Web/Guide/User_input_methods
 <ul>
  <li>デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するための<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>を提供します。</li>
  <li>ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。</li>
- <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面の向きを制御する API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
  <li>キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。</li>
 </ul>
 
@@ -187,10 +187,10 @@ if (elem.requestFullscreen) {
  <li>{{domxref("MouseEvent")}}</li>
  <li>{{domxref("KeyboardEvent")}}</li>
  <li><a href="/ja/docs/Web/API/Touch_events">タッチイベント</a></li>
- <li>{{domxref("Pointer_Lock_API")}}</li>
- <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">画面回転 API</a></li>
- <li><a href="/ja/docs/Web/API/Fullscreen_API">全画面 API</a></li>
- <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ</a></li>
+ <li><a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a></li>
+ <li><a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a></li>
+ <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li>
+ <li><a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a></li>
  <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツを編集可能にする</a></li>
  <li><a href="/ja/Firefox_OS/Platform/Keyboard_events_in_Firefox_OS_TV">Keyboard events in Firefox OS TV</a></li>
  <li><a href="/ja/docs/Mozilla/Firefox_OS/TVs_connected_devices/TV_remote_control_navigation">Implementing TV remote control navigation</a></li>
-- 
cgit v1.2.3-54-g00ecf


From 994e42e36edcc8d4fa4b4e99e0a05d361599820b Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Sat, 5 Mar 2022 17:53:12 +0900
Subject: user_input_methods のワークフローの日本語訳を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index b2fde6515a..bd5cfa5783 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -19,11 +19,11 @@ translation_of: Web/Guide/User_input_methods
 
 <h2 id="User_input_and_controls_workflow" name="User_input_and_controls_workflow">ユーザー入力とコントロールのワークフロー</h2>
 
-<p>The following diagram illustrates the typical workflow for implementing user input mechanisms:</p>
+<p>次の図式は、ユーザー入力の仕組みを実装するための典型的なワークフローを説明しています。</p>
 
 <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
 
-<p>First of all, you need to decide which input mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on. Once you decided the input mechanisms, you can control them using tools offered by the web platform or JavaScript libraries.</p>
+<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、Web プラットフォームや JavaScript ライブラリによって提供されているツールを使い、制御することができます。</p>
 
 <h2 id="Recommendations" name="Recommendations">推奨事項</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 38866d01224607efdc0b141ba19d40530ef7fa2d Mon Sep 17 00:00:00 2001
From: Atsuto Yamashita <nyxht500@yahoo.co.jp>
Date: Sat, 5 Mar 2022 22:08:27 +0900
Subject: Web をウェブに変更
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index bd5cfa5783..fd2eb8c503 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -23,7 +23,7 @@ translation_of: Web/Guide/User_input_methods
 
 <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
 
-<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、Web プラットフォームや JavaScript ライブラリによって提供されているツールを使い、制御することができます。</p>
+<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリによって提供されているツールを使い、制御することができます。</p>
 
 <h2 id="Recommendations" name="Recommendations">推奨事項</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 9ef5bf3f0c5d38b85f15ba430cd361d0791ef96a Mon Sep 17 00:00:00 2001
From: Atsuto Yamashita <nyxht500@yahoo.co.jp>
Date: Wed, 9 Mar 2022 17:43:53 +0900
Subject: ライブラリーに修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Masahiro FUJIMOTO <mfujimot@gmail.com>
---
 files/ja/web/guide/user_input_methods/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index fd2eb8c503..33c0668a0c 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -23,7 +23,7 @@ translation_of: Web/Guide/User_input_methods
 
 <p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/8085/user-input-and-controls.png" style="height: 86px; width: 303px;"></p>
 
-<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリによって提供されているツールを使い、制御することができます。</p>
+<p>最初に、マウス、キーボード、指でのタッチなどから、アプリケーションで対象としたい入力の仕組みをどれにするかを決める必要があります。入力の仕組みを決めたのであれば、ウェブプラットフォームや JavaScript ライブラリーによって提供されているツールを使い、制御することができます。</p>
 
 <h2 id="Recommendations" name="Recommendations">推奨事項</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 9f958517af1854b65c73c6d46d6d7a3a5d2045a9 Mon Sep 17 00:00:00 2001
From: Anderson Vallejo <48649209+Vallejoanderson@users.noreply.github.com>
Date: Wed, 9 Mar 2022 08:32:29 -0500
Subject: Rotate3d file updated to md (#4360)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs: update to md

* Apply suggestions from code review

Co-authored-by: Juan Vásquez <juan@logicalbricks.com>

* fix: missing specificatiopns

* chore: highlighting variables

Co-authored-by: Alexander <alexander_belial999@hotmail.com>

Co-authored-by: Juan Vásquez <juan@logicalbricks.com>
Co-authored-by: Alexander <alexander_belial999@hotmail.com>
---
 .../css/transform-function/rotate3d()/index.html   | 121 --------
 .../web/css/transform-function/rotate3d()/index.md | 320 +++++++++++++++++++++
 2 files changed, 320 insertions(+), 121 deletions(-)
 delete mode 100644 files/es/web/css/transform-function/rotate3d()/index.html
 create mode 100644 files/es/web/css/transform-function/rotate3d()/index.md

diff --git a/files/es/web/css/transform-function/rotate3d()/index.html b/files/es/web/css/transform-function/rotate3d()/index.html
deleted file mode 100644
index 86c5f44399..0000000000
--- a/files/es/web/css/transform-function/rotate3d()/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: rotate3d()
-slug: Web/CSS/transform-function/rotate3d()
-tags:
-  - CSS
-  - Funciones CSS
-  - Referencia
-translation_of: Web/CSS/transform-function/rotate3d()
----
-<div>{{CSSRef}}</div>
-
-<p>La función <code>rotate3d()</code> de CSS define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. La cantidad de movimiento está definida por el ángulo especificado; si es positivo, el movimiento será en el sentido de las agujas del reloj, si es negativo, será contrario a las agujas del reloj.</p>
-
-<p>En el espacio tridimencional, las rotaciones tienen tres grados de libertad, que describen un ángulo de rotación. El ángulo de rotación está definido por un vector [x, y, z] y pasa por el origen (como lo define la propiedad {{ cssxref("transform-origin") }} de CSS. Si el vector no está <em>normalizado</em>, lo que significa que la suma del cuadrado de sus tres coordenadas no es igual a 1, el mismo será normalizado internamente. Un vector no-normalizable, como es el caso del vector nulo, [0, 0, 0], causará que la rotación no sea aplicada, sin que esto invalide la propiedad CSS en su totalidad.</p>
-
-<div class="note">Contrario a las rotaciones en el plano, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas es crucial.</div>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<p>La cantidad de rotación creada por <code>rotate3d()</code> está especificada por tres {{cssxref("&lt;number&gt;")}}s y un {{cssxref("&lt;angle&gt;")}}. El <code>&lt;number&gt;</code>s representa las coordenadas x, y y z del vector, denotando los ejes de la rotación. El <code>&lt;angle&gt;</code> representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.</p>
-
-<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>)
-</pre>
-
-<h2 id="Valores">Valores</h2>
-
-<dl>
- <dt><em>x</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-x del vector y denota el eje de rotación.</dd>
- <dt><em>y</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-y del vector y denota el eje de rotación.</dd>
- <dt><em>z</em></dt>
- <dd>Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-z del vector y denota el eje de rotación.</dd>
- <dt><em>a</em></dt>
- <dd>Es un {{ cssxref("&lt;angle&gt;") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.</dd>
-</dl>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Coordenadas cartesianas en ℝ<sup>2</sup></th>
-   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>2</sup></th>
-   <th scope="col">Coordenadas cartesianas en ℝ<sup>3</sup></th>
-   <th scope="col">Coordenadas homogéneas en ℝℙ<sup>3</sup></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td colspan="2">Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.</td>
-   <td colspan="1"><a href="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png"><img src="/@api/deki/files/5987/=transform-functions-rotate3d_cart.png?size=webview" style="height: 47px; width: 510px;"></a><math> <mfenced><mtable><mtr><mtd>1<mo>+</mo>(1<mo>-</mo>cos(<mi>a</mi>))(<msup><mi>x</mi><mn>2</mn></msup><mo>-</mo>1)</mtd><mtd><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)+<mi>x</mi><mi>y</mi>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd><mo>-</mo><mi>y</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd></mtr><mtr><mtd><mo>-</mo><mi>z</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>x</mi><mi>y</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtd>1+(1-cos(a))(y2-1)</mtd><mtd><mi>x</mi><mo>·</mo>sen(<mi>a</mi>)<mo>+</mo><mi>y</mi><mi>z</mi><mo>·</mo>(1<mo>-</mo>cos(<mi>a</mi>))</mtd><mtr><mtd>ysin(a) + xz(1-cos(a))</mtd><mtd>-xsin(a)+yz(1-cos(a))</mtd><mtd>1+(1-cos(a))(z2-1)</mtd><mtd>t</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr> </mtr></mtable></mfenced></math></td>
-   <td colspan="1"><a href="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png"><img src="/@api/deki/files/5986/=transform-functions-rotate3d_hom4.png?size=webview" style="height: 61px; width: 522px;"></a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<h3 id="Rotar_sobre_el_eje-X">Rotar sobre el eje-X</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
-&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1,0,0,60deg);
-  background-color: blue;
-}
-</pre>
-
-<h4 id="Resultado">Resultado</h4>
-
-<p>{{EmbedLiveSample("Rotating_on_the_X-axis","100%","200")}}</p>
-
-<h3 id="Rotar_sobre_un_eje_personalizado">Rotar sobre un eje personalizado</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;foo&lt;/p&gt;
-&lt;p class="transformed"&gt;bar&lt;/p&gt;</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: blue;
-}
-</pre>
-
-<h4 id="Resultado_2">Resultado</h4>
-
-<p>{{EmbedLiveSample("Rotating_on_a_custom_axis","100%","200")}}</p>
-
-<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2>
-
-<p>Por favor vea el tipo de datos <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#Browser_compatibility">&lt;transform-function&gt;</a></code> para información sobre compatibilidad.</p>
-
-<h2 id="Ver_también">Ver también</h2>
-
-<p> </p>
-
-<ul>
- <li>{{cssxref("transform")}}</li>
- <li>{{cssxref("&lt;transform-function&gt;")}}</li>
-</ul>
-
-<p> </p>
diff --git a/files/es/web/css/transform-function/rotate3d()/index.md b/files/es/web/css/transform-function/rotate3d()/index.md
new file mode 100644
index 0000000000..c1c0ee7975
--- /dev/null
+++ b/files/es/web/css/transform-function/rotate3d()/index.md
@@ -0,0 +1,320 @@
+---
+title: rotate3d()
+slug: Web/CSS/transform-function/rotate3d()
+translation_of: Web/CSS/transform-function/rotate3d()
+browser-compat: css.types.transform-function.rotate3d
+---
+{{CSSRef}}
+
+La [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("&lt;transform-function&gt;")}}.
+
+{{EmbedInteractiveExample("pages/css/rotate3d.html")}}
+
+En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el  {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad.
+
+> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado.
+
+## Sintaxis
+
+La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("&lt;number&gt;")}}s y un {{cssxref("&lt;angle&gt;")}}. El `<number>` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `<angle>` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto.
+
+```css
+rotate3d(x, y, z, a)
+```
+
+## Valores
+
+- `x`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-x del vector y denota el eje de rotación.
+- `y`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-y del vector y denota el eje de rotación.
+- `z`
+  - : Es un {{cssxref("&lt;number&gt;")}} que describe la coordenada-z del vector y denota el eje de rotación.
+- `a`
+  - : Es un {{ cssxref("&lt;angle&gt;") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj.
+
+<table class="standard-table">
+  <tbody>
+    <tr>
+      <th scope="col">Coordenadas cartesianas en ℝ^2</th>
+      <td rowspan="2">
+        Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano.
+      </td>
+      </tr>
+    <tr>
+      <th scope="col">Coordenadas homogéneas en ℝℙ^2</th>
+    </tr>
+    <tr>
+      <th scope="col">Coordenadas cartesianas en ℝ^3</th>
+      <td>
+        <a
+          href="/es/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_cart.png"
+          ><img src="transform-functions-rotate3d_cart.png" /></a
+        ><math>
+          <mrow><mo>(</mo
+            ><mtable
+              ><mtr
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <msup
+                    ><mi>x</mi>
+                    <mn>2</mn> </msup
+                  ><mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mi>z</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>y</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>y</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                </mtd></mtr
+              ><mtr
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>x</mi>
+                  <mi>y</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <mi>y2</mi>
+                  <mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mi>x</mi>
+                  <mo>·</mo>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>y</mi>
+                  <mi>z</mi>
+                  <mo>·</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                </mtd></mtr
+              ><mtr
+                ><mtd
+                  ><mi>y</mi>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>xz</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mo>-</mo>
+                  <mi>x</mi>
+                  <mo>sin</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>+</mo>
+                  <mi>yz</mi>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo> </mtd
+                ><mtd
+                  ><mn>1</mn>
+                  <mo>+</mo>
+                  <mo>(</mo>
+                  <mn>1</mn>
+                  <mo>-</mo>
+                  <mo>cos</mo>
+                  <mo>(</mo>
+                  <mi>a</mi>
+                  <mo>)</mo>
+                  <mo>)</mo>
+                  <mo>(</mo>
+                  <mi>z2</mi>
+                  <mo>-</mo>
+                  <mn>1</mn>
+                  <mo>)</mo> </mtd
+                ><mtd><mi>t</mi></mtd> </mtr
+              ><mtr
+                ><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
+                ><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
+              ></mtable
+            ><mo>)</mo></mrow
+          ></math
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="col">Coordenadas homogéneas en ℝℙ^3</th>
+      <td>
+        <a
+          href="/es/docs/Web/CSS/transform-function/rotate3d()/transform-functions-rotate3d_hom4.png"
+          ><img src="transform-functions-rotate3d_hom4.png"
+        /></a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## Ejemplos
+
+### Rotar sobre el eje-Y
+
+#### HTML
+
+```html
+<div>Normal</div>
+<div class="rotated">Rotado</div>
+```
+
+#### CSS
+
+```css
+body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}
+
+### Rotar sobre un eje personalizado
+
+#### HTML
+
+```html
+<div>Normal</div>
+<div class="rotated">Rotado</div>
+```
+
+#### CSS
+
+```css
+body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{cssxref("transform")}}
+- {{cssxref("&lt;transform-function&gt;")}}
-- 
cgit v1.2.3-54-g00ecf


From 5f1fe948720f1ab0143c9a22d89c753d76081627 Mon Sep 17 00:00:00 2001
From: kraccoon-dev <kraccoon0420@gmail.com>
Date: Thu, 24 Feb 2022 19:55:59 +0900
Subject: add compositing and blending

---
 files/ko/web/css/compositing_and_blending/index.md | 46 ++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 files/ko/web/css/compositing_and_blending/index.md

diff --git a/files/ko/web/css/compositing_and_blending/index.md b/files/ko/web/css/compositing_and_blending/index.md
new file mode 100644
index 0000000000..e42541fe6c
--- /dev/null
+++ b/files/ko/web/css/compositing_and_blending/index.md
@@ -0,0 +1,46 @@
+---
+title: Compositing and Blending
+slug: Web/CSS/Compositing_and_Blending
+tags:
+  - CSS
+  - Compositing and Blending
+  - Guide
+  - Overview
+  - Reference
+translation_of: Web/CSS/Compositing_and_Blending
+---
+{{CSSRef}}
+
+**Compositing and Blending**은 서로 다른 요소의 모양을 단일 이미지로 결합하는 방법을 정의하는 CSS 모듈입니다.
+
+## 참고
+
+### 속성
+
+- {{cssxref("background-blend-mode")}}
+- {{cssxref("isolation")}}
+- {{cssxref("mix-blend-mode")}}
+
+### 데이터 타입
+
+- {{cssxref("&lt;blend-mode&gt;")}}
+
+## 명세
+
+| Specification                        | Status                           | Comment            |
+| ------------------------------------ | -------------------------------- | ------------------ |
+| {{SpecName("Compositing")}} | {{Spec2("Compositing")}} | Initial definition |
+
+## 브라우저 호환성
+
+### `background-blend-mode` 속성
+
+{{Compat("css.properties.background-blend-mode")}}
+
+### `isolation` 속성
+
+{{Compat("css.properties.isolation")}}
+
+### `mix-blend-mode` 속성
+
+{{Compat("css.properties.mix-blend-mode")}}
-- 
cgit v1.2.3-54-g00ecf


From c04a0d2274c4d4a9519744f89d305f11a860e2dd Mon Sep 17 00:00:00 2001
From: 정현수 <54893898+junghyeonsu@users.noreply.github.com>
Date: Wed, 9 Mar 2022 22:49:50 +0900
Subject: fix typo (#4370)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `험수` to `함수` in line 27
---
 files/ko/web/javascript/reference/classes/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ko/web/javascript/reference/classes/index.html b/files/ko/web/javascript/reference/classes/index.html
index 3e6bfc0a8f..5c435956a1 100644
--- a/files/ko/web/javascript/reference/classes/index.html
+++ b/files/ko/web/javascript/reference/classes/index.html
@@ -24,7 +24,7 @@ translation_of: Web/JavaScript/Reference/Classes
 
 <h4 id="Hoisting">Hoisting</h4>
 
-<p><strong>함수 선언</strong>과 <strong>클래스 선언</strong>의 중요한 차이점은 험수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점입니다. 다음 코드는 {{jsxref("ReferenceError")}}를 던질 것입니다.</p>
+<p><strong>함수 선언</strong>과 <strong>클래스 선언</strong>의 중요한 차이점은 함수의 경우 정의하기 하기 전에 호출할 수 있지만, 클래스는 반드시 정의한 뒤에 사용할 수 있다는 점입니다. 다음 코드는 {{jsxref("ReferenceError")}}를 던질 것입니다.</p>
 
 <pre class="brush: js example-bad ">const p = new Rectangle(); // ReferenceError
 
-- 
cgit v1.2.3-54-g00ecf


From 6f98cd0c69feb416ed20ff24c00826e739cc58f4 Mon Sep 17 00:00:00 2001
From: "Charles Emmanuel S. Ndiaye" <manusquall@outlook.com>
Date: Thu, 10 Mar 2022 05:22:18 +0000
Subject: Suggest french translation dor id 4260 (#4492)

* suggest french translation dor id 4260

* changes according to @SphinxKnight Review

changes according to @SphinxKnight Review
---
 .../fr/web/api/htmlmediaelement/buffered/index.md  | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 files/fr/web/api/htmlmediaelement/buffered/index.md

diff --git a/files/fr/web/api/htmlmediaelement/buffered/index.md b/files/fr/web/api/htmlmediaelement/buffered/index.md
new file mode 100644
index 0000000000..f23457ac90
--- /dev/null
+++ b/files/fr/web/api/htmlmediaelement/buffered/index.md
@@ -0,0 +1,40 @@
+---
+title: HTMLMediaElement.buffered
+slug: Web/API/HTMLMediaElement/buffered
+browser-compat: api.HTMLMediaElement.buffered
+translation_of: Web/API/HTMLMediaElement/buffered
+---
+{{APIRef("HTML DOM")}}
+
+La propriété **`buffered`** est une propriété en lecture seule rattachée à l'interface [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) et qui renvoie un nouvel [objet `TimeRanges` normalisé](/fr/docs/Web/API/TimeRanges#objets_timeranges_normalisés) statique représentant les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`.
+
+> **Note :** Cette fonctionnalité n'est pas disponible au niveau des [Web Workers](/fr/docs/Web/API/Web_Workers_API).
+
+## Syntaxe
+
+```js
+let timeRange = audioObject.buffered
+```
+
+### Valeur
+
+Un nouvel [objet `TimeRanges` normalisé](/fr/docs/Web/API/TimeRanges#objets_timeranges_normalisés) statique qui représente les plages de la ressource média, s'il y en a, que l'agent utilisateur a mises en mémoire tampon au moment de l'accès à la propriété `buffered`.
+
+## Exemple
+
+```js
+let obj = document.createElement('video');
+console.log(obj.buffered); // TimeRanges { length: 0 }
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- L'interface qui porte cette propriété, [HTMLMediaElement](/fr/docs/Web/API/HTMLMediaElement).
-- 
cgit v1.2.3-54-g00ecf


From 6c708693b88f83b889113e6cea1aa45cf7a4a53c Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Thu, 10 Mar 2022 06:24:37 +0100
Subject: Add fr CSS :paused page (#4505)

---
 files/fr/web/css/_colon_paused/index.md | 43 +++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 files/fr/web/css/_colon_paused/index.md

diff --git a/files/fr/web/css/_colon_paused/index.md b/files/fr/web/css/_colon_paused/index.md
new file mode 100644
index 0000000000..0648853b73
--- /dev/null
+++ b/files/fr/web/css/_colon_paused/index.md
@@ -0,0 +1,43 @@
+---
+title: ':paused'
+slug: Web/CSS/:paused
+translation_of: Web/CSS/:paused
+browser-compat: css.selectors.paused
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs/Web/CSS) **`:paused`** est une pseudo-classe d'état d'une ressource audio, vidéo ou autre type de ressource capable d'être «&nbsp;lue&nbsp;» ou «&nbsp;mise en pause&nbsp;», qui permet de cibler un élément lorsqu'il est «&nbsp;mis en pause&nbsp;».
+
+`:paused` correspond à tout élément non activé ou mis en pause explicitement par la personne utilisant la ressource.
+
+```css
+:paused {
+
+}
+```
+
+## Syntaxe
+
+{{csssyntax}}
+
+## Exemples
+
+### CSS
+
+```css
+:paused {
+  border: 5px solid orange;
+}
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`:playing`](/fr/docs/Web/CSS/:playing)
-- 
cgit v1.2.3-54-g00ecf


From d76ff9eb61e548bcc500fd47c7dc22d346c48cbe Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Thu, 10 Mar 2022 06:33:16 +0100
Subject: Update/translate missing css font-variant (#4506)

---
 files/fr/web/css/@font-face/font-variant/index.md | 92 +++++++++++++++++++++++
 files/fr/web/css/font-variant/index.md            | 72 ++++++++++--------
 2 files changed, 133 insertions(+), 31 deletions(-)
 create mode 100644 files/fr/web/css/@font-face/font-variant/index.md

diff --git a/files/fr/web/css/@font-face/font-variant/index.md b/files/fr/web/css/@font-face/font-variant/index.md
new file mode 100644
index 0000000000..326b188e53
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-variant/index.md
@@ -0,0 +1,92 @@
+---
+title: font-variant
+slug: Web/CSS/@font-face/font-variant
+translation_of: Web/CSS/@font-face/font-variant
+browser-compat: css.at-rules.font-face.font-variant
+---
+{{CSSRef}}
+
+La [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) [CSS](/fr/docs/Web/CSS) **`font-variant`** permet de définir tous les paramètres typographiques pour des polices de caractères définies avec la règle [`@font-face`](/fr/docs/Web/CSS/@font-face).
+
+## Propriétés détaillées correspondantes
+
+Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes&nbsp;:
+
+- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates)
+- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps)
+- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian)
+- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures)
+- [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric)
+
+## Syntaxe
+
+```css
+font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+/* Valeurs globales */
+font-variant: inherit;
+font-variant: initial;
+font-variant: revert;
+font-variant: unset;
+```
+
+### Valeurs
+
+- `normal`
+  - : Définit une police normale&nbsp;; chacune des propriétés individuelles a une valeur initiale de `normal`. Les propriétés détaillées de `font-variant` sont&nbsp;: [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps), [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric), [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates), [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian).
+- `none`
+  - : Définit une valeur de `none` pour [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et une valeur de `normal` pour les autres propriétés, leur valeur initiale.
+- `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures). Les valeurs possibles sont&nbsp;: `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` et `no-contextual`.
+- `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`
+  - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates).
+- `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`
+  - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps).
+- `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric). Les valeurs possibles sont&nbsp;:  `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` et `slashed-zero`.
+- `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). Les valeurs possibles sont&nbsp;: `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width` et `ruby`.
+
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
+
+{{csssyntax}}
+
+## Exemples
+
+### Utiliser la valeur `small-caps` de `font-variant`
+
+Le CSS suivant sélectionne une police Open Sans locale ou la télécharge, et permet d'utiliser sa propriété `small-caps`.
+
+```css
+@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-variant: small-caps;
+}
+```
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [`font-display`](/fr/docs/Web/CSS/@font-face/font-display)
+- [`font-family`](/fr/docs/Web/CSS/@font-face/font-family)
+- [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight)
+- [`font-style`](/fr/docs/Web/CSS/@font-face/font-style)
+- [`font-stretch`](/fr/docs/Web/CSS/@font-face/font-stretch)
+- [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings)
+- [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings)
+- [`src`](/fr/docs/Web/CSS/@font-face/src)
+- Le descripteur [`unicode-range`](/fr/docs/Web/CSS/@font-face/unicode-range)
diff --git a/files/fr/web/css/font-variant/index.md b/files/fr/web/css/font-variant/index.md
index 8cffe85cde..512139e2ad 100644
--- a/files/fr/web/css/font-variant/index.md
+++ b/files/fr/web/css/font-variant/index.md
@@ -1,18 +1,27 @@
 ---
 title: font-variant
 slug: Web/CSS/font-variant
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/font-variant
+browser-compat: css.properties.font-variant
 ---
 {{CSSRef}}
 
-La propriété **`font-variant`** est une propriété raccourcie représentant les propriétés : {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}} et {{cssxref("font-variant-east-asian")}}. On peut aussi utiliser les valeurs de la propriété `font-variant` définies avec CSS Level 2 (`normal` ou `small-caps`), en utilisant la propriété raccourcie {{cssxref("font")}}.
+La [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) [CSS](/fr/docs/Web/CSS) **`font-variant`** permet de définir tous les paramètres typographiques pour une police de caractères.
+
+On peut aussi utiliser les valeurs de la propriété `font-variant` définies avec la spécification CSS de niveau 2 (première révision), `normal` ou `small-caps`, en utilisant la propriété raccourcie [`font`](/fr/docs/Web/CSS/font).
 
 {{EmbedInteractiveExample("pages/css/font-variant.html")}}
 
+## Propriétés détaillées correspondantes
+
+Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes&nbsp;:
+
+- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates)
+- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps)
+- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian)
+- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures)
+- [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric)
+
 ## Syntaxe
 
 ```css
@@ -22,70 +31,71 @@ font-variant: common-ligatures small-caps;
 /* Valeurs globales */
 font-variant: inherit;
 font-variant: initial;
+font-variant: revert;
 font-variant: unset;
 ```
 
 ### Valeurs
 
 - `normal`
-  - : Définit une police normale ; chacune des propriétés individuelles a une valeur initiale de `normal`. Ces propriétés sont {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, et {{cssxref("font-variant-east-asian")}}.
+  - : Définit une police normale&nbsp;; chacune des propriétés individuelles a une valeur initiale de `normal`. Les propriétés détaillées de `font-variant` sont&nbsp;: [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps), [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric), [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates), [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian).
 - `none`
-  - : Définit la valeur de {{cssxref("font-variant-ligatures")}} comme étant `none` et les valeurs des autres propriétés à `normal`, leur valeur initiale.
-- \<common-lig-values>, \<discretionary-lig-values>, \<historical-lig-values>, \<contextual-alt-values>
-  - : Définit la valeur de la propriété {{cssxref("font-variant-ligatures")}}. Les valeurs possibles sont: `common-ligatures`,`no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`,`contextual`, et `no-contextual`.
+  - : Définit une valeur de `none` pour [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures) et une valeur de `normal` pour les autres propriétés, leur valeur initiale.
+- `<common-lig-values>`, `<discretionary-lig-values>`, `<historical-lig-values>`, `<contextual-alt-values>`
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures). Les valeurs possibles sont&nbsp;: `common-ligatures`, `no-common-ligatures`, `discretionary-ligatures`, `no-discretionary-ligatures`, `historical-ligatures`, `no-historical-ligatures`, `contextual` et `no-contextual`.
 - `stylistic()`, `historical-forms`, `styleset()`, `character-variant()`, `swash()`, `ornaments()`, `annotation()`
-  - : Définit les mots-clés et fonctions relatives à la propriété {{cssxref("font-variant-alternates")}}.
+  - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates).
 - `small-caps`, `all-small-caps`, `petite-caps`, `all-petite-caps`, `unicase`, `titling-caps`
-  - : Définit le mot-clé relatif à la propriété {{cssxref("font-variant-caps")}}.
+  - : Définit les mots-clés et fonctions relatifs à la propriété détaillée [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps).
 - `<numeric-figure-values>`, `<numeric-spacing-values>`, `<numeric-fraction-values>`, `ordinal`, `slashed-zero`
-  - : Définit la valeur de la propriété {{cssxref("font-variant-numeric")}}. Les valeurs possibles sont `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal`, et `slashed-zero.`
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-numeric`](/fr/docs/Web/CSS/font-variant-numeric). Les valeurs possibles sont&nbsp;:  `lining-nums`, `oldstyle-nums`, `proportional-nums`, `tabular-nums`, `diagonal-fractions`, `stacked-fractions`, `ordinal` et `slashed-zero`.
 - `<east-asian-variant-values>`, `<east-asian-width-values>`, `ruby`
-  - : Définit la valeur de la propriété {{cssxref("font-variant-east-asian")}}. Les valeurs possibles sont: `jis78`, `jis83`,`jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width`, `ruby`.
+  - : Définit les mots-clés relatifs à la propriété détaillée [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian). Les valeurs possibles sont&nbsp;: `jis78`, `jis83`, `jis90`, `jis04`, `simplified`, `traditional`, `full-width`, `proportional-width` et `ruby`.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### HTML
+### Utiliser la valeur `small-caps` de `font-variant`
+
+#### HTML
 
 ```html
 <p class="normal">Firefox normal</p>
 <p class="small">Firefox petit</p>
 ```
 
-### CSS
+#### CSS
 
 ```css
 p.normal {
-    font-variant: normal;
+  font-variant: normal;
 }
 p.small {
-    font-variant: small-caps;
+  font-variant: small-caps;
 }
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant')}}
+{{EmbedLiveSample('', 'Web/CSS/font-variant')}}
 
 ## Spécifications
 
-| Spécification                                                                                    | État                             | Commentaires                                                                                         |
-| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}         | {{Spec2('CSS3 Fonts')}} | La propriété est désormais une propriété raccourcie pour les nouvelles propriétés  `font-variant-*`. |
-| {{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}} | {{Spec2('CSS2.1')}}         | Aucun changement.                                                                                    |
-| {{SpecName('CSS1', '#font-variant', 'font-variant')}}                         | {{Spec2('CSS1')}}         | Définition initiale.                                                                                 |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.font-variant")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("text-transform")}}
-- {{cssxref("text-combine-upright")}}
-- {{cssxref("text-orientation")}}
+- [`text-transform`](/fr/docs/Web/CSS/text-transform)
+- [`text-combine-upright`](/fr/docs/Web/CSS/text-combine-upright)
+- [`text-orientation`](/fr/docs/Web/CSS/text-orientation)
-- 
cgit v1.2.3-54-g00ecf


From fcb292afdcf5ab69dca301832443a9f29804ea89 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 10:59:04 +0100
Subject: Update index.md (#4513)

Correction faute d'orthographe paragraphe Sortie
---
 files/fr/learn/javascript/building_blocks/looping_code/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 7adab40ec3..29282f7177 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -242,7 +242,7 @@ Cela nous donne la sortie suivante :
 
 > **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
-Cela montre une boucle utiliser pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
+Cela montre une boucle utilisée pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici :
 
 1.  L'itérateur, `i`, commence à `0` (`let i = 0`).
 2.  On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important  — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter.
-- 
cgit v1.2.3-54-g00ecf


From 52e4afcf6a50b8ac1f1ac3552b7e2ecf1fc2d97c Mon Sep 17 00:00:00 2001
From: Saemi Jung <jung.sammie@gmail.com>
Date: Thu, 10 Mar 2022 20:14:16 +0900
Subject: Translate A re-introduction to JavaScript page in Korean (#4508)

* Add translation in Functions section

* Add translation in Numbers section
---
 .../ko/web/javascript/a_re-introduction_to_javascript/index.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.md b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md
index 66264ba637..760a228105 100644
--- a/files/ko/web/javascript/a_re-introduction_to_javascript/index.md
+++ b/files/ko/web/javascript/a_re-introduction_to_javascript/index.md
@@ -136,7 +136,7 @@ Number.isNaN([1]) // false
 Number.isNaN([1,2]) // false
 ```
 
-But don’t test for `NaN` using the global {{jsxref("Global_Objects/isNaN", "isNaN()")}} function, [which has unintuitive behavior](/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN#confusing_special-case_behavior):
+하지만 [직관적이지 않은 동작을 하는](/ko/docs/Web/JavaScript/Reference/Global_Objects/isNaN#혼란스러운_특별_케이스_행동) 전역 {{jsxref("Global_Objects/isNaN", "isNaN()")}} 함수를 사용하여 `NaN` 인지 검사하지 마십시오.
 
 ```js
 isNaN('hello'); // true
@@ -717,7 +717,7 @@ a; // 4
 b; // 2
 ```
 
-But such an anonymous function isn’t useful in isolation — because without a name, there’s no way to call the function. So in practice, anonymous functions are typically used as arguments to other functions or are made callable by immediately assigning them to a variable that can be used to invoke the function:
+하지만 이런 익명 함수는 단독으로 사용하면 유용하지 않은데 이름이 없으면 함수를 호출할 수 없기 때문입니다. 그래서 실제로 익명 함수는 보통 다른 함수의 인수로 사용되거나 함수를 호출하는 데 사용할 수 있는 변수에 즉시 할당함으로 호출가능하도록 만듭니다.
 
 ```js
 var avg = function() {
@@ -729,9 +729,9 @@ var avg = function() {
 };
 ```
 
-That makes the anonymous function invocable by calling `avg()` with some arguments — that is, it’s semantically equivalent to declaring the function using the `function avg()` named-function form.
+이렇게 하면  `avg()` 를 인수와 함께 호출하여 익명 함수를 호출가능하게 합니다. 이것은 명명 함수 형태인 `function avg()` 를 사용하여 함수를 선언하는 것과 의미상 동일합니다. 
 
-But there’s a way that anonymous functions can be useful even without ever being assigned to variables or passed as arguments to other functions: JavaScript provides a mechanism for simultaneously declaring and invoking a function using a single expression. It’s called an [Immediately invoked function expression (IIFE)](/en-US/docs/Glossary/IIFE), and the syntax for using it with an anonymous function looks like this:
+그런데 익명 함수가 변수에 할당되지 않거나 다른 함수에 인수로 넘겨지지 않아도 유용할 수 있는 방법이 있습니다. JavaScript는 단일 구문을 사용하여 함수 선언과 호출이 동시에 일어나는 메커니즘을 제공합니다. 이것은 [즉시 실행 함수 표현식 (IIFE, Immediately invoked function expression)](/ko/docs/Glossary/IIFE) 이라고 불리고, 익명 함수와 함께 사용하는 구문은 다음과 같습니다.
 
 ```js
 (function() {
@@ -739,7 +739,7 @@ But there’s a way that anonymous functions can be useful even without ever bei
 })();
 ```
 
-Further details on IIFEs are out of scope for this introductory article — but a good example of what they’re particularly useful for is in the [Emulating private methods with closures](/en-US/docs/Web/JavaScript/Closures#emulating_private_methods_with_closures) section of the [Closures](/en-US/docs/Web/JavaScript/Closures) article.
+IIFE에 대한 더 자세한 점은 이 입문 내용의 범위를 벗어난 것입니다. 하지만 IIFE가 무엇에 특히 유용한지에 대한 좋은 예제가 [클로저](/ko/docs/Web/JavaScript/Closures) 문서의 [클로저를 이용해서 프라이빗 메소드 흉내내기](/ko/docs/Web/JavaScript/Closures#클로저를_이용해서_프라이빗_메소드_private_method_흉내내기) 구획에 나와 있습니다.
 
 ### 재귀 함수
 
-- 
cgit v1.2.3-54-g00ecf


From 476dd6fb710e4a70698a893680f22d4d833e1f97 Mon Sep 17 00:00:00 2001
From: Florian Dieminger <me@fiji-flo.de>
Date: Thu, 10 Mar 2022 12:50:18 +0100
Subject: (pl) remove link to outdated github repo

---
 files/pl/web/api/cache/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/pl/web/api/cache/index.html b/files/pl/web/api/cache/index.html
index b0fd1cbb80..e0020cc3c4 100644
--- a/files/pl/web/api/cache/index.html
+++ b/files/pl/web/api/cache/index.html
@@ -26,9 +26,9 @@ translation_of: Web/API/Cache
  <dt>{{domxref("Cache.match", "Cache.match(żądanie, opcje)")}}</dt>
  <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do pierwszego pasującego żądania w obiekcie {{domxref("Cache", "Cache'u")}}.</dd>
  <dt>{{domxref("Cache.add", "Cache.add(żądanie)")}}</dt>
- <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd>
+ <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego wpisu {{domxref("Cache", "Cache'u")}}, którego kluczem jest żądanie. Ta metoda nadal jest w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="#">ServiceWorker cache polyfill</a>.</dd>
  <dt>{{domxref("Cache.addAll", "Cache.addAll(żądania)")}}</dt>
- <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="https://github.com/coonsta/cache-polyfill">ServiceWorker cache polyfill</a>.</dd>
+ <dd>Zwraca {{jsxref("Promise")}}, która jest rozwiązywana do nowego szeregu złożonego z wpisów {{domxref("Cache", "Cache'u")}}, którego kluczami są żądania. Metoda ta jest nadal w trakcie tworzenia (zobacz <a href="http://crbug.com/427652">http://crbug.com/427652</a>). Póki co używaj <a href="#">ServiceWorker cache polyfill</a>.</dd>
  <dt>{{domxref("Cache.put", "Cache.put(żądanie, odpowiedź)")}}</dt>
  <dd>Dodaje dodatkowe pary klucz/wartość do aktualnego obiektu {{domxref("Cache")}}.</dd>
  <dt>{{domxref("Cache.delete", "Cache.delete(żądanie, opcje)")}}</dt>
-- 
cgit v1.2.3-54-g00ecf


From e8c3b8b8aadb3a8b531125e7107cebf060fa0aba Mon Sep 17 00:00:00 2001
From: rururux <rururux@gmail.com>
Date: Tue, 8 Mar 2022 23:06:36 +0900
Subject: fix typo

---
 files/ja/web/html/element/summary/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/html/element/summary/index.html b/files/ja/web/html/element/summary/index.html
index 64afe6b82b..5b2413f101 100644
--- a/files/ja/web/html/element/summary/index.html
+++ b/files/ja/web/html/element/summary/index.html
@@ -114,7 +114,7 @@ translation_of: Web/HTML/Element/summary
 
 <h3 id="HTML_in_summaries" name="HTML_in_summaries">概要の中の HTML</h3>
 
-<p>この例は、 <code>&lt;summary&gt;</code> 要素にいくらか意味をを追加して、ラベルを重要であると示します。</p>
+<p>この例は、 <code>&lt;summary&gt;</code> 要素にいくらか意味を追加して、ラベルを重要であると示します。</p>
 
 <pre class="brush: html notranslate">&lt;details open&gt;
   &lt;summary&gt;&lt;strong&gt;Overview&lt;/strong&gt;&lt;/summary&gt;
-- 
cgit v1.2.3-54-g00ecf


From e58a7d2fa30ff584eb05d7a6dd2e1c9ad5e96ab7 Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Wed, 9 Mar 2022 18:09:25 +0900
Subject: fix Managing_screen_orientation

---
 .../ja/web/api/css_object_model/managing_screen_orientation/index.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/css_object_model/managing_screen_orientation/index.html b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html
index e70e964880..9d955045a5 100644
--- a/files/ja/web/api/css_object_model/managing_screen_orientation/index.html
+++ b/files/ja/web/api/css_object_model/managing_screen_orientation/index.html
@@ -14,7 +14,7 @@ translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation
 
 <p>CSS と JavaScript の双方に、画面の向きを扱う方法がいくつかあります。第一の方法は <a href="/ja/docs/CSS/Media_queries#orientation">orientation メディアクエリ</a>です。これはブラウザウィンドウがランドスケープモード (すなわち幅が高さより大きい) かポートレートモード (高さが幅より大きい) かに基づいて、CSS を使用してコンテンツのレイアウトを調整できます。</p>
 
-<p>第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen orientation API です。</p>
+<p>第二の方法は、画面自身の現在の向きを取得して最終的に固定するために使用できる、JavaScript の Screen Orientation API です。</p>
 
 <h2 id="Adjusting_layout_based_on_the_orientation" name="Adjusting_layout_based_on_the_orientation">向きに基づいてレイアウトを調整する</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From b02122cb8a088d8714a3cc3cd6a7bc6384f3bc21 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:05:43 +0100
Subject: Typo fix in JS Fonctions (#4518)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correction traduction dans Fonctions personnalisées
---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 5a5deddae4..27ee2c6a86 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -103,7 +103,7 @@ Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("
 draw();
 ```
 
-au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tous les codes qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
+au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant :
 
 ```js
 function random(number) {
-- 
cgit v1.2.3-54-g00ecf


From 293c1892610700eb7f7eba45c8b264d9efc90c9b Mon Sep 17 00:00:00 2001
From: Vitaliy Levin <network_worms@mail.ru>
Date: Thu, 10 Mar 2022 16:30:31 +0300
Subject: (ru) Fix typos at Web/HTML/Element/a page (#4468)

---
 files/ru/web/html/element/a/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ru/web/html/element/a/index.html b/files/ru/web/html/element/a/index.html
index f7f8ad4890..e9837d546c 100644
--- a/files/ru/web/html/element/a/index.html
+++ b/files/ru/web/html/element/a/index.html
@@ -211,7 +211,7 @@ translation_of: Web/HTML/Element/a
  <dt>{{htmlattrdef("methods")}}<strong style="font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt>
  <dd>Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута <code>title</code>) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534168(VS.85).aspx">Значения <code>methods</code> (MSDN)</a>.</dd>
  <dt>{{htmlattrdef("urn")}}<strong style="font-size: 14px; font-weight: 700; line-height: 1.5;"> </strong>{{Non-standard_inline}}</dt>
- <dd>Этот атрибут, предложенный Micosoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd>
+ <dd>Этот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. <a class="external" href="http://msdn.microsoft.com/en-us/library/ms534710(VS.85).aspx">Значения <font face="Consolas, Liberation Mono, Courier, monospace">urn</font> (MSDN)</a>.</dd>
 </dl>
 
 <h2 id="Example">Примеры</h2>
@@ -244,7 +244,7 @@ translation_of: Web/HTML/Element/a
 
 <p>Результат выглядит примерно так: <a href="mailto:nowhere@mozilla.org">Отправить сообщение в никуда</a>.</p>
 
-<p>Для дополнительных деталей использования <code>mailto</code>, таких как тема, текст или другое, смотрите <a href="/ru/docs/Web/Guide/HTML/Email_links">Email-ссылки</a> или {{RFC(6068)}}.</p>
+<p>Для дополнительных деталей использования <code>mailto</code>, таких как тема, текст или другое, смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#ссылки_электронной_почты">Email-ссылки</a> или {{RFC(6068)}}.</p>
 
 <h3 id="Создание_ссылки_с_номером_телефона">Создание ссылки с номером телефона</h3>
 
-- 
cgit v1.2.3-54-g00ecf


From 5fab0a1eb99e87aa141adb3777d92c69437ae971 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 22:49:44 +0900
Subject: Element 以下の a-g で始まるプロパティを移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/after/index.html          |  90 --------
 files/ja/web/api/element/after/index.md            |  90 ++++++++
 files/ja/web/api/element/animate/index.html        | 120 -----------
 files/ja/web/api/element/animate/index.md          | 120 +++++++++++
 files/ja/web/api/element/append/index.html         | 100 ---------
 files/ja/web/api/element/append/index.md           | 100 +++++++++
 files/ja/web/api/element/before/index.html         |  91 --------
 files/ja/web/api/element/before/index.md           |  91 ++++++++
 files/ja/web/api/element/closest/index.html        | 149 -------------
 files/ja/web/api/element/closest/index.md          | 149 +++++++++++++
 files/ja/web/api/element/getattribute/index.html   |  81 --------
 files/ja/web/api/element/getattribute/index.md     |  81 ++++++++
 .../web/api/element/getattributenames/index.html   |  70 -------
 .../ja/web/api/element/getattributenames/index.md  |  70 +++++++
 .../ja/web/api/element/getattributenode/index.html |  63 ------
 files/ja/web/api/element/getattributenode/index.md |  63 ++++++
 files/ja/web/api/element/getattributens/index.html |  47 -----
 files/ja/web/api/element/getattributens/index.md   |  47 +++++
 .../api/element/getboundingclientrect/index.html   | 112 ----------
 .../web/api/element/getboundingclientrect/index.md | 112 ++++++++++
 files/ja/web/api/element/getclientrects/index.html | 231 ---------------------
 files/ja/web/api/element/getclientrects/index.md   | 231 +++++++++++++++++++++
 .../api/element/getelementsbyclassname/index.html  | 113 ----------
 .../api/element/getelementsbyclassname/index.md    | 113 ++++++++++
 .../api/element/getelementsbytagname/index.html    |  55 -----
 .../web/api/element/getelementsbytagname/index.md  |  55 +++++
 .../api/element/getelementsbytagnamens/index.html  |  50 -----
 .../api/element/getelementsbytagnamens/index.md    |  50 +++++
 28 files changed, 1372 insertions(+), 1372 deletions(-)
 delete mode 100644 files/ja/web/api/element/after/index.html
 create mode 100644 files/ja/web/api/element/after/index.md
 delete mode 100644 files/ja/web/api/element/animate/index.html
 create mode 100644 files/ja/web/api/element/animate/index.md
 delete mode 100644 files/ja/web/api/element/append/index.html
 create mode 100644 files/ja/web/api/element/append/index.md
 delete mode 100644 files/ja/web/api/element/before/index.html
 create mode 100644 files/ja/web/api/element/before/index.md
 delete mode 100644 files/ja/web/api/element/closest/index.html
 create mode 100644 files/ja/web/api/element/closest/index.md
 delete mode 100644 files/ja/web/api/element/getattribute/index.html
 create mode 100644 files/ja/web/api/element/getattribute/index.md
 delete mode 100644 files/ja/web/api/element/getattributenames/index.html
 create mode 100644 files/ja/web/api/element/getattributenames/index.md
 delete mode 100644 files/ja/web/api/element/getattributenode/index.html
 create mode 100644 files/ja/web/api/element/getattributenode/index.md
 delete mode 100644 files/ja/web/api/element/getattributens/index.html
 create mode 100644 files/ja/web/api/element/getattributens/index.md
 delete mode 100644 files/ja/web/api/element/getboundingclientrect/index.html
 create mode 100644 files/ja/web/api/element/getboundingclientrect/index.md
 delete mode 100644 files/ja/web/api/element/getclientrects/index.html
 create mode 100644 files/ja/web/api/element/getclientrects/index.md
 delete mode 100644 files/ja/web/api/element/getelementsbyclassname/index.html
 create mode 100644 files/ja/web/api/element/getelementsbyclassname/index.md
 delete mode 100644 files/ja/web/api/element/getelementsbytagname/index.html
 create mode 100644 files/ja/web/api/element/getelementsbytagname/index.md
 delete mode 100644 files/ja/web/api/element/getelementsbytagnamens/index.html
 create mode 100644 files/ja/web/api/element/getelementsbytagnamens/index.md

diff --git a/files/ja/web/api/element/after/index.html b/files/ja/web/api/element/after/index.html
deleted file mode 100644
index 52186ca2fb..0000000000
--- a/files/ja/web/api/element/after/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: Element.after()
-slug: Web/API/Element/after
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-browser-compat: api.Element.after
-translation_of: Web/API/Element/after
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">
-after(... nodes)
-</pre>
-
-<h3 id="Parameters">引数</h3>
-
-<dl>
-  <dt><code>nodes</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
-
-<h3 id="Exceptions">例外</h3>
-
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
-</ul>
-
-<h2 id="Examples">例</h2>
-
-<h3 id="Inserting_an_element">要素の挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-let span = document.createElement("span");
-
-p.after(span);
-
-console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
-</pre>
-
-<h3 id="Inserting_text">テキストの挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-
-p.after("Text");
-
-console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
-
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-let span = document.createElement("span");
-
-p.after(span, "Text");
-
-console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
-
-<h2 id="Specification">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Element.before()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/after/index.md b/files/ja/web/api/element/after/index.md
new file mode 100644
index 0000000000..52186ca2fb
--- /dev/null
+++ b/files/ja/web/api/element/after/index.md
@@ -0,0 +1,90 @@
+---
+title: Element.after()
+slug: Web/API/Element/after
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.Element.after
+translation_of: Web/API/Element/after
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+after(... nodes)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodes</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Inserting_an_element">要素の挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span);
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Inserting_text">テキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.after("Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+
+<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span, "Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.before()")}}</li>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/animate/index.html b/files/ja/web/api/element/animate/index.html
deleted file mode 100644
index 661f224477..0000000000
--- a/files/ja/web/api/element/animate/index.html
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: Element.animate()
-slug: Web/API/Element/animate
-translation_of: Web/API/Element/animate
----
-<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
-
-<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>);
-</pre>
-
-<h3 id="引数">引数</h3>
-
-<dl>
- <dt><code>keyframes</code></dt>
-</dl>
-
-<ol>
- <li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li>
- <li>keyframes オブジェクトから成る配列</li>
-</ol>
-
-<dl>
- <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd>
- <dd>
- <ol>
-  <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
-   <pre class="brush: js"><em>element.</em>animate({
-  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
-  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
-}, 2000);
-</pre>
-  </li>
-  <li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
-   <pre class="brush: js"><em>element</em>.animate([
-  { // フレーム 1
-    opacity: 0,
-    color: "#fff"
-  },
-  { // フレーム 2
-    opacity: 1,
- ​   color: "#000"
-  }
-], 2000);</pre>
-  </li>
- </ol>
- </dd>
- <dt><code>options</code></dt>
- <dd>アニメーションの再生時間を表す ms 単位の整数値、または  <a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd>
-</dl>
-
-<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4>
-
-<dl>
- <dt><code>id</code></dt>
- <dd>アニメーションを参照する文字列</dd>
-</dl>
-
-<dl>
- <dt><code>composite</code></dt>
- <dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。
- <ul>
-  <li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li>
-  <li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li>
-  <li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li>
- </ul>
- </dd>
- <dt><code>iterationComposite</code></dt>
- <dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>{{domxref("Animation")}} を返します。</p>
-
-<h2 id="使用例">使用例</h2>
-
-<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p>
-
-<pre class="brush: js">document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translate3D(0, 0, 0)' },
-  { transform: 'translate3D(0, -300px, 0)' }
-], {
-  // timing options
-  duration: 1000,
-  iterations: Infinity
-});
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Editor's draft.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Element.animate")}}</p>
-
-<h2 id="参考情報">参考情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
- <li>{{domxref("Animation")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/animate/index.md b/files/ja/web/api/element/animate/index.md
new file mode 100644
index 0000000000..661f224477
--- /dev/null
+++ b/files/ja/web/api/element/animate/index.md
@@ -0,0 +1,120 @@
+---
+title: Element.animate()
+slug: Web/API/Element/animate
+translation_of: Web/API/Element/animate
+---
+<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
+
+<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>);
+</pre>
+
+<h3 id="引数">引数</h3>
+
+<dl>
+ <dt><code>keyframes</code></dt>
+</dl>
+
+<ol>
+ <li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li>
+ <li>keyframes オブジェクトから成る配列</li>
+</ol>
+
+<dl>
+ <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd>
+ <dd>
+ <ol>
+  <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
+   <pre class="brush: js"><em>element.</em>animate({
+  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
+  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
+}, 2000);
+</pre>
+  </li>
+  <li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
+   <pre class="brush: js"><em>element</em>.animate([
+  { // フレーム 1
+    opacity: 0,
+    color: "#fff"
+  },
+  { // フレーム 2
+    opacity: 1,
+ ​   color: "#000"
+  }
+], 2000);</pre>
+  </li>
+ </ol>
+ </dd>
+ <dt><code>options</code></dt>
+ <dd>アニメーションの再生時間を表す ms 単位の整数値、または  <a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd>
+</dl>
+
+<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4>
+
+<dl>
+ <dt><code>id</code></dt>
+ <dd>アニメーションを参照する文字列</dd>
+</dl>
+
+<dl>
+ <dt><code>composite</code></dt>
+ <dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。
+ <ul>
+  <li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li>
+  <li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li>
+  <li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li>
+ </ul>
+ </dd>
+ <dt><code>iterationComposite</code></dt>
+ <dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd>
+</dl>
+
+<h3 id="戻り値">戻り値</h3>
+
+<p>{{domxref("Animation")}} を返します。</p>
+
+<h2 id="使用例">使用例</h2>
+
+<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p>
+
+<pre class="brush: js">document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translate3D(0, 0, 0)' },
+  { transform: 'translate3D(0, -300px, 0)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">策定状況</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
+   <td>{{Spec2('Web Animations')}}</td>
+   <td>Editor's draft.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
+
+<p>{{Compat("api.Element.animate")}}</p>
+
+<h2 id="参考情報">参考情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
+ <li>{{domxref("Animation")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html
deleted file mode 100644
index 82feaa6f91..0000000000
--- a/files/ja/web/api/element/append/index.html
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: Element.append()
-slug: Web/API/Element/append
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Element
-  - Reference
-browser-compat: api.Element.append
-translation_of: Web/API/Element/append
-original_slug: Web/API/ParentNode/append
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p>
-
-<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
-
-<ul>
-  <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
-  <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
-  <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li>
-</ul>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">
-append(...nodesOrDOMStrings)
-</pre>
-
-<h3 id="Parameters">引数</h3>
-
-<dl>
-  <dt><code>nodesOrDOMStrings</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
-
-<h3 id="Exceptions">例外</h3>
-
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li>
-</ul>
-
-<h2 id="Examples">例</h2>
-
-<h3 id="Appending_an_element">要素の追加</h3>
-
-<pre class="brush: js">let div = document.createElement("div")
-let p = document.createElement("p")
-div.append(p)
-
-console.log(div.childNodes) // NodeList [ &lt;p&gt; ]
-</pre>
-
-<h3 id="Appending_text">テキストの追加</h3>
-
-<pre class="brush: js">let div = document.createElement("div")
-div.append("Some text")
-
-console.log(div.textContent) // "Some text"</pre>
-
-<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
-
-<pre class="brush: js">let div = document.createElement("div")
-let p = document.createElement("p")
-div.append("Some text", p)
-
-console.log(div.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
-
-<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3>
-
-<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
-
-<pre class="brush: js">let div = document.createElement("div")
-
-with(div) {
-  append("foo")
-}
-// ReferenceError: append is not defined </pre>
-
-
-<h2 id="Specifications">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Element.prepend()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md
new file mode 100644
index 0000000000..82feaa6f91
--- /dev/null
+++ b/files/ja/web/api/element/append/index.md
@@ -0,0 +1,100 @@
+---
+title: Element.append()
+slug: Web/API/Element/append
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Element
+  - Reference
+browser-compat: api.Element.append
+translation_of: Web/API/Element/append
+original_slug: Web/API/ParentNode/append
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p>
+
+<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
+
+<ul>
+  <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
+  <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
+  <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li>
+</ul>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">
+append(...nodesOrDOMStrings)
+</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+  <dt><code>nodesOrDOMStrings</code></dt>
+  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+  <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Appending_an_element">要素の追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+let p = document.createElement("p")
+div.append(p)
+
+console.log(div.childNodes) // NodeList [ &lt;p&gt; ]
+</pre>
+
+<h3 id="Appending_text">テキストの追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+div.append("Some text")
+
+console.log(div.textContent) // "Some text"</pre>
+
+<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
+
+<pre class="brush: js">let div = document.createElement("div")
+let p = document.createElement("p")
+div.append("Some text", p)
+
+console.log(div.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+
+<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3>
+
+<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+
+<pre class="brush: js">let div = document.createElement("div")
+
+with(div) {
+  append("foo")
+}
+// ReferenceError: append is not defined </pre>
+
+
+<h2 id="Specifications">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.prepend()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Element.after()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/before/index.html b/files/ja/web/api/element/before/index.html
deleted file mode 100644
index 652f38c95f..0000000000
--- a/files/ja/web/api/element/before/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Element.before()
-slug: Web/API/Element/before
-tags:
-  - API
-  - DOM
-  - Method
-  - Node
-  - Reference
-browser-compat: api.Element.before
-translation_of: Web/API/Element/before
-original_slug: Web/API/ChildNode/before
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="brush: js">before(... nodes)</pre>
-
-<h3 id="Parameters">引数</h3>
-
-<dl>
-	<dt><code>nodes</code></dt>
-	<dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
-
-<h3 id="Exceptions">例外</h3>
-
-<ul>
-	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li>
-</ul>
-
-<h2 id="Examples">例</h2>
-
-<h3 id="Inserting_an_element">要素の挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-let span = document.createElement("span");
-
-p.before(span);
-
-console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
-</pre>
-
-<h3 id="Inserting_text">テキストの挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-
-p.before("Text");
-
-console.log(container.outerHTML);
-// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
-
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
-
-<pre class="brush: js">let container = document.createElement("div");
-let p = document.createElement("p");
-container.appendChild(p);
-let span = document.createElement("span");
-
-p.before(span, "Text");
-
-console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
-
-
-<h2 id="Specification">仕様書</h2>
-
-{{Specifications}}
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">関連情報</h2>
-
-<ul>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Node.insertBefore()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/before/index.md b/files/ja/web/api/element/before/index.md
new file mode 100644
index 0000000000..652f38c95f
--- /dev/null
+++ b/files/ja/web/api/element/before/index.md
@@ -0,0 +1,91 @@
+---
+title: Element.before()
+slug: Web/API/Element/before
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Reference
+browser-compat: api.Element.before
+translation_of: Web/API/Element/before
+original_slug: Web/API/ChildNode/before
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="brush: js">before(... nodes)</pre>
+
+<h3 id="Parameters">引数</h3>
+
+<dl>
+	<dt><code>nodes</code></dt>
+	<dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
+</dl>
+
+<h3 id="Exceptions">例外</h3>
+
+<ul>
+	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li>
+</ul>
+
+<h2 id="Examples">例</h2>
+
+<h3 id="Inserting_an_element">要素の挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span);
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
+</pre>
+
+<h3 id="Inserting_text">テキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.before("Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+
+<pre class="brush: js">let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.before(span, "Text");
+
+console.log(container.outerHTML);
+// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+
+
+<h2 id="Specification">仕様書</h2>
+
+{{Specifications}}
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+  <li>{{domxref("Element.after()")}}</li>
+  <li>{{domxref("Element.append()")}}</li>
+  <li>{{domxref("Node.appendChild()")}}</li>
+  <li>{{domxref("Node.insertBefore()")}}</li>
+  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
+  <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/closest/index.html b/files/ja/web/api/element/closest/index.html
deleted file mode 100644
index dd876b80aa..0000000000
--- a/files/ja/web/api/element/closest/index.html
+++ /dev/null
@@ -1,149 +0,0 @@
----
-title: Element.closest()
-slug: Web/API/Element/closest
-tags:
-  - API
-  - DOM
-  - Element
-  - Method
-  - Reference
-  - メソッド
-translation_of: Web/API/Element/closest
----
-<div>{{APIRef('DOM')}}</div>
-
-<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
-</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<ul>
- <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br>
-  例: <code>p:hover, .toto + q</code></li>
-</ul>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<ul>
- <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li>
-</ul>
-
-<h3 id="Exceptions" name="Exceptions">例外</h3>
-
-<ul>
- <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li>
-</ul>
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;article&gt;
-  &lt;div id="div-01"&gt;Here is div-01
-    &lt;div id="div-02"&gt;Here is div-02
-      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js">var el = document.getElementById('div-03');
-
-var r1 = el.closest("#div-02");
-// id=div-02 である要素を返す
-
-var r2 = el.closest("div div");
-// div の中にある div である直近の祖先、ここでは div-03 自身を返す
-
-var r3 = el.closest("article &gt; div");
-// 親に article を持つ div である直近の祖先、ここでは div-01 を返す
-
-var r4 = el.closest(":not(div)");
-// div ではない直近の祖先、ここではもっとも外側の article を返す</pre>
-
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
-
-<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p>
-
-<pre class="brush: js">if (!Element.prototype.matches) {
-  Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                              Element.prototype.webkitMatchesSelector;
-}
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
-    var el = this;
-
-    do {
-      if (Element.prototype.matches.call(el, s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null &amp;&amp; el.nodeType === 1);
-    return null;
-  };
-}</pre>
-
-<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p>
-
-<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
-    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-        i,
-        el = this;
-    do {
-      i = matches.length;
-      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
-    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
-    return el;
-  };
-}
-</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-element-closest', 'Element.closest()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.Element.closest")}}</p>
-
-<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3>
-
-<ul>
- <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li>
-</ul>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element")}} インターフェイス</li>
- <li>
-  <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div>
- </li>
- <li>
-  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
- </li>
-</ul>
-</div>
diff --git a/files/ja/web/api/element/closest/index.md b/files/ja/web/api/element/closest/index.md
new file mode 100644
index 0000000000..dd876b80aa
--- /dev/null
+++ b/files/ja/web/api/element/closest/index.md
@@ -0,0 +1,149 @@
+---
+title: Element.closest()
+slug: Web/API/Element/closest
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+  - メソッド
+translation_of: Web/API/Element/closest
+---
+<div>{{APIRef('DOM')}}</div>
+
+<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
+</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<ul>
+ <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br>
+  例: <code>p:hover, .toto + q</code></li>
+</ul>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<ul>
+ <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li>
+</ul>
+
+<h3 id="Exceptions" name="Exceptions">例外</h3>
+
+<ul>
+ <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;article&gt;
+  &lt;div id="div-01"&gt;Here is div-01
+    &lt;div id="div-02"&gt;Here is div-02
+      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/article&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// id=div-02 である要素を返す
+
+var r2 = el.closest("div div");
+// div の中にある div である直近の祖先、ここでは div-03 自身を返す
+
+var r3 = el.closest("article &gt; div");
+// 親に article を持つ div である直近の祖先、ここでは div-01 を返す
+
+var r4 = el.closest(":not(div)");
+// div ではない直近の祖先、ここではもっとも外側の article を返す</pre>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p>
+
+<pre class="brush: js">if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (Element.prototype.matches.call(el, s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null &amp;&amp; el.nodeType === 1);
+    return null;
+  };
+}</pre>
+
+<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p>
+
+<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
+    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+    return el;
+  };
+}
+</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-element-closest', 'Element.closest()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("api.Element.closest")}}</p>
+
+<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3>
+
+<ul>
+ <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li>
+</ul>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element")}} インターフェイス</li>
+ <li>
+  <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div>
+ </li>
+ <li>
+  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
+ </li>
+</ul>
+</div>
diff --git a/files/ja/web/api/element/getattribute/index.html b/files/ja/web/api/element/getattribute/index.html
deleted file mode 100644
index 4ee84122ba..0000000000
--- a/files/ja/web/api/element/getattribute/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: Element.getAttribute()
-slug: Web/API/Element/getAttribute
-tags:
-  - API
-  - DOM
-  - Element
-  - Method
-  - Reference
-  - メソッド
-translation_of: Web/API/Element/getAttribute
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>);
-</pre>
-
-<p>ここで、</p>
-
-<ul>
- <li><code><var>attribute</var></code> は <code><var>attributeName</var></code> の値を持つ文字列です。</li>
- <li><code><var>attributeName</var></code> は値を取得したい属性の名前です。</li>
-</ul>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush:js">const div1 = document.getElementById('div1');
-const align = div1.getAttribute('align');
-
-alert(align); // id="div1" の要素の align の値を表示します。</pre>
-
-<h2 id="Description" name="Description">解説</h2>
-
-<h3 id="Lower_casing" name="Lower_casing">小文字化</h3>
-
-<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p>
-
-<h3 id="Non-existing_attributes" name="Non-existing_attributes">属性が存在しない場合</h3>
-
-<p>基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は <code>null</code> を返します。これは<a href="http://dom.spec.whatwg.org/#dom-element-getattribute">現在の DOM 仕様書の草稿</a>で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には<em>空文字列</em>となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 <code>getAttribute()</code> の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから <code>getAttribute()</code> を呼び出すべきでしょう。</p>
-
-<h3 id="Retrieving_nonce_values" name="Retrieving_nonce_values">ノンス値の受け取り</h3>
-
-<p>セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た <a href="/ja/docs/Web/HTTP/CSP">CSP</a> のノンスと、 <code>.getAttribute("nonce")</code> の呼び出しは隠蔽されます。</p>
-
-<pre class="brush: js example-bad">let nonce =  script.getAttribute('nonce');
-// 空文字列が返される
-</pre>
-
-<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/ja/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p>
-
-<pre class="brush: js">let nonce =  script.nonce;</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-element-attachshadow', 'attachShadow()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.Element.getAttribute")}}</p>
-</div>
diff --git a/files/ja/web/api/element/getattribute/index.md b/files/ja/web/api/element/getattribute/index.md
new file mode 100644
index 0000000000..4ee84122ba
--- /dev/null
+++ b/files/ja/web/api/element/getattribute/index.md
@@ -0,0 +1,81 @@
+---
+title: Element.getAttribute()
+slug: Web/API/Element/getAttribute
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+  - メソッド
+translation_of: Web/API/Element/getAttribute
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>);
+</pre>
+
+<p>ここで、</p>
+
+<ul>
+ <li><code><var>attribute</var></code> は <code><var>attributeName</var></code> の値を持つ文字列です。</li>
+ <li><code><var>attributeName</var></code> は値を取得したい属性の名前です。</li>
+</ul>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush:js">const div1 = document.getElementById('div1');
+const align = div1.getAttribute('align');
+
+alert(align); // id="div1" の要素の align の値を表示します。</pre>
+
+<h2 id="Description" name="Description">解説</h2>
+
+<h3 id="Lower_casing" name="Lower_casing">小文字化</h3>
+
+<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p>
+
+<h3 id="Non-existing_attributes" name="Non-existing_attributes">属性が存在しない場合</h3>
+
+<p>基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は <code>null</code> を返します。これは<a href="http://dom.spec.whatwg.org/#dom-element-getattribute">現在の DOM 仕様書の草稿</a>で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には<em>空文字列</em>となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 <code>getAttribute()</code> の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから <code>getAttribute()</code> を呼び出すべきでしょう。</p>
+
+<h3 id="Retrieving_nonce_values" name="Retrieving_nonce_values">ノンス値の受け取り</h3>
+
+<p>セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た <a href="/ja/docs/Web/HTTP/CSP">CSP</a> のノンスと、 <code>.getAttribute("nonce")</code> の呼び出しは隠蔽されます。</p>
+
+<pre class="brush: js example-bad">let nonce =  script.getAttribute('nonce');
+// 空文字列が返される
+</pre>
+
+<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/ja/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p>
+
+<pre class="brush: js">let nonce =  script.nonce;</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-element-attachshadow', 'attachShadow()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<p>{{Compat("api.Element.getAttribute")}}</p>
+</div>
diff --git a/files/ja/web/api/element/getattributenames/index.html b/files/ja/web/api/element/getattributenames/index.html
deleted file mode 100644
index f353b84b74..0000000000
--- a/files/ja/web/api/element/getattributenames/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Element.getAttributeNames()
-slug: Web/API/Element/getAttributeNames
-tags:
-  - API
-  - DOM
-  - Element
-  - getAttributeNames
-  - メソッド
-  - 属性
-translation_of: Web/API/Element/getAttributeNames
----
-<div>{{APIRef("DOM")}}</div>
-
-<p>{{domxref("Element")}} インターフェースの <strong><code>getAttributeNames()</code></strong> メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。</p>
-
-<p><code>getAttributeNames()</code> を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames();
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:js notranslate">// 要素の属性に対して反復処理する
-for(let name of element.getAttributeNames()) {
-	let value = element.getAttribute(name);
-	console.log(name, value);
-}
-</pre>
-
-<h2 id="Polyfill" name="Polyfill">代替モジュール</h2>
-
-<pre class="brush:js notranslate">if (Element.prototype.getAttributeNames == undefined) {
-  Element.prototype.getAttributeNames = function () {
-    var attributes = this.attributes;
-    var length = attributes.length;
-    var result = new Array(length);
-    for (var i = 0; i &lt; length; i++) {
-      result[i] = attributes[i].name;
-    }
-    return result;
-  };
-}</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-element-getattributenames", "Element.getAttributeNames")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>
-<p>{{Compat("api.Element.getAttributeNames")}}</p>
-</div>
diff --git a/files/ja/web/api/element/getattributenames/index.md b/files/ja/web/api/element/getattributenames/index.md
new file mode 100644
index 0000000000..f353b84b74
--- /dev/null
+++ b/files/ja/web/api/element/getattributenames/index.md
@@ -0,0 +1,70 @@
+---
+title: Element.getAttributeNames()
+slug: Web/API/Element/getAttributeNames
+tags:
+  - API
+  - DOM
+  - Element
+  - getAttributeNames
+  - メソッド
+  - 属性
+translation_of: Web/API/Element/getAttributeNames
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p>{{domxref("Element")}} インターフェースの <strong><code>getAttributeNames()</code></strong> メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。</p>
+
+<p><code>getAttributeNames()</code> を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames();
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush:js notranslate">// 要素の属性に対して反復処理する
+for(let name of element.getAttributeNames()) {
+	let value = element.getAttribute(name);
+	console.log(name, value);
+}
+</pre>
+
+<h2 id="Polyfill" name="Polyfill">代替モジュール</h2>
+
+<pre class="brush:js notranslate">if (Element.prototype.getAttributeNames == undefined) {
+  Element.prototype.getAttributeNames = function () {
+    var attributes = this.attributes;
+    var length = attributes.length;
+    var result = new Array(length);
+    for (var i = 0; i &lt; length; i++) {
+      result[i] = attributes[i].name;
+    }
+    return result;
+  };
+}</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-element-getattributenames", "Element.getAttributeNames")}}</td>
+   <td>{{Spec2("DOM WHATWG")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<div>
+<p>{{Compat("api.Element.getAttributeNames")}}</p>
+</div>
diff --git a/files/ja/web/api/element/getattributenode/index.html b/files/ja/web/api/element/getattributenode/index.html
deleted file mode 100644
index 4d28b69f39..0000000000
--- a/files/ja/web/api/element/getattributenode/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Element.getAttributeNode()
-slug: Web/API/Element/getAttributeNode
-tags:
-  - API
-  - DOM
-  - Element
-  - Method
-  - Reference
-translation_of: Web/API/Element/getAttributeNode
----
-<div>{{ APIRef("DOM") }}</div>
-
-<p>指定された要素の指定された属性を、 <code>Attr</code> ノードとして返します。</p>
-
-<h2 id="Syntax">構文</h2>
-
-<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>);
-</pre>
-
-<ul>
- <li><code>attrNode</code> は指定の属性に対する <code>Attr</code> ノードです。</li>
- <li><code>attrName</code> は属性の名前を表す文字列です。</li>
-</ul>
-
-<h2 id="Example">Example</h2>
-
-<pre class="brush: js">// html: &lt;div id="top" /&gt;
-let t = document.getElementById("top");
-let idAttr = t.getAttributeNode("id");
-alert(idAttr.value == "top")
-</pre>
-
-<h2 id="Notes">注</h2>
-
-<p>HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、<code>getAttributeNode</code> は処理前に引数を小文字にします。</p>
-
-<p><code>Attr</code> ノードは <code>Node</code> を継承していますが、文書ツリーの一部と考えることはできません。一般の <code>Node</code> 属性、例えば <a href="/ja/docs/Web/API/Node/parentNode">parentNode</a>、 <a href="/ja/docs/Web/API/Node/previousSibling">previousSibling</a>、<a href="/ja/docs/Web/API/Node/nextSibling">nextSibling</a> などは <code>Attr</code> ノードでは <code>null</code> になります。しかしながら、 <code>ownerElement</code> プロパティではこの属性が属している要素を取得することができます。</p>
-
-<p>要素の属性の値を取得するためには、通常 <code>getAttributeNode</code> の代わりに <a href="/ja/docs/Web/API/Element/getAttribute">getAttribute</a> を使用してください。</p>
-
-<p>{{ DOMAttributeMethods() }}</p>
-
-<h2 id="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-element-getattributenode','getAttributeNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.getAttributeNode")}}</p>
diff --git a/files/ja/web/api/element/getattributenode/index.md b/files/ja/web/api/element/getattributenode/index.md
new file mode 100644
index 0000000000..4d28b69f39
--- /dev/null
+++ b/files/ja/web/api/element/getattributenode/index.md
@@ -0,0 +1,63 @@
+---
+title: Element.getAttributeNode()
+slug: Web/API/Element/getAttributeNode
+tags:
+  - API
+  - DOM
+  - Element
+  - Method
+  - Reference
+translation_of: Web/API/Element/getAttributeNode
+---
+<div>{{ APIRef("DOM") }}</div>
+
+<p>指定された要素の指定された属性を、 <code>Attr</code> ノードとして返します。</p>
+
+<h2 id="Syntax">構文</h2>
+
+<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>);
+</pre>
+
+<ul>
+ <li><code>attrNode</code> は指定の属性に対する <code>Attr</code> ノードです。</li>
+ <li><code>attrName</code> は属性の名前を表す文字列です。</li>
+</ul>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">// html: &lt;div id="top" /&gt;
+let t = document.getElementById("top");
+let idAttr = t.getAttributeNode("id");
+alert(idAttr.value == "top")
+</pre>
+
+<h2 id="Notes">注</h2>
+
+<p>HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、<code>getAttributeNode</code> は処理前に引数を小文字にします。</p>
+
+<p><code>Attr</code> ノードは <code>Node</code> を継承していますが、文書ツリーの一部と考えることはできません。一般の <code>Node</code> 属性、例えば <a href="/ja/docs/Web/API/Node/parentNode">parentNode</a>、 <a href="/ja/docs/Web/API/Node/previousSibling">previousSibling</a>、<a href="/ja/docs/Web/API/Node/nextSibling">nextSibling</a> などは <code>Attr</code> ノードでは <code>null</code> になります。しかしながら、 <code>ownerElement</code> プロパティではこの属性が属している要素を取得することができます。</p>
+
+<p>要素の属性の値を取得するためには、通常 <code>getAttributeNode</code> の代わりに <a href="/ja/docs/Web/API/Element/getAttribute">getAttribute</a> を使用してください。</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h2 id="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#dom-element-getattributenode','getAttributeNode()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.getAttributeNode")}}</p>
diff --git a/files/ja/web/api/element/getattributens/index.html b/files/ja/web/api/element/getattributens/index.html
deleted file mode 100644
index ee03de1cab..0000000000
--- a/files/ja/web/api/element/getattributens/index.html
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: element.getAttributeNS
-slug: Web/API/Element/getAttributeNS
-tags:
-  - DOM
-  - Gecko
-  - 翻訳中
-translation_of: Web/API/Element/getAttributeNS
----
-<p>{{ ApiRef("DOM") }}</p>
-
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-
-<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p>
-
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-
-<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
-</pre>
-
-<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3>
-
-<ul>
- <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li>
- <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li>
- <li><code><em>name</em> </code> は指定の属性の名前です。</li>
-</ul>
-
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-
-<pre class="eval">var div1 = document.getElementById("div1");
-var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
-                            "special-align");
-alert(a); // div の align 属性の値を表示します。
-</pre>
-
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
-
-<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p>
-
-<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p>
-
-<p>{{ DOMAttributeMethods() }}</p>
-
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p>
diff --git a/files/ja/web/api/element/getattributens/index.md b/files/ja/web/api/element/getattributens/index.md
new file mode 100644
index 0000000000..ee03de1cab
--- /dev/null
+++ b/files/ja/web/api/element/getattributens/index.md
@@ -0,0 +1,47 @@
+---
+title: element.getAttributeNS
+slug: Web/API/Element/getAttributeNS
+tags:
+  - DOM
+  - Gecko
+  - 翻訳中
+translation_of: Web/API/Element/getAttributeNS
+---
+<p>{{ ApiRef("DOM") }}</p>
+
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+
+<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p>
+
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+
+<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
+</pre>
+
+<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3>
+
+<ul>
+ <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li>
+ <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li>
+ <li><code><em>name</em> </code> は指定の属性の名前です。</li>
+</ul>
+
+<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+
+<pre class="eval">var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // div の align 属性の値を表示します。
+</pre>
+
+<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
+
+<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p>
+
+<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p>
+
+<p>{{ DOMAttributeMethods() }}</p>
+
+<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p>
diff --git a/files/ja/web/api/element/getboundingclientrect/index.html b/files/ja/web/api/element/getboundingclientrect/index.html
deleted file mode 100644
index 69c2b2500a..0000000000
--- a/files/ja/web/api/element/getboundingclientrect/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: Element.getBoundingClientRect()
-slug: Web/API/Element/getBoundingClientRect
-tags:
-  - API
-  - Boundary
-  - Bounding
-  - Bounds
-  - CSSOM View
-  - Client
-  - Containing
-  - DOM
-  - Element
-  - Enclosing
-  - Method
-  - Minimum
-  - Rectangle
-  - Reference
-  - Smallest
-  - clientHeight
-  - getBoundingClientRect
-  - getClientRects
-  - offsetHeight
-  - scrollHeight
-  - メソッド
-translation_of: Web/API/Element/getBoundingClientRect
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
-
-<h3 id="Value" name="Value">値</h3>
-
-<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p>
-
-<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
-
-<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p>
-
-<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p>
-
-<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p>
-
-<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3>
-
-<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p>
-
-<pre class="brush: js notranslate">// For scrollX
-(((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
-// For scrollY
-(((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
-</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
-var rect = obj.getBoundingClientRect();
-</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-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Notes" name="Notes">メモ</h3>
-
-<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p>
-
-<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p>
-
-<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p>
-
-<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
-// emptyObj の結果は {}
-emptyObj = Object.assign({}, rect)
-emptyObj = { ...rect }
-{width, ...emptyObj} = rect
-</pre>
-
-<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> の各プロパティは他のプロパティ値から計算されます。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
-</ul>
diff --git a/files/ja/web/api/element/getboundingclientrect/index.md b/files/ja/web/api/element/getboundingclientrect/index.md
new file mode 100644
index 0000000000..69c2b2500a
--- /dev/null
+++ b/files/ja/web/api/element/getboundingclientrect/index.md
@@ -0,0 +1,112 @@
+---
+title: Element.getBoundingClientRect()
+slug: Web/API/Element/getBoundingClientRect
+tags:
+  - API
+  - Boundary
+  - Bounding
+  - Bounds
+  - CSSOM View
+  - Client
+  - Containing
+  - DOM
+  - Element
+  - Enclosing
+  - Method
+  - Minimum
+  - Rectangle
+  - Reference
+  - Smallest
+  - clientHeight
+  - getBoundingClientRect
+  - getClientRects
+  - offsetHeight
+  - scrollHeight
+  - メソッド
+translation_of: Web/API/Element/getBoundingClientRect
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p>
+
+<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
+
+<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p>
+
+<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p>
+
+<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p>
+
+<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3>
+
+<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p>
+
+<pre class="brush: js notranslate">// For scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// For scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
+var rect = obj.getBoundingClientRect();
+</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-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">メモ</h3>
+
+<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p>
+
+<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p>
+
+<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p>
+
+<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
+// emptyObj の結果は {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+</pre>
+
+<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> の各プロパティは他のプロパティ値から計算されます。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
+ <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
+</ul>
diff --git a/files/ja/web/api/element/getclientrects/index.html b/files/ja/web/api/element/getclientrects/index.html
deleted file mode 100644
index f8276ed1cb..0000000000
--- a/files/ja/web/api/element/getclientrects/index.html
+++ /dev/null
@@ -1,231 +0,0 @@
----
-title: Element.getClientRects()
-slug: Web/API/Element/getClientRects
-tags:
-  - API
-  - CSSOM View
-  - Element
-  - Method
-  - Reference
-  - clientHeight
-  - getBoundingClientRect
-  - getClientRects
-  - offsetHeight
-  - scrollHeight
-translation_of: Web/API/Element/getClientRects
----
-<p>{{APIRef("DOM")}}</p>
-
-<p><strong><code>getClientRects()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 境界ボックス</a>の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。</p>
-
-<p>多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行の<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a> (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">let <var>rectCollection</var> = <var>object</var>.getClientRects();</pre>
-
-<h3 id="Return_value" name="Return_value">返値</h3>
-
-<p>返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <code>&lt;svg&gt;</code> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <code>&lt;svg&gt;</code> が確立したビューポートになります (明確にするために、矩形は外部の <code>&lt;svg&gt;</code> の <code>viewBox</code> 変形によっても変換されます)。</p>
-
-<p>本来、Microsoft はこのメソッドがテキストの各行に対して <code>TextRectangle</code> オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。</p>
-
-<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}</p>
-
-<p>矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。</p>
-
-<p>返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。</p>
-
-<p>HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 <code>display:none</code> の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。</p>
-
-<p>CSS ボックスで境界ボックスが空であっても矩形が返されます。 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各座標はなお意味を持っています。</p>
-
-
-
-<p>小数のピクセルオフセットが可能です。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 <code>withClientRectsOverlay</code> クラスを介してマークアップに接続されていることに注意してください。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>例 1: このHTMLは、 <code>&lt;span&gt;</code> 要素を含む3つの段落を生成し、それぞれを <code>&lt;div&gt;</code> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <code>&lt;span&gt;</code> 要素には、クライアントの矩形が描画されます。</p>
-
-<pre class="brush: html notranslate">&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>例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <code>&lt;ol&gt;</code> と 3 番目のブロックの各 <code>&lt;li&gt;</code> 要素に対してクライアントの矩形が描かれています。</p>
-
-<pre class="brush: html notranslate">&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>例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <code>&lt;table&gt;</code> で描画されます。</p>
-
-<pre class="brush: html notranslate">&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>CSS は、最初の例では各 <code>&lt;div&gt;</code> ブロック内の段落と <code>&lt;span&gt;</code> の周りに、2番目の例では <code>&lt;ol&gt;</code> と <code>&lt;li&gt;</code> の周りに、3番目の例では <code>&lt;table&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;td&gt;</code> の各要素の周りに境界線を描画します。</p>
-
-<pre class="brush: css notranslate">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>JavaScriptコードは、 CSS のクラス <code>withClientRectsOverlay</code> が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。</p>
-
-<pre class="brush: js notranslate">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" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Examples', 680, 650)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Notes" name="Notes">補足</h3>
-
-<p><code>getClientRects()</code> は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.getClientRects")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
-</ul>
diff --git a/files/ja/web/api/element/getclientrects/index.md b/files/ja/web/api/element/getclientrects/index.md
new file mode 100644
index 0000000000..f8276ed1cb
--- /dev/null
+++ b/files/ja/web/api/element/getclientrects/index.md
@@ -0,0 +1,231 @@
+---
+title: Element.getClientRects()
+slug: Web/API/Element/getClientRects
+tags:
+  - API
+  - CSSOM View
+  - Element
+  - Method
+  - Reference
+  - clientHeight
+  - getBoundingClientRect
+  - getClientRects
+  - offsetHeight
+  - scrollHeight
+translation_of: Web/API/Element/getClientRects
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p><strong><code>getClientRects()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 境界ボックス</a>の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。</p>
+
+<p>多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行の<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a> (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">let <var>rectCollection</var> = <var>object</var>.getClientRects();</pre>
+
+<h3 id="Return_value" name="Return_value">返値</h3>
+
+<p>返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <code>&lt;svg&gt;</code> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <code>&lt;svg&gt;</code> が確立したビューポートになります (明確にするために、矩形は外部の <code>&lt;svg&gt;</code> の <code>viewBox</code> 変形によっても変換されます)。</p>
+
+<p>本来、Microsoft はこのメソッドがテキストの各行に対して <code>TextRectangle</code> オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。</p>
+
+<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}</p>
+
+<p>矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。</p>
+
+<p>返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。</p>
+
+<p>HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 <code>display:none</code> の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。</p>
+
+<p>CSS ボックスで境界ボックスが空であっても矩形が返されます。 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各座標はなお意味を持っています。</p>
+
+
+
+<p>小数のピクセルオフセットが可能です。</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 <code>withClientRectsOverlay</code> クラスを介してマークアップに接続されていることに注意してください。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<p>例 1: このHTMLは、 <code>&lt;span&gt;</code> 要素を含む3つの段落を生成し、それぞれを <code>&lt;div&gt;</code> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <code>&lt;span&gt;</code> 要素には、クライアントの矩形が描画されます。</p>
+
+<pre class="brush: html notranslate">&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>例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <code>&lt;ol&gt;</code> と 3 番目のブロックの各 <code>&lt;li&gt;</code> 要素に対してクライアントの矩形が描かれています。</p>
+
+<pre class="brush: html notranslate">&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>例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <code>&lt;table&gt;</code> で描画されます。</p>
+
+<pre class="brush: html notranslate">&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>CSS は、最初の例では各 <code>&lt;div&gt;</code> ブロック内の段落と <code>&lt;span&gt;</code> の周りに、2番目の例では <code>&lt;ol&gt;</code> と <code>&lt;li&gt;</code> の周りに、3番目の例では <code>&lt;table&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;td&gt;</code> の各要素の周りに境界線を描画します。</p>
+
+<pre class="brush: css notranslate">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>JavaScriptコードは、 CSS のクラス <code>withClientRectsOverlay</code> が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。</p>
+
+<pre class="brush: js notranslate">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" name="Result">結果</h3>
+
+<p>{{EmbedLiveSample('Examples', 680, 650)}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Notes" name="Notes">補足</h3>
+
+<p><code>getClientRects()</code> は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.getClientRects")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
+</ul>
diff --git a/files/ja/web/api/element/getelementsbyclassname/index.html b/files/ja/web/api/element/getelementsbyclassname/index.html
deleted file mode 100644
index c20756a14b..0000000000
--- a/files/ja/web/api/element/getelementsbyclassname/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Element.getElementsByClassName()
-slug: Web/API/Element/getElementsByClassName
-tags:
-  - API
-  - Classes
-  - Element
-  - Method
-  - Reference
-  - getElementsByClassName
-translation_of: Web/API/Element/getElementsByClassName
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p>
-
-<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
-
-<h3 id="Parameters" name="Parameters">引数</h3>
-
-<dl>
- <dt><code>names</code></dt>
- <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd>
-</dl>
-
-<h3 id="Return_value" name="Return_value">戻り値</h3>
-
-<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p>
-
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
-
-<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p>
-
-<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p>
-
-<div class="note">
-<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p>
-</div>
-
-<h2 id="Syntax" name="Syntax">例</h2>
-
-<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3>
-
-<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p>
-
-<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre>
-
-<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p>
-
-<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre>
-
-<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3>
-
-<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p>
-
-<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre>
-
-<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3>
-
-<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p>
-
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
-
-for (var i=0; i&lt;matches.length; i++) {
-  matches[i].classList.remove('colorbox');
-  matches.item(i).classList.add('hueframe');
-}
-</pre>
-
-<p>別の手段を使いましょう。例えば、</p>
-
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
-
-while (matches.length &gt; 0) {
-  matches.item(0).classList.add('hueframe');
-  matches[0].classList.remove('colorbox');
-}</pre>
-
-<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p>
-
-<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3>
-
-<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p>
-
-<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'DIV';
-});</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/ja/web/api/element/getelementsbyclassname/index.md b/files/ja/web/api/element/getelementsbyclassname/index.md
new file mode 100644
index 0000000000..c20756a14b
--- /dev/null
+++ b/files/ja/web/api/element/getelementsbyclassname/index.md
@@ -0,0 +1,113 @@
+---
+title: Element.getElementsByClassName()
+slug: Web/API/Element/getElementsByClassName
+tags:
+  - API
+  - Classes
+  - Element
+  - Method
+  - Reference
+  - getElementsByClassName
+translation_of: Web/API/Element/getElementsByClassName
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p>
+
+<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+
+<h3 id="Parameters" name="Parameters">引数</h3>
+
+<dl>
+ <dt><code>names</code></dt>
+ <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p>
+
+<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+
+<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p>
+
+<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p>
+
+<div class="note">
+<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">例</h2>
+
+<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3>
+
+<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p>
+
+<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre>
+
+<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p>
+
+<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre>
+
+<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3>
+
+<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p>
+
+<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre>
+
+<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3>
+
+<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p>
+
+<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+
+for (var i=0; i&lt;matches.length; i++) {
+  matches[i].classList.remove('colorbox');
+  matches.item(i).classList.add('hueframe');
+}
+</pre>
+
+<p>別の手段を使いましょう。例えば、</p>
+
+<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+
+while (matches.length &gt; 0) {
+  matches.item(0).classList.add('hueframe');
+  matches[0].classList.remove('colorbox');
+}</pre>
+
+<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p>
+
+<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3>
+
+<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p>
+
+<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});</pre>
+
+<h2 id="Specifications" name="Specifications">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.Element.getElementsByClassName")}}</p>
diff --git a/files/ja/web/api/element/getelementsbytagname/index.html b/files/ja/web/api/element/getelementsbytagname/index.html
deleted file mode 100644
index 248bf36639..0000000000
--- a/files/ja/web/api/element/getelementsbytagname/index.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: element.getElementsByTagName
-slug: Web/API/Element/getElementsByTagName
-tags:
-  - DOM
-  - Gecko
-translation_of: Web/API/Element/getElementsByTagName
----
-<p>{{ ApiRef() }}</p>
-
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-
-<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p>
-
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-
-<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)
-</pre>
-
-<ul>
- <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li>
- <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li>
- <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li>
-</ul>
-
-<div class="note">
-<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p>
-
-<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p>
-</div>
-
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-
-<pre class="brush: js">// テーブル内のセルの数だけ反復処理します
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagName("td");
-for (var i = 0; i &lt; cells.length; i++) {
-    status = cells[i].getAttribute("status");
-    if ( status == "open") {
-        // データを取得します
-    }
-}
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3>
-
-<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p>
-
-<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3>
-
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p>
-
-<div class="noinclude"> </div>
-
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p>
diff --git a/files/ja/web/api/element/getelementsbytagname/index.md b/files/ja/web/api/element/getelementsbytagname/index.md
new file mode 100644
index 0000000000..248bf36639
--- /dev/null
+++ b/files/ja/web/api/element/getelementsbytagname/index.md
@@ -0,0 +1,55 @@
+---
+title: element.getElementsByTagName
+slug: Web/API/Element/getElementsByTagName
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Element/getElementsByTagName
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+
+<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p>
+
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+
+<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li>
+ <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li>
+ <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li>
+</ul>
+
+<div class="note">
+<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p>
+
+<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p>
+</div>
+
+<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+
+<pre class="brush: js">// テーブル内のセルの数だけ反復処理します
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i &lt; cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // データを取得します
+    }
+}
+</pre>
+
+<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3>
+
+<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p>
+
+<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p>
diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.html b/files/ja/web/api/element/getelementsbytagnamens/index.html
deleted file mode 100644
index f0344fd357..0000000000
--- a/files/ja/web/api/element/getelementsbytagnamens/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: element.getElementsByTagNameNS
-slug: Web/API/Element/getElementsByTagNameNS
-tags:
-  - DOM
-  - Gecko
-translation_of: Web/API/Element/getElementsByTagNameNS
----
-<p>{{ ApiRef() }}</p>
-
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
-
-<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p>
-
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
-
-<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>)
-</pre>
-
-<ul>
- <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li>
- <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li>
- <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li>
- <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li>
-</ul>
-
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-
-<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i &lt; cells.length; i++) {
-    axis = cells[i].getAttribute("axis");
-    if ( axis == "year") {
-        // データを取得
-    }
-}
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3>
-
-<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p>
-
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
-
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p>
-
-<div class="noinclude"> </div>
-
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p>
diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.md b/files/ja/web/api/element/getelementsbytagnamens/index.md
new file mode 100644
index 0000000000..f0344fd357
--- /dev/null
+++ b/files/ja/web/api/element/getelementsbytagnamens/index.md
@@ -0,0 +1,50 @@
+---
+title: element.getElementsByTagNameNS
+slug: Web/API/Element/getElementsByTagNameNS
+tags:
+  - DOM
+  - Gecko
+translation_of: Web/API/Element/getElementsByTagNameNS
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+
+<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p>
+
+<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+
+<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>)
+</pre>
+
+<ul>
+ <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li>
+ <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li>
+ <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li>
+ <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li>
+</ul>
+
+<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+
+<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+for (var i = 0; i &lt; cells.length; i++) {
+    axis = cells[i].getAttribute("axis");
+    if ( axis == "year") {
+        // データを取得
+    }
+}
+</pre>
+
+<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3>
+
+<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p>
+
+<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p>
+
+<div class="noinclude"> </div>
+
+<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p>
-- 
cgit v1.2.3-54-g00ecf


From 7d9629e268d787683dbb5e29e228b3cb0a20e6ad Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 23:08:13 +0900
Subject: 2021/09/15 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/after/index.md            |  76 +++++-----
 files/ja/web/api/element/append/index.md           |  97 +++++++------
 files/ja/web/api/element/before/index.md           |  79 ++++++-----
 files/ja/web/api/element/closest/index.md          | 158 +++++++++------------
 files/ja/web/api/element/getattributens/index.md   | 107 ++++++++++----
 .../api/element/getelementsbyclassname/index.md    | 123 ++++++++--------
 .../web/api/element/getelementsbytagname/index.md  |  69 +++++----
 .../api/element/getelementsbytagnamens/index.md    |  57 ++++----
 8 files changed, 396 insertions(+), 370 deletions(-)

diff --git a/files/ja/web/api/element/after/index.md b/files/ja/web/api/element/after/index.md
index 52186ca2fb..40344ddd30 100644
--- a/files/ja/web/api/element/after/index.md
+++ b/files/ja/web/api/element/after/index.md
@@ -4,40 +4,38 @@ slug: Web/API/Element/after
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
-  - Reference
+  - リファレンス
 browser-compat: api.Element.after
 translation_of: Web/API/Element/after
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+**`Element.after()`** は、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子リストの、 `Element` の直後に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
+```js
 after(... nodes)
-</pre>
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-  <dt><code>nodes</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodes`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Inserting_an_element">要素の挿入</h3>
+### 要素の挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -45,23 +43,26 @@ let span = document.createElement("span");
 p.after(span);
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
-</pre>
+// "<div><p></p><span></span></div>"
+```
 
-<h3 id="Inserting_text">テキストの挿入</h3>
+### テキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 
 p.after("Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+// "<div><p></p>Text</div>"
+```
 
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+### 要素とテキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -69,22 +70,21 @@ let span = document.createElement("span");
 p.after(span, "Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+// "<div><p></p><span></span>Text</div>"
+```
 
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.before()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.before()")}}
+- {{domxref("Element.append()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md
index 82feaa6f91..ffe3f44068 100644
--- a/files/ja/web/api/element/append/index.md
+++ b/files/ja/web/api/element/append/index.md
@@ -4,97 +4,96 @@ slug: Web/API/Element/append
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
   - Element
-  - Reference
+  - リファレンス
 browser-compat: api.Element.append
 translation_of: Web/API/Element/append
 original_slug: Web/API/ParentNode/append
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p>
+**`Element.append()`** メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを `Element` のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。
 
-<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
+{{domxref("Node.appendChild()")}} との違いは次の通りです。
 
-<ul>
-  <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
-  <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
-  <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li>
-</ul>
+- `Element.append()` は {{domxref("DOMString")}} も追加することができますが、`Node.appendChild()` は{{domxref("Node")}} オブジェクトのみを受け付けます。
+- `Element.append()` には返値がありませんが、`Node.appendChild()` は追加された {{domxref("Node")}} オブジェクトを返します。
+- `Element.append()` は複数のノードや文字列を追加することができますが、`Node.appendChild()` はノードを 1 つだけしか追加することができせん。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
+```js
 append(...nodesOrDOMStrings)
-</pre>
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-  <dt><code>nodesOrDOMStrings</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodesOrDOMStrings`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Appending_an_element">要素の追加</h3>
+### 要素の追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 let p = document.createElement("p")
 div.append(p)
 
-console.log(div.childNodes) // NodeList [ &lt;p&gt; ]
-</pre>
+console.log(div.childNodes) // NodeList [ <p> ]
+```
 
-<h3 id="Appending_text">テキストの追加</h3>
+### テキストの追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 div.append("Some text")
 
-console.log(div.textContent) // "Some text"</pre>
+console.log(div.textContent) // "Some text"
+```
 
-<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
+### 要素とテキストの追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 let p = document.createElement("p")
 div.append("Some text", p)
 
-console.log(div.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]
+```
 
-<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3>
+### append メソッドはスコープが効かない
 
-<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+`append()` メソッドは `with` 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 
 with(div) {
   append("foo")
 }
-// ReferenceError: append is not defined </pre>
+// ReferenceError: append is not defined
+```
 
-
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.prepend()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.prepend()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Element.after()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/before/index.md b/files/ja/web/api/element/before/index.md
index 652f38c95f..2bef18e920 100644
--- a/files/ja/web/api/element/before/index.md
+++ b/files/ja/web/api/element/before/index.md
@@ -4,39 +4,39 @@ slug: Web/API/Element/before
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
-  - Reference
+  - リファレンス
 browser-compat: api.Element.before
 translation_of: Web/API/Element/before
 original_slug: Web/API/ChildNode/before
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+**`Element.before()`** は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この `Element` の親の子リストの中、この `Element` の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">before(... nodes)</pre>
+```js
+before(... nodes)
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-	<dt><code>nodes</code></dt>
-	<dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodes`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Inserting_an_element">要素の挿入</h3>
+### 要素の挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -44,23 +44,26 @@ let span = document.createElement("span");
 p.before(span);
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
-</pre>
+// "<div><span></span><p></p></div>"
+```
 
-<h3 id="Inserting_text">テキストの挿入</h3>
+### テキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 
 p.before("Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+// "<div>Text<p></p></div>"
+```
 
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+### 要素とテキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -68,24 +71,22 @@ let span = document.createElement("span");
 p.before(span, "Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+// "<div><span></span>Text<p></p></div>"
+```
 
-
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Node.insertBefore()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.after()")}}
+- {{domxref("Element.append()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/closest/index.md b/files/ja/web/api/element/closest/index.md
index dd876b80aa..5cb1ccccda 100644
--- a/files/ja/web/api/element/closest/index.md
+++ b/files/ja/web/api/element/closest/index.md
@@ -3,56 +3,56 @@ title: Element.closest()
 slug: Web/API/Element/closest
 tags:
   - API
+  - CSS セレクター
   - DOM
   - Element
-  - Method
-  - Reference
   - メソッド
+  - リファレンス
+  - セレクター
+browser-compat: api.Element.closest
 translation_of: Web/API/Element/closest
 ---
-<div>{{APIRef('DOM')}}</div>
+{{APIRef('DOM')}}
 
-<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。
+**`closest()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素 ({{domxref("Element")}}) とその親階層に（文書ルートに向かって）、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 `null` を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
-</pre>
+```js
+var closestElement = targetElement.closest(selectors);
+```
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+### 引数
 
-<ul>
- <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br>
-  例: <code>p:hover, .toto + q</code></li>
-</ul>
+- `selectors` は {{domxref("DOMString")}} で、セレクターのリストを指定します。
+  例: `p:hover, .toto + q`
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+### 返値
 
-<ul>
- <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li>
-</ul>
+- `closestElement` は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 `null` になることがあります。
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+### 例外
 
-<ul>
- <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li>
-</ul>
+- {{exception("SyntaxError")}} は `selectors` が妥当なセレクターリストの文字列ではない場合に発生します。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;article&gt;
-  &lt;div id="div-01"&gt;Here is div-01
-    &lt;div id="div-02"&gt;Here is div-02
-      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
+```html
+<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var el = document.getElementById('div-03');
+```js
+var el = document.getElementById('div-03');
 
 var r1 = el.closest("#div-02");
 // id=div-02 である要素を返す
@@ -64,15 +64,18 @@ var r3 = el.closest("article &gt; div");
 // 親に article を持つ div である直近の祖先、ここでは div-01 を返す
 
 var r4 = el.closest(":not(div)");
-// div ではない直近の祖先、ここではもっとも外側の article を返す</pre>
+// div ではない直近の祖先、ここではもっとも外側の article を返す
+```
 
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+## ポリフィル
 
-<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p>
+`Element.closest()` に対応していないブラウザーで、 `element.matches()` (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。
 
-<pre class="brush: js">if (!Element.prototype.matches) {
-  Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                              Element.prototype.webkitMatchesSelector;
+```js
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
 }
 
 if (!Element.prototype.closest) {
@@ -82,68 +85,43 @@ if (!Element.prototype.closest) {
     do {
       if (Element.prototype.matches.call(el, s)) return el;
       el = el.parentElement || el.parentNode;
-    } while (el !== null &amp;&amp; el.nodeType === 1);
+    } while (el !== null && el.nodeType === 1);
     return null;
   };
-}</pre>
+}
+```
 
-<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p>
+しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。
 
-<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
+```js
+if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
     var matches = (this.document || this.ownerDocument).querySelectorAll(s),
         i,
         el = this;
     do {
       i = matches.length;
-      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
-    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
     return el;
   };
 }
-</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-element-closest', 'Element.closest()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.Element.closest")}}</p>
-
-<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3>
-
-<ul>
- <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li>
-</ul>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element")}} インターフェイス</li>
- <li>
-  <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div>
- </li>
- <li>
-  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
- </li>
-</ul>
-</div>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+### 互換性のメモ
+
+- Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 `document.createElement(tagName).closest(tagName)` が `null` を返します。
+
+## 関連情報
+
+- {{domxref("Element")}} インターフェイス
+- [セレクターの構文](/ja/docs/Learn/CSS/Building_blocks/Selectors)
+- セレクターを取る他のメソッド: {{domxref("element.querySelector()")}} および {{domxref("element.matches()")}}
diff --git a/files/ja/web/api/element/getattributens/index.md b/files/ja/web/api/element/getattributens/index.md
index ee03de1cab..7ec8113595 100644
--- a/files/ja/web/api/element/getattributens/index.md
+++ b/files/ja/web/api/element/getattributens/index.md
@@ -1,47 +1,100 @@
 ---
-title: element.getAttributeNS
+title: Element.getAttributeNS()
 slug: Web/API/Element/getAttributeNS
 tags:
+  - API
   - DOM
-  - Gecko
-  - 翻訳中
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getAttributeNS
 translation_of: Web/API/Element/getAttributeNS
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{APIRef("DOM")}}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`getAttributeNS()`** は {{domxref("Element")}} インターフェイスのメソッドで、指定された名前空間と名前を持つ属性の文字列値を返します。のような名前の属性が存在しない場合は、 `null` または `""` （空文字列のどちらかを返します。詳しくは{{Anch("メモ")}}を参照してください。
 
-<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p>
+## 構文
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+```js
+attrVal = element.getAttributeNS(namespace, name)
+```
 
-<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
-</pre>
+### 引数
 
-<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3>
+- `namespace`
+  - : 指定された属性を探す名前空間です。
+- `name`
+  - : 探す属性の名前です。
 
-<ul>
- <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li>
- <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li>
- <li><code><em>name</em> </code> は指定の属性の名前です。</li>
-</ul>
+### 返値
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+指定された属性の文字列値です。その属性が存在しない場合、結果は `null` になります。
 
-<pre class="eval">var div1 = document.getElementById("div1");
-var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
-                            "special-align");
-alert(a); // div の align 属性の値を表示します。
-</pre>
+> **Note:** 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。
 
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
+## 例
 
-<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p>
+以下の SVG 文書は独自の名前空間にある `foo` 属性の値を読み取ります。
 
-<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p>
+```xml
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
 
-<p>{{ DOMAttributeMethods() }}</p>
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
 
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+  <script type="text/javascript">
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p>
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  </script>
+</svg>
+```
+
+HTML5 文書では名前空間に対応していないため、この属性は `test:foo` でアクセスする必要があります。
+
+```html
+<!DOCTYPE html>
+<html>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/>
+</svg>
+
+<script type="text/javascript">
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+</script>
+
+</body>
+</html>
+```
+
+## メモ
+
+名前空間は XML 文書でのみ対応しています。 HTML5 文書では、代わりに `getAttribute()` を使用する必要があります。
+
+`getAttributeNS()` は {{domxref("element.getAttribute()",
+  "getAttribute()")}} とは異なり、特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は Mozilla の架空の "specialspace" 名前空間に属しています。
+
+DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブブラウザーは null を返していました。 DOM4 以降は、仕様でも null を返すように指定されました。しかし、一部の古いウェブブラウザーは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら、 `getAttributeNS` を呼ぶ前に {{domxref("element.hasAttributeNS()", "hasAttributeNS()")}} を使用して属性の存在を確かめる必要があります。
+
+{{DOMAttributeMethods}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [コードスニペット:getAttributeNS](/ja/docs/Mozilla/Add-ons/Code_snippets/getAttributeNS)
diff --git a/files/ja/web/api/element/getelementsbyclassname/index.md b/files/ja/web/api/element/getelementsbyclassname/index.md
index c20756a14b..1b69097ee3 100644
--- a/files/ja/web/api/element/getelementsbyclassname/index.md
+++ b/files/ja/web/api/element/getelementsbyclassname/index.md
@@ -3,111 +3,108 @@ title: Element.getElementsByClassName()
 slug: Web/API/Element/getElementsByClassName
 tags:
   - API
-  - Classes
+  - クラス
   - Element
-  - Method
-  - Reference
+  - メソッド
+  - リファレンス
   - getElementsByClassName
+browser-compat: api.Element.getElementsByClassName
 translation_of: Web/API/Element/getElementsByClassName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p>
+{{domxref("Element")}} の **`getElementsByClassName()`** メソッドは、引数で与えられたクラス名を含むすべての子要素を、生きた {{domxref("HTMLCollection")}} で返します。 
 
-<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p>
+{{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、 {{domxref("Document")}} 全体に働きます。特定された文書ルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+```js
+var elements = element.getElementsByClassName(names);
+```
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+### 引数
 
-<dl>
- <dt><code>names</code></dt>
- <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd>
-</dl>
+- `names`
+  - : 一致させる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。
 
-<h3 id="Return_value" name="Return_value">戻り値</h3>
+### 返値
 
-<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p>
+{{domxref("HTMLCollection")}} で、 `names` で指定したすべてのクラスを持つすべての要素のライブで更新されるリストです。
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+## 使用上の注意
 
-<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p>
+この関数が返すコレクションは常に*生きています*。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で `names` に一致する新しい要素が追加された場合は、直ちにこのコレクションに追加されます。同様に、サブツリー上にある `names` に一致しなかった要素が一致するよう変更された場合も、すぐにこのコレクションに現れます。
 
-<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p>
+逆もしかりです。 `names` に一致しなくなったりツリーから外された要素は、すぐにコレクションから除外されます。
 
-<div class="note">
-<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p>
-</div>
+> **Note:** クラス名は[後方互換モード](/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)では大文字・小文字が区別されず、それ以外では区別されます。
 
-<h2 id="Syntax" name="Syntax">例</h2>
+## 例
 
-<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3>
+### 単一のクラスと一致させる
 
-<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p>
+単一の指定されたクラスを含む要素を探すには、 `getElementsByClassName()` を呼び出す際にそのクラス名を指定するだけです。
 
-<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre>
+```js
+element.getElementsByClassName('test');
+```
 
-<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p>
+この例は `main` の `id` を持つ要素の子孫の中で、`test` クラスをもつ全要素を見つけます。
 
-<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre>
+```js
+document.getElementById('main').getElementsByClassName('test');
+```
 
-<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3>
+### 複数のクラスと一致させる
 
-<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p>
+`red` と `test` 両方のクラスを含んだ要素を見つけます。
 
-<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre>
+```js
+element.getElementsByClassName('red test');
+```
 
-<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3>
+### 結果を調査する
 
-<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p>
+標準の配列構文や、`HTMLCollection` の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。`colorbox` クラスを外した際に、`matches` がすぐに変更されてしまうからです。
 
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+```js
+var matches = element.getElementsByClassName('colorbox');
 
-for (var i=0; i&lt;matches.length; i++) {
+for (var i=0; i<matches.length; i++) {
   matches[i].classList.remove('colorbox');
   matches.item(i).classList.add('hueframe');
 }
-</pre>
+```
 
-<p>別の手段を使いましょう。例えば、</p>
+別の手段を使いましょう。例えば、
 
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+```js
+var matches = element.getElementsByClassName('colorbox');
 
-while (matches.length &gt; 0) {
+while (matches.length > 0) {
   matches.item(0).classList.add('hueframe');
   matches[0].classList.remove('colorbox');
-}</pre>
+}
+```
 
-<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p>
+このコードは、`"colorbox"` クラスを持つ子孫要素を見つけ、`item(0)`を呼び出して `"hueframe"` クラスを追加し、（配列記法で） `"colorbox"` を削除します。その後、（もし残っていれば）別の要素が `item(0)` になります。
 
-<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3>
+### Array メソッドで結果を抽出する
 
-<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p>
+このメソッドの戻り値を `this` 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で `Array` メソッドを使うことができます。次の例では `test` クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。
 
-<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'DIV';
-});</pre>
+```js
+var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});
+```
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+## 仕様書
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getElementsByClassName")}}</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/getelementsbytagname/index.md b/files/ja/web/api/element/getelementsbytagname/index.md
index 248bf36639..5164678956 100644
--- a/files/ja/web/api/element/getelementsbytagname/index.md
+++ b/files/ja/web/api/element/getelementsbytagname/index.md
@@ -1,55 +1,54 @@
 ---
-title: element.getElementsByTagName
+title: Element.getElementsByTagName()
 slug: Web/API/Element/getElementsByTagName
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getElementsByTagName
 translation_of: Web/API/Element/getElementsByTagName
 ---
-<p>{{ ApiRef() }}</p>
+{{ APIRef("DOM") }}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`Element.getElementsByTagName()`** メソッドは、生きた {{domxref("HTMLCollection")}} で指定された[タグ名](/ja/docs/Web/API/Element/tagName)を持つ要素を返します。
 
-<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p>
+この要素のすべての子孫が検索されますが、要素そのものは検索されません。返されるリストは*生きており*、 DOM ツリーとともに自動的に更新されます。したがって、同じ要素と引数で `Element.getElementsByTagName()` を繰り返し呼び出す必要はなく、呼び出しの間に DOM が変化しても大丈夫です。
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+HTML 文書内の HTML 要素に対して呼び出された場合、 `getElementsByTagName` は引数を小文字に変換してから検索を行います。これは、HTML 文書内のキャメルケースの SVG 要素（例えば [`<linearGradient>`](/ja/docs/Web/SVG/Element/linearGradient)）と照合しようとする場合には望ましくありません。代わりに、 {{ domxref("Element.getElementsByTagNameNS()") }} を使ってください。この場合、タグ名の大文字と小文字は区別されます。
 
-<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)
-</pre>
+`Element.getElementsByTagName` は {{domxref("Document.getElementsByTagName()")}} に似ていますが、指定した要素の子孫の要素のみを検索する点が異なります。
 
-<ul>
- <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li>
- <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li>
- <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li>
-</ul>
+## 構文
 
-<div class="note">
-<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p>
+```js
+elements = element.getElementsByTagName(tagName)
+```
 
-<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p>
-</div>
+- `elements` は*生きた* {{domxref("HTMLCollection")}} で、タグ名が一致する要素が出現順で入ります。要素が見つかアなかった場合は `HTMLCollection` は空になります。
+- `element` は検索を始める要素です。この要素の子孫のみが含まれ、この要素自身は含まれません。
+- `tagName` は検索する修飾名です。特別な文字列 `"*"` はすべての要素を表します。 XHTML との互換性のため、小文字を使用してください。
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+## 例
 
-<pre class="brush: js">// テーブル内のセルの数だけ反復処理します
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagName("td");
-for (var i = 0; i &lt; cells.length; i++) {
-    status = cells[i].getAttribute("status");
-    if ( status == "open") {
-        // データを取得します
-    }
-}
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3>
+```js
+// テーブル内のセルの数だけ反復処理します
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
 
-<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p>
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // データを取得
+  }
+}
+```
 
-<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3>
+## 仕様書
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p>
+{{Specifications}}
 
-<div class="noinclude"> </div>
+## ブラウザーの互換性
 
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.md b/files/ja/web/api/element/getelementsbytagnamens/index.md
index f0344fd357..982a51bb6b 100644
--- a/files/ja/web/api/element/getelementsbytagnamens/index.md
+++ b/files/ja/web/api/element/getelementsbytagnamens/index.md
@@ -1,50 +1,49 @@
 ---
-title: element.getElementsByTagNameNS
+title: Element.getElementsByTagNameNS()
 slug: Web/API/Element/getElementsByTagNameNS
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getElementsByTagNameNS
 translation_of: Web/API/Element/getElementsByTagNameNS
 ---
-<p>{{ ApiRef() }}</p>
+{{APIRef("DOM")}}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`Element.getElementsByTagNameNS()`** メソッドは、指定された名前空間に属する、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} をライブで返します。これは {{Domxref("Document.getElementsByTagNameNS")}} に似ていますが、検索対象が指定された要素の子孫に限定される点が異なります。
 
-<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p>
+## 構文
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+```js
+elements = element.getElementsByTagNameNS(namespaceURI, localName)
+```
 
-<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>)
-</pre>
+- `elements` は生きた {{domxref("HTMLCollection")}} で、ツリー内で見つかった要素を出現順に保持します。
+- `element` は検索を開始する要素です。なお、この要素の子孫は含まれますが、このノード自体は含まれません。
+- `namespaceURI` は検索する要素の名前空間 URI です（{{domxref("Element.namespaceURI")}} および {{domxref("Attr.namespaceURI")}} を参照してください）。例えば、 XHTML 要素を検索する場合は、 XHTML の名前空間 URI である `http://www.w3.org/1999/xhtml` を使用してください。
+- `localName` は検索する要素のローカル名、またはすべての要素に一致する特殊な値 `"*"` です（{{domxref("Element.localName")}} および {{domxref("Attr.localName")}} を参照）。
 
-<ul>
- <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li>
- <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li>
- <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li>
- <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li>
-</ul>
+## 例
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-
-<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。
+```js
+// XHTML 文書の table の多くのセルの配列をチェック。
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i &lt; cells.length; i++) {
-    axis = cells[i].getAttribute("axis");
-    if ( axis == "year") {
+
+for (var i = 0; i < cells.length; i++) {
+    var axis = cells[i].getAttribute("axis");
+    if (axis == "year") {
         // データを取得
     }
 }
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3>
-
-<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p>
+```
 
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+## 仕様書
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p>
+{{Specifications}}
 
-<div class="noinclude"> </div>
+## ブラウザーの互換性
 
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p>
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 78061aaf185f3c864174650a7b3c0dbff2a87958 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 23:26:56 +0900
Subject: 2022/02/18 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/animate/index.md          | 187 ++++++++-------------
 files/ja/web/api/element/getattribute/index.md     | 105 ++++++------
 .../ja/web/api/element/getattributenames/index.md  | 102 ++++++-----
 3 files changed, 184 insertions(+), 210 deletions(-)

diff --git a/files/ja/web/api/element/animate/index.md b/files/ja/web/api/element/animate/index.md
index 661f224477..8085c0925b 100644
--- a/files/ja/web/api/element/animate/index.md
+++ b/files/ja/web/api/element/animate/index.md
@@ -1,120 +1,81 @@
 ---
 title: Element.animate()
 slug: Web/API/Element/animate
+tags:
+  - API
+  - アニメーション
+  - Element
+  - メソッド
+  - リファレンス
+  - ウェブアニメーション
+browser-compat: api.Element.animate
 translation_of: Web/API/Element/animate
 ---
-<div>{{APIRef('Web Animations')}} {{SeeCompatTable}}</div>
-
-<p>{{domxref("Element")}} インターフェースの <strong><code>animate()</code></strong> メソッドは、新たに {{domxref("Animation")}} の作成、対象要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。戻り値として {{domxref("Animation")}} オブジェクトのインスタンスを返します。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox"><var>element</var>.animate(<var>keyframes</var>, <var>options</var>);
-</pre>
-
-<h3 id="引数">引数</h3>
-
-<dl>
- <dt><code>keyframes</code></dt>
-</dl>
-
-<ol>
- <li>列挙可能な値の配列をプロパティに持つ keyframes オブジェクト</li>
- <li>keyframes オブジェクトから成る配列</li>
-</ol>
-
-<dl>
- <dd>のどちらかを指定します。keyframes 形式の詳細については <a href="/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats">Keyframe Formats</a> で確認できます。</dd>
- <dd>
- <ol>
-  <li>変化させたい CSS プロパティをキーとし、そのプロパティ値を遷移の順番に並べた配列を値としたオブジェクト
-   <pre class="brush: js"><em>element.</em>animate({
-  opacity: [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
-  color: [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
-}, 2000);
-</pre>
-  </li>
-  <li>CSS プロパティとそのプロパティ値からなるオブジェクトを、遷移の順番に並べた配列
-   <pre class="brush: js"><em>element</em>.animate([
-  { // フレーム 1
-    opacity: 0,
-    color: "#fff"
-  },
-  { // フレーム 2
-    opacity: 1,
- ​   color: "#000"
-  }
-], 2000);</pre>
-  </li>
- </ol>
- </dd>
- <dt><code>options</code></dt>
- <dd>アニメーションの再生時間を表す ms 単位の整数値、または  <a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> を含むオブジェクトを渡す必要があります。後者の場合、<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options">animation timing options</a> のプロパティに加え、以下のようなプロパティも追加して <code>animate()</code> に渡すことができます。</dd>
-</dl>
-
-<h4 id="keyframeOptions_に追加できるプロパティ">keyframeOptions に追加できるプロパティ</h4>
-
-<dl>
- <dt><code>id</code></dt>
- <dd>アニメーションを参照する文字列</dd>
-</dl>
-
-<dl>
- <dt><code>composite</code></dt>
- <dd>Determines how values are combined between this animation and other, separate animations that do not specify their own specific composite operation. デフォルト値は <code>replace</code> です。
- <ul>
-  <li><code>add</code> dictates an additive effect, where each successive iteration builds on the last. 例として <code>transform</code> <code>を挙げると</code>、<code>translateX(-200px)</code> は自身よりも前に指定されていた <code>rotate(20deg)</code> の値を上書きすることはありませんが、合成結果は <code>translateX(-200px) rotate(20deg)</code> になります。</li>
-  <li><code>accumulate</code> を指定した場合、<code>add</code> に似ていますがよりスマートな結果が得られ、<code>blur(2)</code> と <code>blur(5)</code> の合成結果は <code>blur(7)</code> になります（<code>blur(2) blur(5)</code> ではありません）。</li>
-  <li><code>replace</code> を指定した場合、前回の値は新しい値で上書きされます。</li>
- </ul>
- </dd>
- <dt><code>iterationComposite</code></dt>
- <dd>Defines the way animation values build from iteration to iteration. <code>accumulate</code> または <code>replace</code> を指定できます（上記参照）。デフォルト値は <code>replace</code> です。</dd>
-</dl>
-
-<h3 id="戻り値">戻り値</h3>
-
-<p>{{domxref("Animation")}} を返します。</p>
-
-<h2 id="使用例">使用例</h2>
-
-<p><a href="https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010">Down the Rabbit Hole (with the Web Animation API)</a> のデモでは、上に向かって永遠に流れ続けるアニメーションが <code>#tunnel</code> 要素に施されています。ここでは、アニメーションを素早く作成して再生できる <code>animate()</code> メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。</p>
-
-<pre class="brush: js">document.getElementById("tunnel").animate([
-  // keyframes
-  { transform: 'translate3D(0, 0, 0)' },
-  { transform: 'translate3D(0, -300px, 0)' }
+{{APIRef('Web Animations')}}
+
+{{domxref("Element")}} インターフェイスの **`animate()`** メソッドは、新しい {{domxref("Animation")}} の生成、この要素への適用、そしてアニメーションの再生を行うショートカットメソッドです。生成した {{domxref("Animation")}} オブジェクトのインスタンスを返します。
+
+> **Note:** 要素には複数のアニメーションを適用することができます。 {{domxref("Element.getAnimations()")}} を呼び出すと、要素に作用するアニメーションのリストを取得することができます。
+
+## 構文
+
+```js
+animate(keyframes, options)
+```
+
+### 引数
+
+- `keyframes`
+  - : キーフレームオブジェクトの配列、**または**プロパティが反復処理可能な値の配列である単一のキーフレームオブジェクトのどちらかです。詳しくは [Keyframe の書式](/ja/docs/Web/API/Web_Animations_API/Keyframe_Formats)を参照してください。
+- `options`
+
+  - : **アニメーションの再生時間を表す整数値**（ミリ秒単位）、**または** [`KeyframeEffect()` のオプションの引数](/ja/docs/Web/API/KeyframeEffect)や次のオプションで記述された 1 つ以上のタイミングプロパティを含むオブジェクトのどちらかです。
+
+    - `id {{optional_inline}}`
+      - : `animate()` の固有のプロパティです。このアニメーションを参照する [`DOMString`](/ja/docs/Web/API/DOMString) です。
+
+### 返値
+
+{{domxref("Animation")}} を返します。
+
+## 例
+
+[Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010) のデモでは、上に向かって永遠に流れ続けるアニメーションが `#tunnel` 要素に施されています。ここでは、アニメーションを素早く作成して再生できる `animate()` メソッドが用いられています。keyframes として渡されているオブジェクト配列と、timing options として渡されているオブジェクトに注目してください。
+
+```js
+document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
 ], {
-  // timing options
-  duration: 1000,
-  iterations: Infinity
+  // timing options
+  duration: 1000,
+  iterations: Infinity
 });
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">策定状況</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}</td>
-   <td>{{Spec2('Web Animations')}}</td>
-   <td>Editor's draft.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
-
-<p>{{Compat("api.Element.animate")}}</p>
-
-<h2 id="参考情報">参考情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
- <li>{{domxref("Animation")}}</li>
-</ul>
+```
+
+### 暗黙の開始/終了キーフレーム
+
+新しいバージョンのブラウザーでは、アニメーションの開始または終了状態のみ（つまり、単一のキーフレーム）で設定することができ、可能であればブラウザーがアニメーションのもう一方を推測します。例えば、[この簡単なアニメーション](https://mdn.github.io/dom-examples/web-animations-api/implicit-keyframes.html) を考えてみましょう。 Keyframe オブジェクトは次のようなものです。
+
+```js
+let rotate360 = [
+  { transform: 'rotate(360deg)' }
+];
+```
+
+アニメーションの終了状態を指定しただけで、開始状態は暗黙になっています。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
+- {{domxref("Element.getAnimations()")}}
+- {{domxref("Animation")}}
diff --git a/files/ja/web/api/element/getattribute/index.md b/files/ja/web/api/element/getattribute/index.md
index 4ee84122ba..af0ef01437 100644
--- a/files/ja/web/api/element/getattribute/index.md
+++ b/files/ja/web/api/element/getattribute/index.md
@@ -5,77 +5,74 @@ tags:
   - API
   - DOM
   - Element
-  - Method
-  - Reference
   - メソッド
+  - リファレンス
+browser-compat: api.Element.getAttribute
 translation_of: Web/API/Element/getAttribute
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary"><strong><code>getAttribute()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、要素の指定された属性の値を返します。</span>指定された属性が存在しない場合、値は <code>null</code> か <code>""</code> (空文字列) のどちらかになります。詳しくは<a href="#Non-existing_attributes">属性が存在しない場合</a>を参照してください。</p>
+**`getAttribute()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素の指定された属性の値を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+指定された属性が存在しない場合、値は `null` か `""` （空文字列）のどちらかになります。詳しくは[属性が存在しない場合](#属性が存在しない場合)を参照してください。
 
-<pre class="syntaxbox">let <var>attribute</var> = <var>element</var>.getAttribute(<var>attributeName</var>);
-</pre>
+## 構文
 
-<p>ここで、</p>
+```js
+let attribute = element.getAttribute(attributeName);
+```
 
-<ul>
- <li><code><var>attribute</var></code> は <code><var>attributeName</var></code> の値を持つ文字列です。</li>
- <li><code><var>attributeName</var></code> は値を取得したい属性の名前です。</li>
-</ul>
+ここで、
 
-<h2 id="Examples" name="Examples">例</h2>
+- `attribute` は `attributeName` の値を持つ文字列です。
+- `attributeName` は値を取得したい属性の名前です。
 
-<pre class="brush:js">const div1 = document.getElementById('div1');
-const align = div1.getAttribute('align');
+## 例
 
-alert(align); // id="div1" の要素の align の値を表示します。</pre>
+```js
+<!-- HTML 文書内の div の例 -->
+<div id="div1">Hi Champ!</div>
 
-<h2 id="Description" name="Description">解説</h2>
+// コンソールへの出力
+const div1 = document.getElementById('div1');
+//=> <div id="div1">Hi Champ!</div>
 
-<h3 id="Lower_casing" name="Lower_casing">小文字化</h3>
+const exampleAttr= div1.getAttribute('id');
+//=> "div1"
 
-<p>HTML 文書である DOM の HTML 要素に対して呼び出すと、 <code>getAttribute()</code> は処理前に引数を小文字化します。</p>
+const align = div1.getAttribute('align')
+//=> null
+```
 
-<h3 id="Non-existing_attributes" name="Non-existing_attributes">属性が存在しない場合</h3>
+## 解説
 
-<p>基本的にはすべてのウェブブラウザー (限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など) は、指定された要素に指定された属性が存在しない場合は <code>null</code> を返します。これは<a href="http://dom.spec.whatwg.org/#dom-element-getattribute">現在の DOM 仕様書の草稿</a>で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には<em>空文字列</em>となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 <code>getAttribute()</code> の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから <code>getAttribute()</code> を呼び出すべきでしょう。</p>
+### 小文字化
 
-<h3 id="Retrieving_nonce_values" name="Retrieving_nonce_values">ノンス値の受け取り</h3>
+HTML 文書とされている DOM の HTML 要素に対して呼び出すと、 `getAttribute()` は処理前に引数を小文字化します。
 
-<p>セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た <a href="/ja/docs/Web/HTTP/CSP">CSP</a> のノンスと、 <code>.getAttribute("nonce")</code> の呼び出しは隠蔽されます。</p>
+### 属性が存在しない場合
 
-<pre class="brush: js example-bad">let nonce =  script.getAttribute('nonce');
+基本的にはすべてのウェブブラウザー（限定的なリストですが Firefox, Internet Explorer, Opera の最新バージョン, Safari, Konqueror, iCab など）は、指定された要素に指定された属性が存在しない場合は `null` を返します。これは[現在の DOM 仕様書の草稿](https://dom.spec.whatwg.org/#dom-element-getattribute)で指定されています。一方、古い DOM 3 Core 仕様書では、このような場合の正しい返値は実際には空文字列となっています。そしていくつかの DOM の実装はこの動作を実装しています。実際、 `getAttribute()` の XUL (Gecko) での実装では、 DOM 3 Core 仕様書に従い空文字列を返します。結果的に、指定された要素に指定された属性が存在しない可能性があるのであれば、 {{domxref("element.hasAttribute()")}} を使用して属性の存在をチェックしてから `getAttribute()` を呼び出すべきでしょう。
+
+### ノンス値の受け取り
+
+セキュリティ上の理由で、スクリプト以外、例えば CSS セレクターから来た [CSP](/ja/docs/Web/HTTP/CSP) のノンスと、 `.getAttribute("nonce")` の呼び出しは隠蔽されます。
+
+```js example-bad
+let nonce =  script.getAttribute('nonce');
 // 空文字列が返される
-</pre>
-
-<p>コンテンツ属性のノンスをるには、代わりに <code><a href="/ja/docs/Web/API/HTMLOrForeignElement/nonce">nonce</a></code> プロパティを使用してください。</p>
-
-<pre class="brush: js">let nonce =  script.nonce;</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-element-attachshadow', 'attachShadow()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.Element.getAttribute")}}</p>
-</div>
+```
+
+コンテンツ属性のノンスをるには、代わりに {{domxref("HTMLElement/nonce", "nonce")}} プロパティを使用してください。
+
+```js
+let nonce =  script.nonce;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/element/getattributenames/index.md b/files/ja/web/api/element/getattributenames/index.md
index f353b84b74..7aa98aca5b 100644
--- a/files/ja/web/api/element/getattributenames/index.md
+++ b/files/ja/web/api/element/getattributenames/index.md
@@ -3,68 +3,84 @@ title: Element.getAttributeNames()
 slug: Web/API/Element/getAttributeNames
 tags:
   - API
+  - 属性
   - DOM
   - Element
-  - getAttributeNames
   - メソッド
-  - 属性
+  - getAttributeNames
+browser-compat: api.Element.getAttributeNames
 translation_of: Web/API/Element/getAttributeNames
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
+
+**`getAttributeNames()`** は {{domxref("Element")}} インターフェースのメソッドで、この要素の属性名を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。
+
+`getAttributeNames()` を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。
+
+**`getAttributeNames()`** から返される名前は*修飾*属性名です。すなわち、名前空間接頭辞がついた属性であり、名前空間接頭辞（実際の名前空間では*ない*）にコロンが続き、属性名が続きます（例えば  **`xlink:href`**）。名前空間接頭辞のない属性は、そのままの名前になります（例えば **`href`**）。
+
+## 構文
+
+```js
+let attributeNames = element.getAttributeNames();
+```
 
-<p>{{domxref("Element")}} インターフェースの <strong><code>getAttributeNames()</code></strong> メソッドは要素の属性の名前を文字列の {{jsxref("Array")}} で返します。要素に属性がない場合は、空の配列を返します。</p>
+## 例
 
-<p><code>getAttributeNames()</code> を {{domxref("Element.getAttribute","getAttribute()")}} と共に使用すると、 {{domxref("Element.attributes")}} にアクセスするよりメモリ効率やパフォーマンスが良くなります。</p>
+以下の例は、次の方法を示しています。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+- 名前空間接頭辞のある属性については、 `getAttributeNames()` は属性名と一緒に名前空間接頭辞を返します。
+- 名前空間接頭辞のない属性については、 `getAttributeNames()` は属性名のみをそのまま返します。
 
-<pre class="syntaxbox notranslate"><em>let attributeNames</em> = element.getAttributeNames();
-</pre>
+以下のことを理解することが重要です。
 
-<h2 id="Example" name="Example">例</h2>
+1. DOM には名前空間に所属していても、名前空間接頭辞がない場合があります。
+2. 名前空間に所属しているが、名前空間接頭辞のない DOM 内の属性については、 `getAttributeNames()` は属性名だけを返し、その属性が名前空間に所属していることを示しません。
 
-<pre class="brush:js notranslate">// 要素の属性に対して反復処理する
-for(let name of element.getAttributeNames()) {
-	let value = element.getAttribute(name);
-	console.log(name, value);
+以下の例では、このような「名前空間に所属しているが、名前空間接頭辞がない」場合を示しています。
+
+```js
+const element = document.createElement('a')
+
+// "href" 属性を名前空間なし、名前空間接頭辞なしで設定
+element.setAttribute('href', 'https://example.com')
+// "href" 属性を名前空間あり、 "xlink" 名前空間接頭辞で設定
+element.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://example.com')
+// "show" 属性を名前空間あり、名前空間接頭辞なしで設定
+element.setAttributeNS('http://www.w3.org/1999/xlink', 'show', 'new')
+
+// 要素の属性を反復処理する
+for (let name of element.getAttributeNames()) {
+  let value = element.getAttribute(name);
+  console.log(name, value);
 }
-</pre>
 
-<h2 id="Polyfill" name="Polyfill">代替モジュール</h2>
+// 出力結果:
+// href https://example.com
+// xlink:href https://example.com
+// show new
+```
 
-<pre class="brush:js notranslate">if (Element.prototype.getAttributeNames == undefined) {
+## ポリフィル
+
+```js
+if (Element.prototype.getAttributeNames == undefined) {
   Element.prototype.getAttributeNames = function () {
     var attributes = this.attributes;
     var length = attributes.length;
     var result = new Array(length);
-    for (var i = 0; i &lt; length; i++) {
+    for (var i = 0; i < length; i++) {
       result[i] = attributes[i].name;
     }
     return result;
   };
-}</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-element-getattributenames", "Element.getAttributeNames")}}</td>
-   <td>{{Spec2("DOM WHATWG")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<div>
-<p>{{Compat("api.Element.getAttributeNames")}}</p>
-</div>
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 4e1c75e2a6cf6a03264ee61d9f652f7b3b491151 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 3 Mar 2022 01:02:48 +0900
Subject: 2021/11/19 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/getattributenode/index.md | 60 +++++++++-------------
 1 file changed, 24 insertions(+), 36 deletions(-)

diff --git a/files/ja/web/api/element/getattributenode/index.md b/files/ja/web/api/element/getattributenode/index.md
index 4d28b69f39..c8e31861fd 100644
--- a/files/ja/web/api/element/getattributenode/index.md
+++ b/files/ja/web/api/element/getattributenode/index.md
@@ -5,59 +5,47 @@ tags:
   - API
   - DOM
   - Element
-  - Method
-  - Reference
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getAttributeNode
 translation_of: Web/API/Element/getAttributeNode
 ---
-<div>{{ APIRef("DOM") }}</div>
+{{ APIRef("DOM") }}
 
-<p>指定された要素の指定された属性を、 <code>Attr</code> ノードとして返します。</p>
+この要素の指定された属性を、 `Attr` ノードとして返します。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="eval"><em>var attrNode</em> = <em>element</em>.getAttributeNode(<em>attrName</em>);
-</pre>
+```js
+var attrNode = element.getAttributeNode(attrName);
+```
 
-<ul>
- <li><code>attrNode</code> は指定の属性に対する <code>Attr</code> ノードです。</li>
- <li><code>attrName</code> は属性の名前を表す文字列です。</li>
-</ul>
+- `attrNode` は指定の属性に対する `Attr` ノードです。
+- `attrName` は属性の名前を表す文字列です。
 
-<h2 id="Example">Example</h2>
+## 例
 
-<pre class="brush: js">// html: &lt;div id="top" /&gt;
+```js
+// html: <div id="top" />
 let t = document.getElementById("top");
 let idAttr = t.getAttributeNode("id");
 alert(idAttr.value == "top")
-</pre>
+```
 
-<h2 id="Notes">注</h2>
+## メモ
 
-<p>HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、<code>getAttributeNode</code> は処理前に引数を小文字にします。</p>
+HTML 文書としてフラグが立てられた DOM 内の HTML 要素に対して呼び出された場合、`getAttributeNode` は処理前に引数を小文字にします。
 
-<p><code>Attr</code> ノードは <code>Node</code> を継承していますが、文書ツリーの一部と考えることはできません。一般の <code>Node</code> 属性、例えば <a href="/ja/docs/Web/API/Node/parentNode">parentNode</a>、 <a href="/ja/docs/Web/API/Node/previousSibling">previousSibling</a>、<a href="/ja/docs/Web/API/Node/nextSibling">nextSibling</a> などは <code>Attr</code> ノードでは <code>null</code> になります。しかしながら、 <code>ownerElement</code> プロパティではこの属性が属している要素を取得することができます。</p>
+`Attr` ノードは `Node` を継承していますが、文書ツリーの一部と考えることはできません。一般の `Node` 属性、例えば [parentNode](/ja/docs/Web/API/Node/parentNode)、 [previousSibling](/ja/docs/Web/API/Node/previousSibling)、[nextSibling](/ja/docs/Web/API/Node/nextSibling) などは `Attr` ノードでは `null` になります。しかしながら、 `ownerElement` プロパティではこの属性が属している要素を取得することができます。
 
-<p>要素の属性の値を取得するためには、通常 <code>getAttributeNode</code> の代わりに <a href="/ja/docs/Web/API/Element/getAttribute">getAttribute</a> を使用してください。</p>
+要素の属性の値を取得するためには、通常 `getAttributeNode` の代わりに [getAttribute](/ja/docs/Web/API/Element/getAttribute) が使用されます。
 
-<p>{{ DOMAttributeMethods() }}</p>
+{{ DOMAttributeMethods() }}
 
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#dom-element-getattributenode','getAttributeNode()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getAttributeNode")}}</p>
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 61dab588f2aa0a7aca1e6f29819471f425462449 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 3 Mar 2022 01:57:41 +0900
Subject: 2022/02/07 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/element/getboundingclientrect/index.md | 181 ++++++++++++++-------
 1 file changed, 124 insertions(+), 57 deletions(-)

diff --git a/files/ja/web/api/element/getboundingclientrect/index.md b/files/ja/web/api/element/getboundingclientrect/index.md
index 69c2b2500a..ce2316632b 100644
--- a/files/ja/web/api/element/getboundingclientrect/index.md
+++ b/files/ja/web/api/element/getboundingclientrect/index.md
@@ -3,7 +3,7 @@ title: Element.getBoundingClientRect()
 slug: Web/API/Element/getBoundingClientRect
 tags:
   - API
-  - Boundary
+  - 境界
   - Bounding
   - Bounds
   - CSSOM View
@@ -12,101 +12,168 @@ tags:
   - DOM
   - Element
   - Enclosing
-  - Method
+  - メソッド
   - Minimum
-  - Rectangle
-  - Reference
+  - 長方形
+  - リファレンス
   - Smallest
   - clientHeight
   - getBoundingClientRect
   - getClientRects
   - offsetHeight
   - scrollHeight
-  - メソッド
+browser-compat: api.Element.getBoundingClientRect
 translation_of: Web/API/Element/getBoundingClientRect
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
+
+**`Element.getBoundingClientRect()`** メソッドは、要素の寸法と、その[ビューポート](/ja/docs/Glossary/Viewport)に対する相対位置に関する情報を返します。
 
-<p><code><strong>Element.getBoundingClientRect()</strong></code> メソッドは、要素の寸法と、そのビューポートに対する位置を返します。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+```js
+domRect = element.getBoundingClientRect();
+```
 
-<pre class="syntaxbox notranslate"><em>domRect</em> = <em>element</em>.getBoundingClientRect();</pre>
+### 値
 
-<h3 id="Value" name="Value">値</h3>
+返値は {{domxref("DOMRect")}} オブジェクトで、（パディングと境界の幅を含む）要素全体が収まる最小の長方形です。`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, `height` の各プロパティは、長方形の全体の位置と大きさをピクセル数で記述します。 `width` と `height` 以外のプロパティは、ビューポートの左上を基準としています。
 
-<p>返値は、要素に対しての {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の集合である {{domxref("DOMRect")}} オブジェクトです。つまり、要素に関連付けられている CSS の境界ボックスのことです。結果は境界ボックス全体を表す読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code>, <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code> の各プロパティを持つ、要素全体を含む最小の矩形です。 <code>width</code> と <code>height</code> 以外のプロパティは、<strong>"<em>ビューポート</em></strong><em>の左上を基準</em>"としています。</p>
+![](element-box-diagram.png)
 
-<p style="display: block;"><img alt="DOMRect 値の説明" src="https://mdn.mozillademos.org/files/15087/rect.png" style="float: right; height: 300px; width: 300px;" title="Explanation of DOMRect values"></p>
+このメソッドが返す {{domxref("DOMRect")}} オブジェクトの `width` と `height` プロパティは、内容物の幅や高さだけでなく、 `padding` と `border-width` も含まれます。標準的なボックスモデルでは、これは要素の `width` または `height` プロパティ + `padding` + `border-width` と同じになります。しかし、もし [`box-sizing: border-box`](/ja/docs/Web/CSS/box-sizing) が要素に設定されていれば、これは `width` または `height` と等しくなります。
 
-<p>空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 <code>width</code> と <code>height</code> が 0 で、 <code>top</code> と <code>left</code> は、要素に対する (コンテンツ順での) 最初の CSS ボックスの左上である矩形を返します。</p>
+返される値は、その要素に対して {{domxref("Element.getClientRects", "getClientRects()")}} が返す矩形の和、つまり、その要素に関連する CSS の border-box と見なすことができます。
 
-<p>境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に (その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界線のエッジ (<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>) が変更されることを意味しています。</p>
+空のボーダーボックスは完全に無視されます。もし要素のボーダーボックスの全てが空である場合は、 `width` と `height` が 0 で、 `top` と `left` は、要素に対する（コンテンツ順での）最初の CSS ボックスの左上である矩形を返します。
 
-<p>もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する <code>top</code> と <code>left</code> プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。</p>
+境界矩形を計算するときには、ビューポート領域（または他のスクロール可能な要素）のスクロール量が考慮されます。これは、スクロール位置が変更される度に（その値はビューポートの相対値であり、絶対値ではないため) 矩形の境界の辺 (`top`, `right`, `bottom`, `left`) が変更されることを意味しています。
 
-<h3 id="Cross-browser_fallback" name="Cross-browser_fallback">クロスブラウザーの代替</h3>
+もし文書の左上隅を基準とする境界矩形が必要な場合は、現在のスクロール位置から独立した境界矩形を取得する `top` と `left` プロパティに、現在のスクロール位置を加えるだけです（これらは {{domxref("window.scrollX")}} と {{domxref("window.scrollY")}} で取得できます）。
 
-<p>高いクロスブラウザーの互換性を必要とするスクリプトでは、 <code>window.scrollX</code> と <code>window.scrollY</code> の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。</p>
+### ブラウザー間で互換性のある代替手段
 
-<pre class="brush: js notranslate">// For scrollX
+高いブラウザー間の互換性を必要とするスクリプトでは、 `window.scrollX` と `window.scrollY` の代わりに {{domxref("window.pageXOffset")}} と {{domxref("window.pageYOffset")}} を使うことができます。これらのプロパティへのアクセスを使わない、次のようなスクリプトもあります。
+
+```js
+// For scrollX
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
 // For scrollY
 (((t = document.documentElement) || (t = document.body.parentNode))
-  &amp;&amp; typeof t.scrollTop == 'number' ? t : document.body).scrollTop
-</pre>
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+```
+
+## 例
+
+### 基本
+
+この単純な例では、単純な `<div>` 要素のクライアント矩形を表す `DOMRect` オブジェクトを取得し、その下にプロパティを出力しています。
+
+```html
+<div></div>
+```
+
+```css
+div {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+```
+
+```js
+let elem = document.querySelector('div');
+let rect = elem.getBoundingClientRect();
+for (var key in rect) {
+  if(typeof rect[key] !== 'function') {
+    let para = document.createElement('p');
+    para.textContent  = `${ key } : ${ rect[key] }`;
+    document.body.appendChild(para);
+  }
+}
+```
+
+{{EmbedLiveSample('Basic', '100%', 640)}}
+
+なお、 `width`/`height` は `width`/`height` + `padding` と等しくなります。
+
+また、`x`/`left`, `y`/`top`, `right`, `bottom` の値は、それぞれのケースで、ビューポートの関連する辺から要素のその側までの絶対的な距離に等しいことに注意してください。
+
+#### スクロール
+
+この例では、文書がスクロールされたときに、クライアント矩形の境界がどのように変化するかを示しています。
+
+```html
+<div id="example"></div>
+<div id="controls"></div>
+```
+
+```css
+div#example {
+  width: 400px;
+  height: 200px;
+  padding: 20px;
+  margin: 50px auto;
+  background: purple;
+}
+
+body { padding-bottom: 1000px; }
+p { margin: 0; }
+```
+
+```js
+function update() {
+  const container = document.getElementById("controls");
+  const elem = document.getElementById("example");
+  const rect = elem.getBoundingClientRect();
+
+  container.innerHTML = '';
+  for (let key in rect) {
+    if(typeof rect[key] !== 'function') {
+      let para = document.createElement('p');
+      para.textContent  = `${ key } : ${ rect[key] }`;
+      container.appendChild(para);
+    }
+  }
+}
 
-<h2 id="Example" name="Example">例</h2>
+document.addEventListener('scroll', update);
+update();
+```
 
-<pre class="brush: js notranslate">// rect は left, top, right, bottom, x, y, width, height の 8 つのプロパティを持つ DOMRect オブジェクト
-var rect = obj.getBoundingClientRect();
-</pre>
+{{EmbedLiveSample('Scrolling', '100%', 640)}}
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">メモ</h3>
+### メモ
 
-<p>モダンブラウザーでは返された <code>DOMRect</code> オブジェクトを変更することが可能ですが、これは <code>DOMRectReadOnly</code> を返す古いバージョンには該当しません。IE と Edge では、返された <a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx"> <code>ClientRect</code></a> オブジェクトに対し、見過ごされたプロパティを追加することができず、<code>x</code> と <code>y</code> を補填することができません。</p>
+最近のブラウザーでは返された `DOMRect` オブジェクトを変更することが可能ですが、これは `DOMRectReadOnly` を返す古いバージョンには該当しません。IE と Edge では、返された [`ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>) オブジェクトに対し、見過ごされたプロパティを追加することができず、`x` と `y` を補填することができません。
 
-<p>互換性問題 (下記参照) のため、 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> のみに頼ることが最も安全です。</p>
+互換性問題 (下記参照) のため、 `left`, `top`, `right`, `bottom` のみに頼ることが最も安全です。
 
-<p>返された <code>DOMRect</code> オブジェクトのプロパティは、自身のプロパティではありません。<code>in</code> 演算子や <code>for...in</code> では返されたプロパティを見つけますが、他の <code>Object.keys()</code> のような API では失敗します。さらに予期しないことに、 <code>Object.assign()</code> のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。</p>
+返された `DOMRect` オブジェクトのプロパティは、自身のプロパティではありません。`in` 演算子や `for...in` では返されたプロパティを見つけますが、他の `Object.keys()` のような API では失敗します。さらに予期しないことに、 `Object.assign()` のような ES2015 やより新しい機能では、返されるプロパティのコピーに失敗します。
 
-<pre class="brush: js notranslate">rect = elt.getBoundingClientRect()
+```js
+rect = elt.getBoundingClientRect()
 // emptyObj の結果は {}
 emptyObj = Object.assign({}, rect)
 emptyObj = { ...rect }
 {width, ...emptyObj} = rect
-</pre>
+```
 
-<p><code>DOMRect</code> の <code>top</code>, <code>left</code>, <code>right</code>, <code>bottom</code> の各プロパティは他のプロパティ値から計算されます。</p>
+`DOMRect` の `top`, `left`, `right`, `bottom` の各プロパティは他のプロパティ値から計算されます。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getBoundingClientRect")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{domxref("Element.getClientRects", "getClientRects()")}}</li>
- <li><a href="https://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx">MSDN: <code>getBoundingClientRect</code></a></li>
- <li><a href="https://msdn.microsoft.com/en-us/library/hh826029(VS.85).aspx">MSDN: <code>ClientRect</code></a>, an earlier version of <code>DOMRect</code></li>
-</ul>
+- {{domxref("Element.getClientRects", "getClientRects()")}}
+- [MSDN: `getBoundingClientRect`](<https://msdn.microsoft.com/library/ms536433(VS.85).aspx>)
+- [MSDN: `ClientRect`](<https://msdn.microsoft.com/library/hh826029(VS.85).aspx>)、初期バージョンの `DOMRect`
-- 
cgit v1.2.3-54-g00ecf


From 176d94d14c9812cf289ea3cffd940e9951414e7d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Thu, 3 Mar 2022 02:07:40 +0900
Subject: 2022/02/01 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/getclientrects/index.md | 348 +++++++++++------------
 1 file changed, 171 insertions(+), 177 deletions(-)

diff --git a/files/ja/web/api/element/getclientrects/index.md b/files/ja/web/api/element/getclientrects/index.md
index f8276ed1cb..2a1c0f613a 100644
--- a/files/ja/web/api/element/getclientrects/index.md
+++ b/files/ja/web/api/element/getclientrects/index.md
@@ -5,146 +5,154 @@ tags:
   - API
   - CSSOM View
   - Element
-  - Method
-  - Reference
+  - メソッド
+  - リファレンス
   - clientHeight
   - getBoundingClientRect
   - getClientRects
   - offsetHeight
   - scrollHeight
+browser-compat: api.Element.getClientRects
 translation_of: Web/API/Element/getClientRects
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><strong><code>getClientRects()</code></strong> は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの <a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 境界ボックス</a>の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。</p>
+**`getClientRects()`** は {{domxref("Element")}} インターフェイスのメソッドで、クライアントにあるそれぞれの [CSS 境界ボックス](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)の境界線を示す {{DOMxRef("DOMRect")}} オブジェクトのコレクションを返します。
 
-<p>多くの要素はそれぞれ1つの境界ボックスしか持ちませんが、複数行の<a href="/ja/docs/Web/HTML/Inline_elements">インライン要素</a> (例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合) には行ごとに囲む境界ボックスがあります。</p>
+多くの要素はそれぞれ 1 つの境界ボックスしか持ちませんが、複数行の[インライン要素](/ja/docs/Web/HTML/Inline_elements) （例えば複数行にまたがる {{HTMLElement("span")}} 要素、既定の場合）には行ごとに囲む境界ボックスがあります。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox notranslate">let <var>rectCollection</var> = <var>object</var>.getClientRects();</pre>
+```js
+let rectCollection = object.getClientRects();
+```
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+### 返値
 
-<p>返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の <code>&lt;svg&gt;</code> 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の <code>&lt;svg&gt;</code> が確立したビューポートになります (明確にするために、矩形は外部の <code>&lt;svg&gt;</code> の <code>viewBox</code> 変形によっても変換されます)。</p>
+返される値は {{DOMxRef("DOMRect")}} オブジェクトのコレクションで、要素に関連付けられた CSS の境界ボックスごとに 1 つずつ用意されます。それぞれの {{DOMxRef("DOMRect")}} オブジェクトには読み取り専用の `left`, `top`, `right`, `bottom` の各プロパティがあり、ビューポートの左上からの境界ボックスの座標をピクセル数で表します。キャプションを持つ表の場合、キャプションがテーブルの境界ボックスの外側にあっても含まれます。外部の `<svg>` 以外の SVG 要素に対して呼び出された場合、結果として得られる矩形の相対的な「ビューポート」は、その要素の外部の `<svg>` が確立したビューポートになります（明確にするために、矩形は外部の `<svg>` の `viewBox` 変形によっても変換されます）。
 
-<p>本来、Microsoft はこのメソッドがテキストの各行に対して <code>TextRectangle</code> オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この二つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。</p>
+本来、Microsoft はこのメソッドがテキストの各行に対して `TextRectangle` オブジェクトを返すようにしていました。しかし、 CSSOM の作業草案では、各境界ボックスに対して {{DOMxRef("DOMRect")}} を返すように指定しています。インライン要素では、この 2 つの定義は同じです。しかし、ブロック要素の場合、Mozilla は単一の矩形のみを返します。
 
-<p>{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}</p>
+{{Fx_MinVersion_Note(3.5, "Firefox 3.5 で <code>width</code> と <code>height</code> の各プロパティが <code>TextRectangle</code> オブジェクトに追加されました。")}}
 
-<p>矩形を計算する際には、ビューポート領域 (またはその他のスクロール可能な要素) のスクロール量が考慮されます。</p>
+矩形を計算する際には、ビューポート領域（またはその他のスクロール可能な要素）のスクロール量が考慮されます。
 
-<p>返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。</p>
-
-<p>HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 <code>display:none</code> の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。</p>
-
-<p>CSS ボックスで境界ボックスが空であっても矩形が返されます。 <code>left</code>, <code>top</code>, <code>right</code>, <code>bottom</code> の各座標はなお意味を持っています。</p>
-
-
-
-<p>小数のピクセルオフセットが可能です。</p>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<p>これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 <code>withClientRectsOverlay</code> クラスを介してマークアップに接続されていることに注意してください。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>例 1: このHTMLは、 <code>&lt;span&gt;</code> 要素を含む3つの段落を生成し、それぞれを <code>&lt;div&gt;</code> ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの <code>&lt;span&gt;</code> 要素には、クライアントの矩形が描画されます。</p>
-
-<pre class="brush: html notranslate">&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>例 2: このHTMLは3つの順序付きリストを生成します。2 番目のブロックの <code>&lt;ol&gt;</code> と 3 番目のブロックの各 <code>&lt;li&gt;</code> 要素に対してクライアントの矩形が描かれています。</p>
-
-<pre class="brush: html notranslate">&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>例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの <code>&lt;table&gt;</code> で描画されます。</p>
-
-<pre class="brush: html notranslate">&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>CSS は、最初の例では各 <code>&lt;div&gt;</code> ブロック内の段落と <code>&lt;span&gt;</code> の周りに、2番目の例では <code>&lt;ol&gt;</code> と <code>&lt;li&gt;</code> の周りに、3番目の例では <code>&lt;table&gt;</code>, <code>&lt;th&gt;</code>, <code>&lt;td&gt;</code> の各要素の周りに境界線を描画します。</p>
-
-<pre class="brush: css notranslate">strong {
+返される矩形には、オーバーフローする可能性のある子要素の境界は含まれていません。
+
+HTML の {{HtmlElement("area")}} 要素、それ自体が何もレンダリングしない SVG 要素、 `display:none` の要素、そして一般的に直接レンダリングされない要素については、空のリストが返されます。
+
+CSS ボックスで境界ボックスが空であっても矩形が返されます。 `left`, `top`, `right`, `bottom` の各座標はなお意味を持っています。
+
+小数のピクセルオフセットが可能です。
+
+## 例
+
+これらの例では、様々な色でクライアント矩形を描画しています。クライアント矩形を描画する JavaScript 関数は、 `withClientRectsOverlay` クラスを介してマークアップに接続されていることに注意してください。
+
+### HTML
+
+例 1: このHTMLは、 `<span>` 要素を含む3つの段落を生成し、それぞれを `<div>` ブロックに埋め込んでいます。2 番目のブロックの段落と 3 番目のブロックの `<span>` 要素には、クライアントの矩形が描画されます。
+
+```html
+<h3>A paragraph with a span inside</h3>
+<p>Both the span and the paragraph have a border set. The
+  client rects are in red. Note that the p has only one border
+  box, while the span has multiple border boxes.</p>
+
+<div>
+  <strong>Original</strong>
+  <p>
+    <span>Paragraph that spans multiple lines</span>
+  </p>
+</div>
+
+<div>
+  <strong>p's rect</strong>
+  <p class="withClientRectsOverlay">
+    <span>Paragraph that spans multiple lines</span>
+  </p>
+</div>
+
+<div>
+  <strong>span's rect</strong>
+  <p>
+    <span class="withClientRectsOverlay">Paragraph that spans multiple lines</span>
+  </p>
+</div>
+```
+
+例 2: この HTML は 3 つの順序付きリストを生成します。2 番目のブロックの `<ol>` と 3 番目のブロックの各 `<li>` 要素に対してクライアントの矩形が描かれています。
+
+```html
+<h3>A list</h3>
+<p>Note that the border box doesn't include the number, so
+  neither do the client rects.</p>
+
+<div>
+  <strong>Original</strong>
+  <ol>
+   - Item 1</li>
+   - Item 2</li>
+  </ol>
+</div>
+
+<div>
+  <strong>ol's rect</strong>
+  <ol class="withClientRectsOverlay">
+   - Item 1</li>
+   - Item 2</li>
+  </ol>
+</div>
+
+<div>
+  <strong>each li's rect</strong>
+  <ol>
+    <li class="withClientRectsOverlay">Item 1</li>
+    <li class="withClientRectsOverlay">Item 2</li>
+  </ol>
+</div>
+```
+
+例 3: この HTML はキャプション付きの 2 つの表を生成します。クライアント矩形は 2 番目のブロックの `<table>` で描画されます。
+
+```html
+<h3>A table with a caption</h3>
+<p>Although the table's border box doesn't include the
+  caption, the client rects do include the caption.</p>
+
+<div>
+  <strong>Original</strong>
+  <table>
+    <caption>caption</caption>
+    <thead>
+      <tr><th>thead</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>tbody</td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div>
+  <strong>table's rect</strong>
+  <table class="withClientRectsOverlay">
+    <caption>caption</caption>
+    <thead>
+      <tr><th>thead</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>tbody</td></tr>
+    </tbody>
+  </table>
+</div>
+```
+
+### CSS
+
+CSS は、最初の例では各 `<div>` ブロック内の段落と `<span>` の周りに、2番目の例では `<ol>` と `<li>` の周りに、3番目の例では `<table>`, `<th>`, `<td>` の各要素の周りに境界線を描画します。
+
+```css
+strong {
   text-align: center;
 }
 div {
@@ -156,31 +164,33 @@ div p, ol, table {
 }
 span, li, th, td {
   border: 1px solid green;
-}</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<p>JavaScriptコードは、 CSS のクラス <code>withClientRectsOverlay</code> が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。</p>
-
-<pre class="brush: js notranslate">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);
+}
+```
+
+### JavaScript
+
+JavaScriptコードは、 CSS のクラス `withClientRectsOverlay` が割り当てられているすべてのHTML要素について、クライアント矩形を描画します。
+
+```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);
   }
 }
 
@@ -188,44 +198,28 @@ span, li, th, td {
   /* 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++) {
+  for (var i = 0; i < elt.length; i++) {
     addClientRectsOverlay(elt[i]);
   }
-})();</pre>
+})();
+```
 
-<h3 id="Result" name="Result">結果</h3>
+### 結果
 
-<p>{{EmbedLiveSample('Examples', 680, 650)}}</p>
+{{EmbedLiveSample('Examples', 680, 650)}}
 
-<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("CSSOM View", "#dom-element-getclientrects", "Element.getClientRects()")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h3 id="Notes" name="Notes">補足</h3>
+### メモ
 
-<p><code>getClientRects()</code> は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。</p>
+`getClientRects()` は MS IE の DHTML オブジェクトモデルで導入されたのが最初です。
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getClientRects")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{DOMxRef("Element.getBoundingClientRect()")}}</li>
-</ul>
+- {{DOMxRef("Element.getBoundingClientRect()")}}
-- 
cgit v1.2.3-54-g00ecf


From bf11bf08987ab6d1cb98378146b8f84a158418cb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 4 Mar 2022 01:39:46 +0900
Subject: 2022/01/25 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/computedstylemap/index.md | 94 ++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 files/ja/web/api/element/computedstylemap/index.md

diff --git a/files/ja/web/api/element/computedstylemap/index.md b/files/ja/web/api/element/computedstylemap/index.md
new file mode 100644
index 0000000000..17acec435f
--- /dev/null
+++ b/files/ja/web/api/element/computedstylemap/index.md
@@ -0,0 +1,94 @@
+---
+title: Element.computedStyleMap()
+slug: Web/API/Element/computedStyleMap
+tags:
+  - API
+  - CSS Typed Object Model API
+  - Element
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - computedStyleMap()
+browser-compat: api.Element.computedStyleMap
+translation_of: Web/API/Element/computedStyleMap
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`computedStyleMap()`** は {{domxref("Element")}} インターフェイスのメソッドであり、 {{domxref("StylePropertyMapReadOnly")}} インターフェイスで {{domxref("CSSStyleDeclaration")}} の代替となる CSS 宣言ブロックの読み取り専用の表現を提供します。
+
+## 構文
+
+```js
+var stylePropertyMapReadOnly = element.computedStyleMap()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+{{domxref("StylePropertyMapReadOnly")}} インターフェイスです。
+
+## 例
+
+まず、簡単な HTML から始めましょう。リンクのある段落と、すべての CSS プロパティと値の組を追加する定義リストです。
+
+```html
+<p>
+   <a href="https://example.com">Link</a>
+</p>
+<dl id="regurgitation"></dl>
+```
+
+いくらか CSS を追加します。
+
+```css
+a {
+  --color: red;
+  color: var(--color);
+}
+```
+
+JavaScript を追加してリンクを取得し、 `computedStyleMap()` を使用してすべての CSS プロパティ値の定義リストを返します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('a');
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#regurgitation');
+
+// すべての計算済みスタイルを computedStyleMap() で受け取る
+const allComputedStyles = myElement.computedStyleMap();
+
+// すべてのプロパティと値のマップを反復処理し、それぞれに <dt> と <dd> を追加します。
+for (const [prop, val] of allComputedStyles) {
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.appendChild(document.createTextNode(prop));
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  cssValue.appendChild(document.createTextNode(val));
+  stylesList.appendChild(cssValue);
+}
+```
+
+[`computedStyleMap()` に対応しているブラウザー](#ブラウザーの互換性)では、すべての CSS プロパティと値のリストが表示されます。
+他のブラウザーでは、リンクが表示されるだけです。
+
+{{EmbedLiveSample("Examples", 300, 300)}}
+
+リンクが持つ既定の CSS プロパティがいくつもあることに気づきましたか？ '`a`' を '`p`' に更新すると、`margin-top` と `margin-bottom` の既定の計算値の違いに気が付くでしょう。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 6358ba3c266b0b1e7dd8efd4b70e1cea838b578c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 4 Mar 2022 02:10:01 +0900
Subject: 2022/02/18 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/stylepropertymapreadonly/values/index.md   | 56 ++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/values/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/values/index.md b/files/ja/web/api/stylepropertymapreadonly/values/index.md
new file mode 100644
index 0000000000..a794db9dd5
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/values/index.md
@@ -0,0 +1,56 @@
+---
+title: StylePropertyMapReadOnly.values()
+slug: Web/API/StylePropertyMapReadOnly/values
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - values()
+browser-compat: api.StylePropertyMapReadOnly.values
+translation_of: Web/API/StylePropertyMapReadOnly/values
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.values()`** メソッドは、 `StylePropertyMapReadOnly` オブジェクトのそれぞれのインデックスに対応する値を含む新しい*配列反復子*を返します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.values()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+新しい {{jsxref("Array")}} です。
+
+## 例
+
+この例では、 `values()` メソッドを使用して [`Element.computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) の中にある値にアクセスすることができます。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// values は CSS 値の反復可能なリストを返す
+const vals = allComputedStyles.values();
+console.log(vals.next().value); // CSSStyleValue を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From d030c228641fd79372a0d4f6d7eb95cf653f74f7 Mon Sep 17 00:00:00 2001
From: Yuji Sugiura <leader22@users.noreply.github.com>
Date: Mon, 7 Mar 2022 12:51:16 +0900
Subject: Fix typo

---
 files/ja/web/http/headers/content-encoding/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/http/headers/content-encoding/index.html b/files/ja/web/http/headers/content-encoding/index.html
index 98df102634..0f5c3494f5 100644
--- a/files/ja/web/http/headers/content-encoding/index.html
+++ b/files/ja/web/http/headers/content-encoding/index.html
@@ -69,7 +69,7 @@ Content-Encoding: deflate, gzip
 
 <pre>Content-Encoding: gzip</pre>
 
-<p>なお、サーバーはどの圧縮方式も使用することを義務づけられていません。圧縮はサーバー設定や使用しているサーバージュールに強く依存します。</p>
+<p>なお、サーバーはどの圧縮方式も使用することを義務づけられていません。圧縮はサーバー設定や使用しているサーバーモジュールに強く依存します。</p>
 
 <h2 id="Specifications" name="Specifications">仕様書</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From ee8ad16060b071977ff26d3c15972d09e1ac63ec Mon Sep 17 00:00:00 2001
From: "Z.Nana" <101083936+BallaBalloBella@users.noreply.github.com>
Date: Tue, 8 Mar 2022 14:35:33 +0900
Subject: 新規翻訳：PlayCanvasでベーシックデモをビルドする
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

「PlayCanvasでベーシックデモをビルドする」を翻訳しました。
---
 .../index.md                                       | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md

diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
new file mode 100644
index 0000000000..8a37b75459
--- /dev/null
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -0,0 +1,53 @@
+---
+title: PlayCanvasでベーシックデモをビルドする
+slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas
+tags:
+  - 3D
+  - Canvas
+  - WebGL
+  - PlayCanvas
+  - アニメーション
+  - カメラ
+  - ゲーム
+  - チュートリアル
+  - ライト
+  - レンダリング
+  - 初心者
+---
+{{GamesSidebar}}
+
+PlayCanvas は有名な 3D WebGL ゲームエンジンです​。 Will Eastcott と  Dave Evans によって作成されました。 [GitHub 上でオープンソース](https://github.com/playcanvas/engine)となっており、オンラインで使用できる[エディター](https://developer.playcanvas.com/en/user-manual/designer/)と優れた[ドキュメント](https://developer.playcanvas.com/en/)が特徴です。 オンラインエディターは、パブリックプロジェクトの場合チームメンバー 2 人まで無料で使用できますが、商用でより多くのデベロッパーが参加できるプライベートプロジェクトを希望される場合は [有償プラン](https://playcanvas.com/plans)もあります。
+
+![PlayCanvas website.](playcanvas-cover.png)
+
+## ゲームやデモ
+
+PlayCanvas では、機能紹介を兼ねたデモをいくつか公開しています。
+
+- [Tanx](https://playcanv.as/p/aP0oxhUr) は、マルチプレイヤーのタンクゲームで自分のタンクを乗り回したり、他のプレイヤーを射撃したりするゲームです。
+- [Swooop](https://playcanv.as/p/JtL2iqIH) は、航空機を操縦して魔法の島を飛び回り、宝石や燃料を集めるゲームです。
+- [Star Lord](https://playcanv.as/b/FQbBsJTd) や [BMW i8](https://playcanv.as/p/RqJJ9oU9) のようなビジュアリゼーションもエンジンを活用し、その機能を紹介しています。
+
+![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](playcanvas-demos.png)
+
+> **備考:** さらに事例をご覧になる場合は[特集されているデモ](https://playcanvas.com/explore)も確認してください。
+
+## エンジンとエディターの違い
+
+エンジンそのものは、 JavaScript ファイルを HTML に直接入れ込むことで標準ライブラリとして使用でき、すぐにコーディングすることができます。さらに、 PlayCanvas のツールセットにはオンラインエディターも搭載されています。このオンラインエディターでは、シーンにコンポーネントをドラッグ & ドロップすることができます。
+コーディングの知識よりも、デザインの知識の方が豊富な方がゲームやシーンを要するアプリを作成する場合など、この機能は大変便利なものとなります。 エディターとエンジンは異なるアプローチですが、最終的な目的の達成という面では同等です。
+
+## PlayCanvas エンジン
+
+モダンブラウザー向けに構築されている PlayCanvas は、リソースローディング、エンティティシステムやコンポーネントシステム、高度なグラフィック操作、コリジョン、物理エンジン ( [ammo.js](https://github.com/kripken/ammo.js/ )
+でのビルド)、オーディオ、様々なデバイス（ゲームパッドを含む）からの入力のコントロールを扱う設備を搭載したフル装備の 3D エンジンです。 なかなかの機能が揃っているのではないでしょうか。実際に使用されているところを見てみましょう。詳細については [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine)
+をビルドするを参照ください。
+
+## PlayCanvas エディター
+
+ゼロからコーディングするのではなく、オンラインエディターを使用するという手もあります。 コーディングが得意というわけでない方でも、心地よく使用いただける環境になっています。 詳細は [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor)
+するを参照ください。
+
+## まとめ
+
+もちろん、自分がどういう方法でビルドしたいか、それが一番です。デザイナーであればオンラインエディターがやりやすいかもしれませんし、プログラマーであればコーディング環境で自らコントロールできるエンジンのソースファイルを好むかもしれません。 選択肢があり、最もいいと思うツールを選ぶことができるのがいい点です。
-- 
cgit v1.2.3-54-g00ecf


From fc819c5487f64b96aace19a14e845a914f0ac8b2 Mon Sep 17 00:00:00 2001
From: "Z.Nana" <101083936+BallaBalloBella@users.noreply.github.com>
Date: Wed, 9 Mar 2022 18:18:10 +0900
Subject: 翻訳の一部修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../building_up_a_basic_demo_with_playcanvas/index.md     | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
index 8a37b75459..a5eafff8e0 100644
--- a/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
+++ b/files/ja/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md
@@ -1,5 +1,5 @@
 ---
-title: PlayCanvasでベーシックデモをビルドする
+title: PlayCanvas でベーシックデモをビルドする
 slug: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas
 tags:
   - 3D
@@ -14,9 +14,10 @@ tags:
   - レンダリング
   - 初心者
 ---
+
 {{GamesSidebar}}
 
-PlayCanvas は有名な 3D WebGL ゲームエンジンです​。 Will Eastcott と  Dave Evans によって作成されました。 [GitHub 上でオープンソース](https://github.com/playcanvas/engine)となっており、オンラインで使用できる[エディター](https://developer.playcanvas.com/en/user-manual/designer/)と優れた[ドキュメント](https://developer.playcanvas.com/en/)が特徴です。 オンラインエディターは、パブリックプロジェクトの場合チームメンバー 2 人まで無料で使用できますが、商用でより多くのデベロッパーが参加できるプライベートプロジェクトを希望される場合は [有償プラン](https://playcanvas.com/plans)もあります。
+PlayCanvas は有名な 3D WebGL ゲームエンジンです ​。 Will Eastcott と Dave Evans によって作成されました。 [GitHub 上でオープンソース](https://github.com/playcanvas/engine)となっており、オンラインで使用できる[エディター](https://developer.playcanvas.com/en/user-manual/designer/)と優れた[ドキュメント](https://developer.playcanvas.com/en/)が特徴です。 オンラインエディターは、パブリックプロジェクトの場合チームメンバー 2 人まで無料で使用できますが、商用でより多くのデベロッパーが参加できるプライベートプロジェクトを希望される場合は [有償プラン](https://playcanvas.com/plans)もあります。
 
 ![PlayCanvas website.](playcanvas-cover.png)
 
@@ -30,7 +31,7 @@ PlayCanvas では、機能紹介を兼ねたデモをいくつか公開してい
 
 ![A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8.](playcanvas-demos.png)
 
-> **備考:** さらに事例をご覧になる場合は[特集されているデモ](https://playcanvas.com/explore)も確認してください。
+> **Note:** さらに事例をご覧になる場合は[特集されているデモ](https://playcanvas.com/explore)も確認してください。
 
 ## エンジンとエディターの違い
 
@@ -39,14 +40,12 @@ PlayCanvas では、機能紹介を兼ねたデモをいくつか公開してい
 
 ## PlayCanvas エンジン
 
-モダンブラウザー向けに構築されている PlayCanvas は、リソースローディング、エンティティシステムやコンポーネントシステム、高度なグラフィック操作、コリジョン、物理エンジン ( [ammo.js](https://github.com/kripken/ammo.js/ )
-でのビルド)、オーディオ、様々なデバイス（ゲームパッドを含む）からの入力のコントロールを扱う設備を搭載したフル装備の 3D エンジンです。 なかなかの機能が揃っているのではないでしょうか。実際に使用されているところを見てみましょう。詳細については [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine)
-をビルドするを参照ください。
+モダンブラウザー向けに構築されている PlayCanvas は、リソースローディング、エンティティシステムやコンポーネントシステム、高度なグラフィック操作、コリジョン、物理エンジン ( [ammo.js](https://github.com/kripken/ammo.js/)
+でのビルド)、オーディオ、様々なデバイス（ゲームパッドを含む）からの入力のコントロールを扱う設備を搭載したフル装備の 3D エンジンです。 なかなかの機能が揃っているのではないでしょうか。実際に使用されているところを見てみましょう。詳細については [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine)を参照ください。
 
 ## PlayCanvas エディター
 
-ゼロからコーディングするのではなく、オンラインエディターを使用するという手もあります。 コーディングが得意というわけでない方でも、心地よく使用いただける環境になっています。 詳細は [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor)
-するを参照ください。
+ゼロからコーディングするのではなく、オンラインエディターを使用するという手もあります。 コーディングが得意というわけでない方でも、心地よく使用いただける環境になっています。 詳細は [PlayCanvas でベーシックデモをビルドする](/ja/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor)を参照ください。
 
 ## まとめ
 
-- 
cgit v1.2.3-54-g00ecf


From 72efabe129dc17863e6b221abf14b9ac9b51cca7 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Thu, 10 Mar 2022 18:29:10 +0100
Subject: Update index.md (#4528)

---
 files/fr/learn/javascript/building_blocks/functions/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 27ee2c6a86..0826da6b26 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -236,11 +236,11 @@ var madeAString = myArray.join();
 
 Si aucun paramètre n'est inclus pour spécifier un caractère de jointure / délimitation, une virgule est utilisée par défaut.
 
-## La portée des fonctions et les conflits.
+## La portée des fonctions et les conflits
 
 Parlons un peu de la {{glossary("portée")}} — un concept très important lorsque l'on a affaire à des fonctions. Lorsque vous créez une fonction, les variables et les autres choses qui sont définies à l'intérieur de la fonction ont leur propre **portée**, ce qui signifie qu'elles sont enfermées dans leur propre compartiment séparé et qu'elles ne peuvent pas être affectées par d'autres fonctions ou par le code en dehors de la fonction.
 
-Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe qu'elle partie du code.
+Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe quelle partie du code.
 
 Le JavaScript est construit de cette façon pour plusieurs raisons —  mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident.
 
-- 
cgit v1.2.3-54-g00ecf


From 37949c8719dbef82d686266fb6268ca28375b27e Mon Sep 17 00:00:00 2001
From: zhongjunma <68845504+zhongjunma@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:33:21 +0800
Subject: fix period (#4512)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change "`<head>元素`." to "`<head>`元素。"
---
 files/zh-cn/learn/html/introduction_to_html/getting_started/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
index 70eeac7352..51d207941d 100644
--- a/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/getting_started/index.html
@@ -435,7 +435,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
   然而这种写法已经过时了，这些内容已成为历史。只需要知道 <code>&lt;!DOCTYPE html&gt;</code> 是最短有效的文档声明。</li>
  <li><code>&lt;html&gt;&lt;/html&gt;</code>: <code>&lt;html&gt;</code>元素。这个元素包裹了整个完整的页面，是一个根元素。</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code>: <code>&lt;head&gt;元素</code>. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于&lt;head&gt;元素的内容。</li>
+ <li><code>&lt;head&gt;&lt;/head&gt;</code>: <code>&lt;head&gt;</code>元素。这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。以后的章节能学到更多关于&lt;head&gt;元素的内容。</li>
  <li><code>&lt;meta charset="utf-8"&gt;</code>: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。</li>
  <li><code>&lt;title&gt;&lt;/title&gt;</code>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。</li>
  <li><code>&lt;body&gt;&lt;/body&gt;</code>: <code>&lt;body&gt;</code>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。</li>
-- 
cgit v1.2.3-54-g00ecf


From 4aef8219eddf56bc1c2abfd6e8cdb1b4d291d891 Mon Sep 17 00:00:00 2001
From: zzw <71685145+7ooz@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:34:11 +0800
Subject: fix image position error (#4526)

---
 files/zh-cn/web/api/audionode/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/api/audionode/index.html b/files/zh-cn/web/api/audionode/index.html
index ef3ae65a0e..2361eda9f8 100644
--- a/files/zh-cn/web/api/audionode/index.html
+++ b/files/zh-cn/web/api/audionode/index.html
@@ -5,7 +5,7 @@ translation_of: Web/API/AudioNode
 ---
 <div>{{ APIRef("Web Audio API") }} {{SeeCompatTable}}</div>
 
-<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/5081/WebAudioBasics.png" style="float: left; height: 260px; margin: 10px; width: 355px;"><strong><code>AudioNode</code></strong><strong> </strong>接口是一个处理音频的通用模块, 比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).</p>
+<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/5081/WebAudioBasics.png"><strong><code>AudioNode</code></strong><strong> </strong>接口是一个处理音频的通用模块, 比如一个音频源 (e.g. 一个 HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} 元素), 一个音频地址或者一个中间处理模块 (e.g. 一个过滤器如 {{domxref("BiquadFilterNode")}}, 或一个音量控制器如 {{domxref("GainNode")}}).</p>
 
 <p><code>一个AudioNode</code> 既有输入也有输出。输入与输出都有一定数量的通道。<em>只有一个输出而没有输入的</em> <code>AudioNode</code> 叫做音频源。</p>
 
-- 
cgit v1.2.3-54-g00ecf


From 9e85ef842f0d820804c62f89966882e83b505fd0 Mon Sep 17 00:00:00 2001
From: Barry Wang <wyc6794@gmail.com>
Date: Thu, 10 Mar 2022 14:48:30 +0800
Subject: translate(zh-cn) Adjust translation for 'cascade' in css/@layer.

---
 files/zh-cn/web/css/@layer/index.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 8476f45e5d..86e7a3740d 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -12,17 +12,17 @@ browser-compat: css.at-rules.layer
 ---
 {{CSSRef}}{{SeeCompatTable}}
 
-[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _堆叠层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。
+[CSS](/en-US/docs/Web/CSS) [@规则](/en-US/docs/Web/CSS/At-rule) 中的`@layer`声明了一个 _级联层_， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。
 
 ```css
 @layer utilities {
-  /* 创建一个名为 utilities 的堆叠层 */
+  /* 创建一个名为 utilities 的级联层 */
 }
 ```
 
 ## 语法
 
-`@layer` @规则可以通过三种方式其一来创建堆叠层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。
+`@layer` @规则可以通过三种方式其一来创建级联层。第一种方法如上方代码所示，它创建了一个块级的@规则，其中包含作用于该层内部的CSS规则。
 
 ```css
 @layer utilities {
@@ -35,14 +35,14 @@ browser-compat: css.at-rules.layer
   }
 }
 ```
-一个堆叠层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内：
+一个级联层同样可以通过 {{cssxref("@import")}} 来创建，规则存在于被引入的样式表内：
 
 
 ```css
 @import(utilities.css) layer(utilities);
 ```
 
-你也可以创建带命名的堆叠层，但不指定任何样式。例如，单一的命名层：
+你也可以创建带命名的级联层，但不指定任何样式。例如，单一的命名层：
 
 ```css
 @layer utilities
@@ -55,17 +55,17 @@ browser-compat: css.at-rules.layer
 @layer theme, layout, utilities
 ```
 
-这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个堆叠层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。
+这一做法很有用，因为层最初被指定的顺序决定了它是否有父级层。对于声明而言，如果同一声明在多个级联层中被指定，最后一层中的将优先于其他层。因此，在上面的例子中，如果 `theme` 层和 `utilities` 层中存在冲突的规则，那么 `utilities` 层中的将优先被应用。
 
-即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦堆叠层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的堆叠层中。
+即使 `utilities` 层中规则的 _优先级低于_ `theme` 层中的，该规则仍会被应用。一旦级联层顺序建立之后，优先级和出现顺序都会被忽略。这将使创建CSS选择器变得更加简单，因为你不需要确保每一个选择器都有足够高的优先级来覆盖其他冲突的规则，你只需要确保它们出现在一个顺序更靠后的级联层中。
 
-> **注**：在已经声明堆叠层的名字后，它们的顺序随即被确立，你可以重复声明某堆叠层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且堆叠层之间的顺序不会改变。
+> **注**：在已经声明级联层的名字后，它们的顺序随即被确立，你可以重复声明某级联层的名字来向其添加CSS规则。这些样式将被附加到该层的末尾，且级联层之间的顺序不会改变。
 
-其他不属于任何一堆叠层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何堆叠层内定义的规则都将覆盖外部声明的规则。
+其他不属于任何一级联层的样式将被集中到同一匿名层，并置于所有层的前部，这意味着任何级联层内定义的规则都将覆盖外部声明的规则。
 
 ### 嵌套层
 
-堆叠层允许嵌套，例如：
+级联层允许嵌套，例如：
 
 ```css
 @layer framework {
@@ -87,7 +87,7 @@ browser-compat: css.at-rules.layer
 
 ### 匿名层
 
-如果创建了一个堆叠层但并未指定名字，例如：
+如果创建了一个级联层但并未指定名字，例如：
 
 ```css
 @layer {
@@ -107,9 +107,9 @@ browser-compat: css.at-rules.layer
 
 ### 基本例子
 
-下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于堆叠层外部，作用于 `.box p`。
+下方的例子创建了两条CSS规则。其中一条为 `type` 层内部的 {{htmlelement("p")}} 元素创建。另一条规则创建于级联层外部，作用于 `.box p`。
 
-没有堆叠层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有堆叠层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。
+没有级联层时，选择器 `.box p` 将会有最高的优先级，因此文字 `Hello, world!` 将被显示为绿色。有级联层时，其外部的顺序和优先级将被忽略。因为 `type` 层的次序排在存储非层级信息的匿名层之后，文字的颜色将显示为紫色。
 
 #### HTML
 
@@ -140,7 +140,7 @@ browser-compat: css.at-rules.layer
 
 ### 向已存在的层中添加规则
 
-下方的例子创建了两个没有规则的堆叠层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。
+下方的例子创建了两个没有规则的级联层，随后，CSS规则被添加到这两层中。`base` 层定义了color、border、font-size和padding。`special` 层定义了不同的color属性。因为 `special` 层在定义时排在最后，其中的color属性将被应用，文字的颜色将显示为`rebeccapurple`。`base` 层中的其他规则仍然有效。
 
 #### HTML
 
-- 
cgit v1.2.3-54-g00ecf


From d495012cffd792a4ae7aa00aafddf502d18a93c2 Mon Sep 17 00:00:00 2001
From: Boss Gao's cat <yinjianihao@qq.com>
Date: Fri, 11 Mar 2022 01:37:31 +0800
Subject: fix table style (#4473)

Co-authored-by: garfield@staritgp.com <garfield@staritgp.com>
---
 .../zh-cn/web/api/window/storage_event/index.html  | 36 +++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/files/zh-cn/web/api/window/storage_event/index.html b/files/zh-cn/web/api/window/storage_event/index.html
index 81d66d57bc..7a9c471636 100644
--- a/files/zh-cn/web/api/window/storage_event/index.html
+++ b/files/zh-cn/web/api/window/storage_event/index.html
@@ -10,20 +10,28 @@ translation_of: Web/API/Window/storage_event
 
 <h2 id="常规信息">常规信息</h2>
 
-<dl>
- <dt style="float: left; text-align: right; width: 120px;">说明</dt>
- <dd style="margin: 0 0 0 120px;"><em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></dd>
- <dt style="float: left; text-align: right; width: 120px;">接口</dt>
- <dd style="margin: 0 0 0 120px;">{{domxref("StorageEvent")}}</dd>
- <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">默认行为可取消</dt>
- <dd style="margin: 0 0 0 120px;">No</dd>
- <dt style="float: left; text-align: right; width: 120px;">目标</dt>
- <dd style="margin: 0 0 0 120px;">DefaultView (<code>&lt;window&gt;</code>)</dd>
- <dt style="float: left; text-align: right; width: 120px;">默认行为</dt>
- <dd style="margin: 0 0 0 120px;">无</dd>
-</dl>
+<p>说明: <em><a class="external" href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></em></p>
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">接口</th>
+      <td>{{domxref("StorageEvent")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">是否冒泡</th>
+      <td>No</td>
+    </tr>
+    <tr>
+      <th scope="row">目标</th>
+      <td>DefaultView (<code>&lt;window&gt;</code>)</td>
+    </tr>
+    <tr>
+      <th scope="row">默认行为</th>
+      <td>无</td>
+    </tr>
+  </tbody>
+</table>
 
 <h2 id="属性">属性</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 03bcb1a7d706f634904b06d974aa9560feae79ef Mon Sep 17 00:00:00 2001
From: gongwannan <48170648+gongwannan@users.noreply.github.com>
Date: Tue, 8 Mar 2022 10:06:10 +0800
Subject: repair translate error

---
 files/zh-cn/web/css/display-internal/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/css/display-internal/index.html b/files/zh-cn/web/css/display-internal/index.html
index 463c4014f4..e735bee9bf 100644
--- a/files/zh-cn/web/css/display-internal/index.html
+++ b/files/zh-cn/web/css/display-internal/index.html
@@ -10,7 +10,7 @@ translation_of: Web/CSS/display-internal
 ---
 <div> </div>
 
-<p class="summary"><font><font>一些布局模型，例如  </font></font><code>table</code><font><font> 并且</font></font><code>ruby</code><font><font>具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。</font><font>此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。</font></font></p>
+<p class="summary"><font><font>一些布局模型，例如  </font></font><code>table</code><font><font> 和 </font></font><code>ruby</code><font><font>具有复杂的内部结构，具有他们的孩子和后代可以填充的几个不同的角色。</font><font>此页面定义了那些“内部”显示值，这些值仅在该特定布局模式中具有意义。</font></font></p>
 
 <h2 id="语法">语法</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 38052b3e991be5cf0f0c6bfed80d969a73aa7816 Mon Sep 17 00:00:00 2001
From: yjl68 <53028327+yjl68@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:46:58 +0800
Subject: fix link (#4414)

---
 files/zh-cn/web/security/same-origin_policy/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/security/same-origin_policy/index.html b/files/zh-cn/web/security/same-origin_policy/index.html
index 983a40c3af..67b54322e1 100644
--- a/files/zh-cn/web/security/same-origin_policy/index.html
+++ b/files/zh-cn/web/security/same-origin_policy/index.html
@@ -121,7 +121,7 @@ translation_of: Web/Security/Same-origin_policy
 
 <h3 id="如何允许跨源访问"><strong>如何允许跨源访问</strong></h3>
 
-<p>可以使用 <a href="https://developer.mozilla.org/zh-CN/docs/HTTP/Access_control_CORS">CORS</a> 来允许跨源访问。CORS 是 {{Glossary("HTTP")}} 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。</p>
+<p>可以使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS">CORS</a> 来允许跨源访问。CORS 是 {{Glossary("HTTP")}} 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。</p>
 
 <h3 id="如何阻止跨源访问"><strong>如何阻止跨源访问</strong></h3>
 
-- 
cgit v1.2.3-54-g00ecf


From 0016c74a9255332c793969dd194d5c4809e7f452 Mon Sep 17 00:00:00 2001
From: nanshu <56244178+LuckyChou710@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:50:17 +0800
Subject: remove Object.assign polyfill (#4392)

There are two polyfills
---
 .../global_objects/object/assign/index.html        | 33 ----------------------
 1 file changed, 33 deletions(-)

diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/assign/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/assign/index.html
index 4b8696d2ab..616406e3e5 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/object/assign/index.html
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/assign/index.html
@@ -251,39 +251,6 @@ console.log(copy);
 // { foo:1, get bar() { return 2 } }
 </pre>
 
-<h2 id="Polyfill">Polyfill</h2>
-
-<p>此{{Glossary("Polyfill","polyfill")}}不支持 symbol 属性，因为ES5 中根本没有 symbol ：</p>
-
-<pre class="brush: js">if (typeof Object.assign != 'function') {
-  // Must be writable: true, enumerable: false, configurable: true
-  Object.defineProperty(Object, "assign", {
-    value: function assign(target, varArgs) { // .length of function is 2
-      'use strict';
-      if (target == null) { // TypeError if undefined or null
-        throw new TypeError('Cannot convert undefined or null to object');
-      }
-
-      let to = Object(target);
-
-      for (var index = 1; index &lt; arguments.length; index++) {
-        var nextSource = arguments[index];
-
-        if (nextSource != null) { // Skip over if undefined or null
-          for (let nextKey in nextSource) {
-            // Avoid bugs when hasOwnProperty is shadowed
-            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
-              to[nextKey] = nextSource[nextKey];
-            }
-          }
-        }
-      }
-      return to;
-    },
-    writable: true,
-    configurable: true
-  });
-}</pre>
 
 <h2 id="Specifications">规范</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From ebf114acd91c0c7af587b34604af288538666fba Mon Sep 17 00:00:00 2001
From: spicylemonhaha <81058033+spicylemonhaha@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:53:19 +0800
Subject: update translation (#4389)

Translation error
---
 .../web/css/css_flow_layout/intro_to_formatting_contexts/index.html     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
index cf499c2bd8..4909a95b04 100644
--- a/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
+++ b/files/zh-cn/web/css/css_flow_layout/intro_to_formatting_contexts/index.html
@@ -18,7 +18,7 @@ translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
 
 <h3 id="创建新的块格式上下文">创建新的块格式上下文</h3>
 
-<p>{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。默认为块布局的任何元素也会为其后代元素创建块格式上下文。此外，还有一些CSS属性可以使元素创建一个BFC，即使默认情况下它不这样做。</p>
+<p>{{HTMLElement("html")}} 元素不是唯一能够创建块格式上下文的元素。任何块级元素都可以通过应用某些CSS属性来创建一个BFC</p>
 
 <p>除了文档的根元素({{HTMLElement("html")}}) 之外，还将在以下情况下创建一个新的BFC：</p>
 
-- 
cgit v1.2.3-54-g00ecf


From 3f5025eba18d07c319fee9d28e215d315ef5d1b2 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:14:44 +0000
Subject: [CRON] sync translated content

---
 files/ja/_redirects.txt                            |   1 +
 files/ja/_wikihistory.json                         |  12 +-
 .../api/mediadevices/devicechange_event/index.html | 203 +++++++++++++++++++++
 .../web/api/mediadevices/ondevicechange/index.html | 202 --------------------
 files/zh-cn/_redirects.txt                         |   2 +
 files/zh-cn/_wikihistory.json                      |  24 +--
 .../api/mediadevices/devicechange_event/index.html | 203 +++++++++++++++++++++
 .../web/api/mediadevices/ondevicechange/index.html | 202 --------------------
 .../window/beforeinstallprompt_event/index.html    |  67 +++++++
 .../api/window/onbeforeinstallprompt/index.html    |  66 -------
 10 files changed, 494 insertions(+), 488 deletions(-)
 create mode 100644 files/ja/web/api/mediadevices/devicechange_event/index.html
 delete mode 100644 files/ja/web/api/mediadevices/ondevicechange/index.html
 create mode 100644 files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html
 delete mode 100644 files/zh-cn/web/api/mediadevices/ondevicechange/index.html
 create mode 100644 files/zh-cn/web/api/window/beforeinstallprompt_event/index.html
 delete mode 100644 files/zh-cn/web/api/window/onbeforeinstallprompt/index.html

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index f7931e8e02..f4b7a44b99 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3179,6 +3179,7 @@
 /ja/docs/Web/API/Index	/ja/docs/Web/API
 /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB	/ja/docs/Web/API/IndexedDB_API/Basic_Terminology
 /ja/docs/Web/API/MediaCapabilitiesInfo	/ja/docs/Web/API/MediaCapabilities/encodingInfo
+/ja/docs/Web/API/MediaDevices/ondevicechange	/ja/docs/Web/API/MediaDevices/devicechange_event
 /ja/docs/Web/API/MediaRecorder_API	/ja/docs/Web/API/MediaStream_Recording_API
 /ja/docs/Web/API/MediaStreamConstraints	/ja/docs/conflicting/Web/API/MediaDevices/getUserMedia
 /ja/docs/Web/API/MouseEvent/which	/ja/docs/Web/API/UIEvent/which
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 7615f224f5..e42e93574b 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -17907,6 +17907,12 @@
       "teoli"
     ]
   },
+  "Web/API/MediaDevices/devicechange_event": {
+    "modified": "2019-03-18T21:42:20.814Z",
+    "contributors": [
+      "e53e04ac"
+    ]
+  },
   "Web/API/MediaDevices/enumerateDevices": {
     "modified": "2019-03-23T22:51:51.373Z",
     "contributors": [
@@ -17936,12 +17942,6 @@
       "YuichiNukiyama"
     ]
   },
-  "Web/API/MediaDevices/ondevicechange": {
-    "modified": "2019-03-18T21:42:20.814Z",
-    "contributors": [
-      "e53e04ac"
-    ]
-  },
   "Web/API/MediaQueryList": {
     "modified": "2020-10-15T21:19:19.216Z",
     "contributors": [
diff --git a/files/ja/web/api/mediadevices/devicechange_event/index.html b/files/ja/web/api/mediadevices/devicechange_event/index.html
new file mode 100644
index 0000000000..8c65429674
--- /dev/null
+++ b/files/ja/web/api/mediadevices/devicechange_event/index.html
@@ -0,0 +1,203 @@
+---
+title: MediaDevices.ondevicechange
+slug: Web/API/MediaDevices/devicechange_event
+translation_of: Web/API/MediaDevices/ondevicechange
+original_slug: Web/API/MediaDevices/ondevicechange
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p><span class="seoSummary"><strong><code>MediaDevices.ondevicechange</code></strong></span>プロパティは<span class="seoSummary">{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaDevices")}}インスタンスで{{event("devicechange")}}が発生した時に呼び出される関数です。このイベントは、{{Glossary("user agent")}}、Webサイト、アプリケーションによって利用可能なメディアデバイスの一覧が変更された時に発生します。更新された利用可能デバイスの一覧は{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}によっていつでも取得することができます。</span></p>
+
+<h2 id="文法">文法</h2>
+
+<pre class="syntaxbox"><em>MediaDevices</em>.ondevicechange = <em>eventHandler</em>;
+</pre>
+
+<h3 id="値">値</h3>
+
+<p>{{event("devicechange")}}イベントが発生したことを示す{{domxref("Event")}}オブジェクトを入力として受け付ける関数を指定してください。このイベントオブジェクトには、変更に関する情報が含まれていませんので、更新されたデバイスの一覧を取得したい場合は、{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}を呼び出してください。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、<code>updateDeviceList()</code>という関数があり、この関数は{{domxref("MediaDevices.getUserMedia()")}}が成功して、ストリームを取得できた時に一度だけ呼び出され、その後デバイスの一覧に変更があった場合も複数回呼び出されます。この関数は、ブラウザウィンドウに2つの一覧を出力します。1つは、オーディオデバイスの一覧であり、もう1つはビデオデバイスの一覧です。これら2つのリストは、デバイスラベル (名前)とこのデバイスが入力か出力であるかを示すものです。この例では、{{event("devicechange")}}イベントのハンドラを設定しているので、実行中にデバイスが接続または接続を解除されるたびに一覧が更新されます。</p>
+
+<div class="hidden">
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;Click the start button below to begin the demonstration.&lt;/p&gt;
+&lt;div id="startButton" class="button"&gt;
+  Start
+&lt;/div&gt;
+&lt;video id="video" width="160" height="120" autoplay&gt;&lt;/video&gt;&lt;br&gt;
+
+&lt;div class="left"&gt;
+  &lt;h2&gt;Audio devices:&lt;/h2&gt;
+  &lt;ul class="deviceList" id="audioList"&gt;&lt;/ul&gt;
+&lt;/div&gt;
+&lt;div class="right"&gt;
+  &lt;h2&gt;Video devices:&lt;/h2&gt;
+  &lt;ul class="deviceList" id="videoList"&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">body {
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+video {
+  margin-top: 20px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  float:left;
+  width: 48%;
+  margin-right: 2%
+}
+
+.right {
+  float:right;
+  width: 48%;
+  margin-left: 2%
+}
+
+.deviceList {
+  border: 1px solid black;
+  list-style-type: none;
+  margin-top: 2px;
+  padding: 6px;
+}</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<h4 id="他のコード">他のコード</h4>
+
+<p>下のコードは、<code>ondevicechange</code>と直接関係がないため詳細を省きます。</p>
+
+<pre class="brush: js">let videoElement = document.getElementById("video");
+let logElement = document.getElementById("log");
+
+function log(msg) {
+  logElement.innerHTML += msg + "&lt;br&gt;";
+}
+
+document.getElementById("startButton").addEventListener("click", function() {
+  navigator.mediaDevices.getUserMedia({
+    video: {
+      width: 160,
+      height: 120,
+      frameRate: 30
+    },
+    audio: {
+      sampleRate: 44100,
+      sampleSize: 16,
+      volume: 0.25
+    }
+  }).then(stream =&gt; {
+      videoElement.srcObject = stream;
+      updateDeviceList();
+    })
+    .catch(err =&gt; log(err.name + ": " + err.message));
+}, false);</pre>
+</div>
+
+<p>オーディオとビデオデバイスの一覧に使用される{{HTMLElement("ul")}}要素への参照を保持するためのグローバル変数を用意します。</p>
+
+<pre class="brush: js">let audioList = document.getElementById("audioList");
+let videoList = document.getElementById("videoList");</pre>
+
+<h4 id="デバイス一覧_の取得と描画">デバイス一覧 の取得と描画</h4>
+
+<p><code>updateDeviceList()</code>メソッドでは、現在のメディアデバイスの一覧を取得した後、先ほど用意したグローバル変数を用いて、表示されているオーディオとビデオのデバイス一覧を更新します。</p>
+
+<pre class="brush: js">function updateDeviceList() {
+  navigator.mediaDevices.enumerateDevices()
+  .then(function(devices) {
+    audioList.innerHTML = "";
+    videoList.innerHTML = "";
+
+    devices.forEach(function(device) {
+      let elem = document.createElement("li");
+      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
+
+      elem.innerHTML = "&lt;strong&gt;" + device.label + "&lt;/strong&gt; (" + direction + ")";
+      if (type === "audio") {
+        audioList.appendChild(elem);
+      } else if (type === "video") {
+        videoList.appendChild(elem);
+      }
+    });
+  });
+}</pre>
+
+<p><code>updateDeviceList()</code>は、{{domxref("navigator.mediaDevices")}}プロパティから参照できる{{domxref("MediaDevices")}}オブジェクトにある{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}関数の呼び出しから構成されます。コードが実行されるのは、<code>enumerateDevices()</code>によって返された{{jsxref("promise")}}が完了した時です。デバイス一覧の準備ができると、完了ハンドラが呼び出されます。このデバイス一覧は、完了ハンドラの引数として{{domxref("MediaDeviceInfo")}}オブジェクトの配列で渡されます。この配列のそれぞれの要素は、1つのメディア入力デバイスまたは出力デバイスについての情報を含みます。</p>
+
+<p>すべてのデバイスの情報を出力するために、{{jsxref("Array.forEach", "forEach()")}}ループを使用します。それぞれのデバイスで、ユーザへこのデバイス情報を見せるために新しい{{HTMLElement("li")}}オブジェクトを作成します。</p>
+
+<p><code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code>の行について詳しく説明します。ここでは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a> (<a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値を<code>kind</code>、<code>type</code>、<code>direction</code>の変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。</p>
+
+<p>太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイスタイプに基づいて<code>audioList</code>または<code>videoList</code>対応する一覧へ{{domxref("Node.appendChild", "appendChild()")}}の呼び出しによって追加されます。</p>
+
+<h4 id="デバイス一覧の変更を扱う">デバイス一覧の変更を扱う</h4>
+
+<p><code>updateDeviceList()</code>は2箇所から呼び出されます。1箇所目は{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}のpromiseの完了ハンドラであり、ストリームが開かれた時に最初に一覧を埋めます。2箇所目は{{event("devicechange")}}のイベントハンドラからです。</p>
+
+<pre class="brush: js">navigator.mediaDevices.ondevicechange = function(event) {
+  updateDeviceList();
+}</pre>
+
+<p>このコードでは、ユーザがカメラ、マイク、他のメディアデバイスを接続したり、電源を入れたり、電源を切ったりする度に、<code>updateDeviceList()</code>を呼び出し接続されたデバイス一覧を再描画します。</p>
+
+<h3 id="結果">結果</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 460) }}</p>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>初版</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<p>{{Compat("api.MediaDevices.ondevicechange")}}</p>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>The {{event("devicechange")}}イベントとその型である{{domxref("Event")}}</li>
+ <li>{{domxref("MediaDevices.enumerateDevices()")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+</ul>
diff --git a/files/ja/web/api/mediadevices/ondevicechange/index.html b/files/ja/web/api/mediadevices/ondevicechange/index.html
deleted file mode 100644
index 6f63115726..0000000000
--- a/files/ja/web/api/mediadevices/ondevicechange/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: MediaDevices.ondevicechange
-slug: Web/API/MediaDevices/ondevicechange
-translation_of: Web/API/MediaDevices/ondevicechange
----
-<p>{{APIRef("Media Capture and Streams")}}</p>
-
-<p><span class="seoSummary"><strong><code>MediaDevices.ondevicechange</code></strong></span>プロパティは<span class="seoSummary">{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaDevices")}}インスタンスで{{event("devicechange")}}が発生した時に呼び出される関数です。このイベントは、{{Glossary("user agent")}}、Webサイト、アプリケーションによって利用可能なメディアデバイスの一覧が変更された時に発生します。更新された利用可能デバイスの一覧は{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}によっていつでも取得することができます。</span></p>
-
-<h2 id="文法">文法</h2>
-
-<pre class="syntaxbox"><em>MediaDevices</em>.ondevicechange = <em>eventHandler</em>;
-</pre>
-
-<h3 id="値">値</h3>
-
-<p>{{event("devicechange")}}イベントが発生したことを示す{{domxref("Event")}}オブジェクトを入力として受け付ける関数を指定してください。このイベントオブジェクトには、変更に関する情報が含まれていませんので、更新されたデバイスの一覧を取得したい場合は、{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}を呼び出してください。</p>
-
-<h2 id="Example" name="Example">例</h2>
-
-<p>この例では、<code>updateDeviceList()</code>という関数があり、この関数は{{domxref("MediaDevices.getUserMedia()")}}が成功して、ストリームを取得できた時に一度だけ呼び出され、その後デバイスの一覧に変更があった場合も複数回呼び出されます。この関数は、ブラウザウィンドウに2つの一覧を出力します。1つは、オーディオデバイスの一覧であり、もう1つはビデオデバイスの一覧です。これら2つのリストは、デバイスラベル (名前)とこのデバイスが入力か出力であるかを示すものです。この例では、{{event("devicechange")}}イベントのハンドラを設定しているので、実行中にデバイスが接続または接続を解除されるたびに一覧が更新されます。</p>
-
-<div class="hidden">
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;p&gt;Click the start button below to begin the demonstration.&lt;/p&gt;
-&lt;div id="startButton" class="button"&gt;
-  Start
-&lt;/div&gt;
-&lt;video id="video" width="160" height="120" autoplay&gt;&lt;/video&gt;&lt;br&gt;
-
-&lt;div class="left"&gt;
-  &lt;h2&gt;Audio devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="audioList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="right"&gt;
-  &lt;h2&gt;Video devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="videoList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-
-&lt;div id="log"&gt;&lt;/div&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">body {
-  font: 14px "Open Sans", "Arial", sans-serif;
-}
-
-video {
-  margin-top: 20px;
-  border: 1px solid black;
-}
-
-.button {
-  cursor: pointer;
-  width: 160px;
-  border: 1px solid black;
-  font-size: 16px;
-  text-align: center;
-  padding-top: 2px;
-  padding-bottom: 4px;
-  color: white;
-  background-color: darkgreen;
-}
-
-h2 {
-  margin-bottom: 4px;
-}
-
-.left {
-  float:left;
-  width: 48%;
-  margin-right: 2%
-}
-
-.right {
-  float:right;
-  width: 48%;
-  margin-left: 2%
-}
-
-.deviceList {
-  border: 1px solid black;
-  list-style-type: none;
-  margin-top: 2px;
-  padding: 6px;
-}</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<h4 id="他のコード">他のコード</h4>
-
-<p>下のコードは、<code>ondevicechange</code>と直接関係がないため詳細を省きます。</p>
-
-<pre class="brush: js">let videoElement = document.getElementById("video");
-let logElement = document.getElementById("log");
-
-function log(msg) {
-  logElement.innerHTML += msg + "&lt;br&gt;";
-}
-
-document.getElementById("startButton").addEventListener("click", function() {
-  navigator.mediaDevices.getUserMedia({
-    video: {
-      width: 160,
-      height: 120,
-      frameRate: 30
-    },
-    audio: {
-      sampleRate: 44100,
-      sampleSize: 16,
-      volume: 0.25
-    }
-  }).then(stream =&gt; {
-      videoElement.srcObject = stream;
-      updateDeviceList();
-    })
-    .catch(err =&gt; log(err.name + ": " + err.message));
-}, false);</pre>
-</div>
-
-<p>オーディオとビデオデバイスの一覧に使用される{{HTMLElement("ul")}}要素への参照を保持するためのグローバル変数を用意します。</p>
-
-<pre class="brush: js">let audioList = document.getElementById("audioList");
-let videoList = document.getElementById("videoList");</pre>
-
-<h4 id="デバイス一覧_の取得と描画">デバイス一覧 の取得と描画</h4>
-
-<p><code>updateDeviceList()</code>メソッドでは、現在のメディアデバイスの一覧を取得した後、先ほど用意したグローバル変数を用いて、表示されているオーディオとビデオのデバイス一覧を更新します。</p>
-
-<pre class="brush: js">function updateDeviceList() {
-  navigator.mediaDevices.enumerateDevices()
-  .then(function(devices) {
-    audioList.innerHTML = "";
-    videoList.innerHTML = "";
-
-    devices.forEach(function(device) {
-      let elem = document.createElement("li");
-      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
-
-      elem.innerHTML = "&lt;strong&gt;" + device.label + "&lt;/strong&gt; (" + direction + ")";
-      if (type === "audio") {
-        audioList.appendChild(elem);
-      } else if (type === "video") {
-        videoList.appendChild(elem);
-      }
-    });
-  });
-}</pre>
-
-<p><code>updateDeviceList()</code>は、{{domxref("navigator.mediaDevices")}}プロパティから参照できる{{domxref("MediaDevices")}}オブジェクトにある{{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}関数の呼び出しから構成されます。コードが実行されるのは、<code>enumerateDevices()</code>によって返された{{jsxref("promise")}}が完了した時です。デバイス一覧の準備ができると、完了ハンドラが呼び出されます。このデバイス一覧は、完了ハンドラの引数として{{domxref("MediaDeviceInfo")}}オブジェクトの配列で渡されます。この配列のそれぞれの要素は、1つのメディア入力デバイスまたは出力デバイスについての情報を含みます。</p>
-
-<p>すべてのデバイスの情報を出力するために、{{jsxref("Array.forEach", "forEach()")}}ループを使用します。それぞれのデバイスで、ユーザへこのデバイス情報を見せるために新しい{{HTMLElement("li")}}オブジェクトを作成します。</p>
-
-<p><code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code>の行について詳しく説明します。ここでは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a> (<a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>の新しい機能)を使用しており、{{jsxref("String.match()")}}によって返された配列の値を<code>kind</code>、<code>type</code>、<code>direction</code>の変数へ代入しています。なぜこのようなことをするのかというと、{{domxref("MediaDeviceInfo.kind")}}の文字列は、"audioinput"や"videooutput"のように、メディアタイプとメディアフローの向きの2つの情報を含んでいるためです。この行で、タイプ("audio"または"video")と方向("input"と"output")を取り出すことで、リストに表示する文字列を作成することができます。</p>
-
-<p>太字のデバイス名と括弧で囲まれた方向を含む文字列が作成されると、デバイスタイプに基づいて<code>audioList</code>または<code>videoList</code>対応する一覧へ{{domxref("Node.appendChild", "appendChild()")}}の呼び出しによって追加されます。</p>
-
-<h4 id="デバイス一覧の変更を扱う">デバイス一覧の変更を扱う</h4>
-
-<p><code>updateDeviceList()</code>は2箇所から呼び出されます。1箇所目は{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}のpromiseの完了ハンドラであり、ストリームが開かれた時に最初に一覧を埋めます。2箇所目は{{event("devicechange")}}のイベントハンドラからです。</p>
-
-<pre class="brush: js">navigator.mediaDevices.ondevicechange = function(event) {
-  updateDeviceList();
-}</pre>
-
-<p>このコードでは、ユーザがカメラ、マイク、他のメディアデバイスを接続したり、電源を入れたり、電源を切ったりする度に、<code>updateDeviceList()</code>を呼び出し接続されたデバイス一覧を再描画します。</p>
-
-<h3 id="結果">結果</h3>
-
-<p>{{ EmbedLiveSample('Example', 600, 460) }}</p>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}</td>
-   <td>{{ Spec2('Media Capture') }}</td>
-   <td>初版</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-<p>{{Compat("api.MediaDevices.ondevicechange")}}</p>
-
-<h2 id="関連項目">関連項目</h2>
-
-<ul>
- <li>The {{event("devicechange")}}イベントとその型である{{domxref("Event")}}</li>
- <li>{{domxref("MediaDevices.enumerateDevices()")}}</li>
- <li>{{domxref("MediaDeviceInfo")}}</li>
-</ul>
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 1b57d8f385..5724992b1b 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1413,6 +1413,7 @@
 /zh-CN/docs/Web/API/KeyboardEvent/which	/zh-CN/docs/Web/API/UIEvent/which
 /zh-CN/docs/Web/API/Location.replace	/zh-CN/docs/Web/API/Location/replace
 /zh-CN/docs/Web/API/MediaCapabilitiesInfo	/zh-CN/docs/Web/API/MediaCapabilities/encodingInfo
+/zh-CN/docs/Web/API/MediaDevices/ondevicechange	/zh-CN/docs/conflicting/Web/API/MediaDevices/devicechange_event
 /zh-CN/docs/Web/API/MediaStream.addTrack	/zh-CN/docs/Web/API/MediaStream/addTrack
 /zh-CN/docs/Web/API/MouseEvent/which	/zh-CN/docs/conflicting/Web/API/UIEvent/which
 /zh-CN/docs/Web/API/MouseWheelEvent	/zh-CN/docs/conflicting/Web/API/WheelEvent
@@ -1606,6 +1607,7 @@
 /zh-CN/docs/Web/API/Window/minimize	/zh-CN/docs/conflicting/Web/API/Window
 /zh-CN/docs/Web/API/Window/mozAnimationStartTIme	/zh-CN/docs/Web/API/Animation/startTime
 /zh-CN/docs/Web/API/Window/onappinstalled	/zh-CN/docs/Web/API/Window/appinstalled_event
+/zh-CN/docs/Web/API/Window/onbeforeinstallprompt	/zh-CN/docs/Web/API/Window/beforeinstallprompt_event
 /zh-CN/docs/Web/API/Window/onbeforeunload	/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload
 /zh-CN/docs/Web/API/Window/ongamepadconnected	/zh-CN/docs/conflicting/Web/API/Window/gamepadconnected_event
 /zh-CN/docs/Web/API/Window/ongamepaddisconnected	/zh-CN/docs/Web/API/Window/gamepaddisconnected_event
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 79ea90a611..81df0cfbad 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -16622,12 +16622,6 @@
       "c1ngular"
     ]
   },
-  "Web/API/MediaDevices/ondevicechange": {
-    "modified": "2019-03-23T22:08:09.338Z",
-    "contributors": [
-      "qzn928"
-    ]
-  },
   "Web/API/MediaElementAudioSourceNode": {
     "modified": "2019-03-23T22:09:55.508Z",
     "contributors": [
@@ -22570,6 +22564,12 @@
       "xilixinluo"
     ]
   },
+  "Web/API/Window/beforeinstallprompt_event": {
+    "modified": "2019-03-23T22:11:25.289Z",
+    "contributors": [
+      "xgqfrms-GitHub"
+    ]
+  },
   "Web/API/Window/beforeprint_event": {
     "modified": "2020-10-15T21:52:38.969Z",
     "contributors": [
@@ -23055,12 +23055,6 @@
       "charlie"
     ]
   },
-  "Web/API/Window/onbeforeinstallprompt": {
-    "modified": "2019-03-23T22:11:25.289Z",
-    "contributors": [
-      "xgqfrms-GitHub"
-    ]
-  },
   "Web/API/Window/ondevicemotion": {
     "modified": "2019-03-18T21:39:10.384Z",
     "contributors": [
@@ -47063,6 +47057,12 @@
       "sideshowbarker"
     ]
   },
+  "conflicting/Web/API/MediaDevices/devicechange_event": {
+    "modified": "2019-03-23T22:08:09.338Z",
+    "contributors": [
+      "qzn928"
+    ]
+  },
   "conflicting/Web/API/MouseEvent/altKey": {
     "modified": "2019-03-24T00:16:10.184Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html b/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html
new file mode 100644
index 0000000000..125cf3adaa
--- /dev/null
+++ b/files/zh-cn/conflicting/web/api/mediadevices/devicechange_event/index.html
@@ -0,0 +1,203 @@
+---
+title: MediaDevices.ondevicechange
+slug: conflicting/Web/API/MediaDevices/devicechange_event
+translation_of: Web/API/MediaDevices/ondevicechange
+original_slug: Web/API/MediaDevices/ondevicechange
+---
+<p>{{APIRef("Media Capture and Streams")}}</p>
+
+<p><span class="seoSummary"> <strong><code>MediaDevices.ondevicechange</code></strong> 属性是一种{{event("Event_handlers", "event handler")}}，当{{domxref("MediaDevices")}} 接口的{{event("devicechange")}}事件被触发时会被调用. 不论{{Glossary("user agent")}}媒体设备的设置是否可用, 或者网站或者应用发生变了都会触发。无论何时你都可以使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}  去更新可用设备列表.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>MediaDevices</em>.ondevicechange = <em>eventHandler</em>;
+</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>A function you provide which accepts as input a {{domxref("Event")}} object describing the {{domxref("devicehange")}} event that occurred. There is no information about the change included in the event object; to get the updated list of devices, you'll have to use {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}.</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<p>In this example, we create a function called <code>updateDeviceList()</code>, which is called once when {{domxref("MediaDevices.getUserMedia()")}} successfully obtains a stream, and then is called any time the device list changes. It displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. Because the example provides a handler for the {{event("devicechange")}} event, the list is refreshed any time a media device is attached to or removed from the device running the sample.</p>
+
+<div class="hidden">
+<h3 id="HTML_content">HTML content</h3>
+
+<pre class="brush: html">&lt;p&gt;Click the start button below to begin the demonstration.&lt;/p&gt;
+&lt;div id="startButton" class="button"&gt;
+  Start
+&lt;/div&gt;
+&lt;video id="video" width="160" height="120" autoplay&gt;&lt;/video&gt;&lt;br&gt;
+
+&lt;div class="left"&gt;
+  &lt;h2&gt;Audio devices:&lt;/h2&gt;
+  &lt;ul class="deviceList" id="audioList"&gt;&lt;/ul&gt;
+&lt;/div&gt;
+&lt;div class="right"&gt;
+  &lt;h2&gt;Video devices:&lt;/h2&gt;
+  &lt;ul class="deviceList" id="videoList"&gt;&lt;/ul&gt;
+&lt;/div&gt;
+
+&lt;div id="log"&gt;&lt;/div&gt;</pre>
+
+<h3 id="CSS_content">CSS content</h3>
+
+<pre class="brush: css">body {
+  font: 14px "Open Sans", "Arial", sans-serif;
+}
+
+video {
+  margin-top: 20px;
+  border: 1px solid black;
+}
+
+.button {
+  cursor: pointer;
+  width: 160px;
+  border: 1px solid black;
+  font-size: 16px;
+  text-align: center;
+  padding-top: 2px;
+  padding-bottom: 4px;
+  color: white;
+  background-color: darkgreen;
+}
+
+h2 {
+  margin-bottom: 4px;
+}
+
+.left {
+  float:left;
+  width: 48%;
+  margin-right: 2%
+}
+
+.right {
+  float:right;
+  width: 48%;
+  margin-left: 2%
+}
+
+.deviceList {
+  border: 1px solid black;
+  list-style-type: none;
+  margin-top: 2px;
+  padding: 6px;
+}</pre>
+
+<h3 id="JavaScript_content">JavaScript content</h3>
+
+<h4 id="Other_code">Other code</h4>
+
+<p>Below is other code which, while needed to make this example work, isn'tt related directly to <code>ondevicechange</code>, so we won't go into any detail.</p>
+
+<pre class="brush: js">let videoElement = document.getElementById("video");
+let logElement = document.getElementById("log");
+
+function log(msg) {
+  logElement.innerHTML += msg + "&lt;br&gt;";
+}
+
+document.getElementById("startButton").addEventListener("click", function() {
+  navigator.mediaDevices.getUserMedia({
+    video: {
+      width: 160,
+      height: 120,
+      frameRate: 30
+    },
+    audio: {
+      sampleRate: 44100,
+      sampleSize: 16,
+      volume: 0.25
+    }
+  }).then(stream =&gt; {
+      videoElement.srcObject = stream;
+      updateDeviceList();
+    })
+    .catch(err =&gt; log(err.name + ": " + err.message));
+}, false);</pre>
+</div>
+
+<p>We set up global variables that contain references to the {{HTMLElement("ul")}} elements that are used to list the audio and video devices:</p>
+
+<pre class="brush: js">let audioList = document.getElementById("audioList");
+let videoList = document.getElementById("videoList");</pre>
+
+<h4 id="Getting_and_drawing_the_device_list">Getting and drawing the device list</h4>
+
+<p>Now let's take a look at <code>updateDeviceList()</code> itself. This method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information.</p>
+
+<pre class="brush: js">function updateDeviceList() {
+  navigator.mediaDevices.enumerateDevices()
+  .then(function(devices) {
+    audioList.innerHTML = "";
+    videoList.innerHTML = "";
+
+    devices.forEach(function(device) {
+      let elem = document.createElement("li");
+      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
+
+      elem.innerHTML = "&lt;strong&gt;" + device.label + "&lt;/strong&gt; (" + direction + ")";
+      if (type === "audio") {
+        audioList.appendChild(elem);
+      } else if (type === "video") {
+        videoList.appendChild(elem);
+      }
+    });
+  });
+}</pre>
+
+<p><code>updateDeviceList()</code> consists entirely of a call to the function {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} on the {{domxref("MediaDevices")}} object referenced in the {{domxref("navigator.mediaDevices")}} property, as well as the code that's run when the {{jsxref("promise")}} returned by <code>enumerateDevices()</code> is fulfilled. The fulfillment handler is called when the device list is ready. The list is passed into the fulfillment handler as an array of {{domxref("MediaDeviceInfo")}} objects, each describing one media input or output device.</p>
+
+<p>A {{jsxref("Array.forEach", "forEach()")}} loop is used to scan through all the devices. For each device, we create a new {{HTMLElement("li")}} object to be used to display it to the user.</p>
+
+<p>The line <code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code> deserves special notice. This uses <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> (a new feature of <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>) to assign the values of the first three items in the array returned by {{jsxref("String.match()")}} to the variables <code>kind</code>, <code>type</code>, and <code>direction</code>. We do this because the value of {{domxref("MediaDeviceInfo.kind")}} is a single string that includes both the media type and the direction the media flows, such as "audioinput" or "videooutput". This line, then, pulls out the type ("audio" or "video") and direction ("input" or "output") so they can be used to construct the string displayed in the list.</p>
+
+<p>Once the string is assembled, containing the device's name in bold and the direction in parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either <code>audioList</code> or <code>videoList</code>, as appropriate based on the device type.</p>
+
+<h4 id="Handling_device_list_changes">Handling device list changes</h4>
+
+<p>We call <code>updateDeviceList()</code> in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment handler, to initially fill out the list when the stream is opened. The second is in the event handler for {{event("devicechange")}}:</p>
+
+<pre class="brush: js">navigator.mediaDevices.ondevicechange = function(event) {
+  updateDeviceList();
+}</pre>
+
+<p>With this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call <code>updateDeviceList()</code> to redraw the list of connected devices.</p>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', 600, 460) }}</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('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+{{Compat("api.MediaDevices.ondevicechange")}}
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>The {{event("devicechange")}} event and its type, {{domxref("Event")}}.</li>
+ <li>{{domxref("MediaDevices.enumerateDevices()")}}</li>
+ <li>{{domxref("MediaDeviceInfo")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html b/files/zh-cn/web/api/mediadevices/ondevicechange/index.html
deleted file mode 100644
index 1bf012abf9..0000000000
--- a/files/zh-cn/web/api/mediadevices/ondevicechange/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: MediaDevices.ondevicechange
-slug: Web/API/MediaDevices/ondevicechange
-translation_of: Web/API/MediaDevices/ondevicechange
----
-<p>{{APIRef("Media Capture and Streams")}}</p>
-
-<p><span class="seoSummary"> <strong><code>MediaDevices.ondevicechange</code></strong> 属性是一种{{event("Event_handlers", "event handler")}}，当{{domxref("MediaDevices")}} 接口的{{event("devicechange")}}事件被触发时会被调用. 不论{{Glossary("user agent")}}媒体设备的设置是否可用, 或者网站或者应用发生变了都会触发。无论何时你都可以使用 {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}  去更新可用设备列表.</span></p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox"><em>MediaDevices</em>.ondevicechange = <em>eventHandler</em>;
-</pre>
-
-<h3 id="Value">Value</h3>
-
-<p>A function you provide which accepts as input a {{domxref("Event")}} object describing the {{domxref("devicehange")}} event that occurred. There is no information about the change included in the event object; to get the updated list of devices, you'll have to use {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}}.</p>
-
-<h2 id="Example" name="Example">Example</h2>
-
-<p>In this example, we create a function called <code>updateDeviceList()</code>, which is called once when {{domxref("MediaDevices.getUserMedia()")}} successfully obtains a stream, and then is called any time the device list changes. It displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device. Because the example provides a handler for the {{event("devicechange")}} event, the list is refreshed any time a media device is attached to or removed from the device running the sample.</p>
-
-<div class="hidden">
-<h3 id="HTML_content">HTML content</h3>
-
-<pre class="brush: html">&lt;p&gt;Click the start button below to begin the demonstration.&lt;/p&gt;
-&lt;div id="startButton" class="button"&gt;
-  Start
-&lt;/div&gt;
-&lt;video id="video" width="160" height="120" autoplay&gt;&lt;/video&gt;&lt;br&gt;
-
-&lt;div class="left"&gt;
-  &lt;h2&gt;Audio devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="audioList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-&lt;div class="right"&gt;
-  &lt;h2&gt;Video devices:&lt;/h2&gt;
-  &lt;ul class="deviceList" id="videoList"&gt;&lt;/ul&gt;
-&lt;/div&gt;
-
-&lt;div id="log"&gt;&lt;/div&gt;</pre>
-
-<h3 id="CSS_content">CSS content</h3>
-
-<pre class="brush: css">body {
-  font: 14px "Open Sans", "Arial", sans-serif;
-}
-
-video {
-  margin-top: 20px;
-  border: 1px solid black;
-}
-
-.button {
-  cursor: pointer;
-  width: 160px;
-  border: 1px solid black;
-  font-size: 16px;
-  text-align: center;
-  padding-top: 2px;
-  padding-bottom: 4px;
-  color: white;
-  background-color: darkgreen;
-}
-
-h2 {
-  margin-bottom: 4px;
-}
-
-.left {
-  float:left;
-  width: 48%;
-  margin-right: 2%
-}
-
-.right {
-  float:right;
-  width: 48%;
-  margin-left: 2%
-}
-
-.deviceList {
-  border: 1px solid black;
-  list-style-type: none;
-  margin-top: 2px;
-  padding: 6px;
-}</pre>
-
-<h3 id="JavaScript_content">JavaScript content</h3>
-
-<h4 id="Other_code">Other code</h4>
-
-<p>Below is other code which, while needed to make this example work, isn'tt related directly to <code>ondevicechange</code>, so we won't go into any detail.</p>
-
-<pre class="brush: js">let videoElement = document.getElementById("video");
-let logElement = document.getElementById("log");
-
-function log(msg) {
-  logElement.innerHTML += msg + "&lt;br&gt;";
-}
-
-document.getElementById("startButton").addEventListener("click", function() {
-  navigator.mediaDevices.getUserMedia({
-    video: {
-      width: 160,
-      height: 120,
-      frameRate: 30
-    },
-    audio: {
-      sampleRate: 44100,
-      sampleSize: 16,
-      volume: 0.25
-    }
-  }).then(stream =&gt; {
-      videoElement.srcObject = stream;
-      updateDeviceList();
-    })
-    .catch(err =&gt; log(err.name + ": " + err.message));
-}, false);</pre>
-</div>
-
-<p>We set up global variables that contain references to the {{HTMLElement("ul")}} elements that are used to list the audio and video devices:</p>
-
-<pre class="brush: js">let audioList = document.getElementById("audioList");
-let videoList = document.getElementById("videoList");</pre>
-
-<h4 id="Getting_and_drawing_the_device_list">Getting and drawing the device list</h4>
-
-<p>Now let's take a look at <code>updateDeviceList()</code> itself. This method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that information.</p>
-
-<pre class="brush: js">function updateDeviceList() {
-  navigator.mediaDevices.enumerateDevices()
-  .then(function(devices) {
-    audioList.innerHTML = "";
-    videoList.innerHTML = "";
-
-    devices.forEach(function(device) {
-      let elem = document.createElement("li");
-      let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);
-
-      elem.innerHTML = "&lt;strong&gt;" + device.label + "&lt;/strong&gt; (" + direction + ")";
-      if (type === "audio") {
-        audioList.appendChild(elem);
-      } else if (type === "video") {
-        videoList.appendChild(elem);
-      }
-    });
-  });
-}</pre>
-
-<p><code>updateDeviceList()</code> consists entirely of a call to the function {{domxref("MediaDevices.enumerateDevices", "enumerateDevices()")}} on the {{domxref("MediaDevices")}} object referenced in the {{domxref("navigator.mediaDevices")}} property, as well as the code that's run when the {{jsxref("promise")}} returned by <code>enumerateDevices()</code> is fulfilled. The fulfillment handler is called when the device list is ready. The list is passed into the fulfillment handler as an array of {{domxref("MediaDeviceInfo")}} objects, each describing one media input or output device.</p>
-
-<p>A {{jsxref("Array.forEach", "forEach()")}} loop is used to scan through all the devices. For each device, we create a new {{HTMLElement("li")}} object to be used to display it to the user.</p>
-
-<p>The line <code>let [kind, type, direction] = device.kind.match(/(\w+)(input|output)/i);</code> deserves special notice. This uses <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> (a new feature of <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla">ECMAScript 6</a>) to assign the values of the first three items in the array returned by {{jsxref("String.match()")}} to the variables <code>kind</code>, <code>type</code>, and <code>direction</code>. We do this because the value of {{domxref("MediaDeviceInfo.kind")}} is a single string that includes both the media type and the direction the media flows, such as "audioinput" or "videooutput". This line, then, pulls out the type ("audio" or "video") and direction ("input" or "output") so they can be used to construct the string displayed in the list.</p>
-
-<p>Once the string is assembled, containing the device's name in bold and the direction in parentheses, it's appended to the appropriate list by calling {{domxref("Node.appendChild", "appendChild()")}} on either <code>audioList</code> or <code>videoList</code>, as appropriate based on the device type.</p>
-
-<h4 id="Handling_device_list_changes">Handling device list changes</h4>
-
-<p>We call <code>updateDeviceList()</code> in two places. The first is in the {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} promise's fulfillment handler, to initially fill out the list when the stream is opened. The second is in the event handler for {{event("devicechange")}}:</p>
-
-<pre class="brush: js">navigator.mediaDevices.ondevicechange = function(event) {
-  updateDeviceList();
-}</pre>
-
-<p>With this code in place, each time the user plugs in a camera, microphone, or other media device, or turns one on or off, we call <code>updateDeviceList()</code> to redraw the list of connected devices.</p>
-
-<h3 id="Result">Result</h3>
-
-<p>{{ EmbedLiveSample('Example', 600, 460) }}</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('Media Capture', '#dom-mediadevices-ondevicechange', 'ondevicechange') }}</td>
-   <td>{{ Spec2('Media Capture') }}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-{{Compat("api.MediaDevices.ondevicechange")}}
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>The {{event("devicechange")}} event and its type, {{domxref("Event")}}.</li>
- <li>{{domxref("MediaDevices.enumerateDevices()")}}</li>
- <li>{{domxref("MediaDeviceInfo")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html
new file mode 100644
index 0000000000..b9f089174d
--- /dev/null
+++ b/files/zh-cn/web/api/window/beforeinstallprompt_event/index.html
@@ -0,0 +1,67 @@
+---
+title: Window.onbeforeinstallprompt
+slug: Web/API/Window/beforeinstallprompt_event
+tags:
+  - Window.onbeforeinstallprompt
+  - beforeinstallprompt
+translation_of: Web/API/Window/onbeforeinstallprompt
+original_slug: Web/API/Window/onbeforeinstallprompt
+---
+<p>{{ ApiRef() }}</p>
+
+<p><code><strong>Window.onbeforeinstallprompt</strong></code> 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。</p>
+
+<h2 id="句法">句法</h2>
+
+<pre class="syntaxbox">window.addEventListener("beforeinstallprompt", function(event) { ... });
+
+window.onbeforeinstallprompt = function(event) { ...};</pre>
+
+<h2 id="范例">范例</h2>
+
+<p>The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.</p>
+
+<pre class="brush: js">let isTooSoon = true;
+window.addEventListener("beforeinstallprompt", function(e) {
+  if (isTooSoon) {
+    e.preventDefault(); // Prevents prompt display
+    // Prompt later instead:
+    setTimeout(function() {
+      isTooSoon = false;
+      e.prompt(); // Shows prompt
+    }, 10000);
+  }
+
+  // The event was re-dispatched in response to our request
+  // ...
+});</pre>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.Window.onbeforeinstallprompt")}}
+
+<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('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}</td>
+   <td>{{Spec2('Manifest')}}</td>
+   <td>Initial specification.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="也可以看看">也可以看看</h2>
+
+<ul>
+ <li>{{domxref("BeforeInstallPromptEvent.prompt")}}</li>
+ <li>{{domxref("BeforeInstallPromptEvent")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html b/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html
deleted file mode 100644
index 9fe0053476..0000000000
--- a/files/zh-cn/web/api/window/onbeforeinstallprompt/index.html
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: Window.onbeforeinstallprompt
-slug: Web/API/Window/onbeforeinstallprompt
-tags:
-  - Window.onbeforeinstallprompt
-  - beforeinstallprompt
-translation_of: Web/API/Window/onbeforeinstallprompt
----
-<p>{{ ApiRef() }}</p>
-
-<p><code><strong>Window.onbeforeinstallprompt</strong></code> 属性是一个事件处理程序, 用于处理一个{{event("beforeinstallprompt")}}, 当一个Web清单存在时，它将在移动设备上发送，但是在提示用户将网站保存到主屏幕之前。</p>
-
-<h2 id="句法">句法</h2>
-
-<pre class="syntaxbox">window.addEventListener("beforeinstallprompt", function(event) { ... });
-
-window.onbeforeinstallprompt = function(event) { ...};</pre>
-
-<h2 id="范例">范例</h2>
-
-<p>The following example uses the beforeinstallprompt function to verify that it is an appropriate time to display an installation prompt to the user. If it is not, the event is redispatched.</p>
-
-<pre class="brush: js">let isTooSoon = true;
-window.addEventListener("beforeinstallprompt", function(e) {
-  if (isTooSoon) {
-    e.preventDefault(); // Prevents prompt display
-    // Prompt later instead:
-    setTimeout(function() {
-      isTooSoon = false;
-      e.prompt(); // Shows prompt
-    }, 10000);
-  }
-
-  // The event was re-dispatched in response to our request
-  // ...
-});</pre>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.Window.onbeforeinstallprompt")}}
-
-<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('Manifest', '#onbeforeinstallprompt-attribute', 'Window.onbeforeinstallprompt')}}</td>
-   <td>{{Spec2('Manifest')}}</td>
-   <td>Initial specification.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="也可以看看">也可以看看</h2>
-
-<ul>
- <li>{{domxref("BeforeInstallPromptEvent.prompt")}}</li>
- <li>{{domxref("BeforeInstallPromptEvent")}}</li>
-</ul>
-- 
cgit v1.2.3-54-g00ecf


From d0ff6834a8bcbf97dbf40129dde2f07f58bf640e Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Fri, 11 Mar 2022 17:45:39 +0900
Subject: user_input_methods のマウスの日本語訳を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 33c0668a0c..9e40ccd88a 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -55,9 +55,10 @@ window.addEventListener("keyup", handleKeyUp, true);</pre>
 
 <h4 id="Mouse" name="Mouse">マウス</h4>
 
-<p>The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include <a href="/ja/docs/Web/Reference/Events/click"><code>click</code></a>, <a href="/ja/docs/Web/Reference/Events/dblclick"><code>dblclick</code></a>, <a href="/ja/docs/Web/Reference/Events/mouseup"><code>mouseup</code></a>, and <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown</code></a>. The list of all events using the Mouse Event Interface is provided in the <a href="/ja/docs/Web/Reference/Events">Events reference</a>.</p>
+<p>ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは {{domxref("MouseEvent")}} DOM インターフェースによって表されます。一般的なマウスイベントは、<a href="/ja/docs/Web/Reference/Events/click"><code>click イベント</code></a>、<a href="/ja/docs/Web/API/Element/dblclick_event"><code>dblclick イベント</code></a>、<a href="/ja/docs/Web/API/Element/mouseup_event"><code>mouseup イベント</code></a>、そして <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown イベント</code></a>を含みます。マウスイベントインターフェースが使用している全てのイベントの一覧は、<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a>に記載されています。</p>
 
 <p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag &amp; Drop (see below).</p>
+<p>入力機器がマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。</p>
 
 <h4 id="Finger_touch" name="Finger_touch">指でのタッチ</h4>
 
-- 
cgit v1.2.3-54-g00ecf


From 8d2dc8ec12ee7713c2d4859f4072385a7082129f Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Fri, 11 Mar 2022 17:48:38 +0900
Subject: 機器をデバイスに変更
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 9e40ccd88a..32b72d0996 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -58,7 +58,7 @@ window.addEventListener("keyup", handleKeyUp, true);</pre>
 <p>ユーザーがマウスのようなポインティングデバイスと関わっている時に発生するイベントは {{domxref("MouseEvent")}} DOM インターフェースによって表されます。一般的なマウスイベントは、<a href="/ja/docs/Web/Reference/Events/click"><code>click イベント</code></a>、<a href="/ja/docs/Web/API/Element/dblclick_event"><code>dblclick イベント</code></a>、<a href="/ja/docs/Web/API/Element/mouseup_event"><code>mouseup イベント</code></a>、そして <a href="/ja/docs/Web/Reference/Events/mousedown"><code>mousedown イベント</code></a>を含みます。マウスイベントインターフェースが使用している全てのイベントの一覧は、<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a>に記載されています。</p>
 
 <p>When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag &amp; Drop (see below).</p>
-<p>入力機器がマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。</p>
+<p>入力デバイスがマウスの場合、ユーザー入力を Pointer Lock API やドラッグ＆ドロップ API の実装でも制御できます (下記を参照してください)。</p>
 
 <h4 id="Finger_touch" name="Finger_touch">指でのタッチ</h4>
 
-- 
cgit v1.2.3-54-g00ecf


From ddad38dd84604fee53d9a4b4b08dce0bb8c6002b Mon Sep 17 00:00:00 2001
From: AlexandreZabelin <91310039+Alexandr-Zabelin@users.noreply.github.com>
Date: Fri, 11 Mar 2022 15:50:39 +0300
Subject: (ru) Fix translation at Glossary/DOM page (#4531)

---
 files/ru/glossary/dom/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/glossary/dom/index.html b/files/ru/glossary/dom/index.html
index 9def5949f9..337257c83b 100644
--- a/files/ru/glossary/dom/index.html
+++ b/files/ru/glossary/dom/index.html
@@ -6,7 +6,7 @@ tags:
 translation_of: Glossary/DOM
 original_slug: Глоссарий/DOM
 ---
-<p>DOM (Document Object Model) это {{glossary("API")}} который представляет и взаимодействует со всеми {{glossary("HTML")}} или {{glossary("XML")}} документами. DOM это модель документа загруженная в {{glossary("browser","браузер")}} и представляющая документ как узел дерева, где каждый узел представляет часть документа (например {{glossary("element","элемент")}}, строка текста, или комментарий).</p>
+<p>DOM (Document Object Model) это {{glossary("API")}} который представляет и взаимодействует со всеми {{glossary("HTML")}} или {{glossary("XML")}} документами. DOM это модель документа загруженная в {{glossary("browser","браузер")}} и представляющая документ как дерево, где каждый узел представляет часть документа (например {{glossary("element","элемент")}}, строка текста, или комментарий).</p>
 
 <p>DOM это самый используемый {{Glossary("API")}} в {{glossary("World Wide Web","Web")}} потому, что он даёт коду запущенному в браузере доступ и взаимодействие с каждым узлом в документе. Узлы могут быть созданы, перемещены и изменены. Обработчики событий могут быть добавлены к узлам и срабатывают при наступлении данного события.</p>
 
-- 
cgit v1.2.3-54-g00ecf


From 699fc9693122988f144fe8aaf1961d8c6b4c7965 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Fri, 11 Mar 2022 14:00:27 +0100
Subject: Add missing word in Apprendre JS : Fonctions (#4516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update index.md

Correction mot manquant dans Les fonctions intégrées du navigateur

* Update index.md

Annule et remplace correction précédente

* Fix Javascript casing

Co-authored-by: Carolyn Wu <87150472+cw118@users.noreply.github.com>
---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 0826da6b26..0727c536ba 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -69,7 +69,7 @@ var myNumber = Math.random();
 
 > **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin.
 
-Le langage Javascript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
+Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript.
 
 Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur.
 
-- 
cgit v1.2.3-54-g00ecf


From 9ffa82421521377e1eb86ab73cbaf09ac0cada70 Mon Sep 17 00:00:00 2001
From: alattalatta <alattalatta@sorto.me>
Date: Fri, 11 Mar 2022 23:04:14 +0900
Subject: Remove {{page}} macro from CSS/HTML/HTTP docs (#4286)

* Update Using CSS Transforms

* Remove {{page}} from <input>

* Remove {{page}} from <input type="date">

* Remove {{page}} from <track>

* Remove {{page}} from img-src

* Remove {{page}} from script-src

* Remove {{page}} from display
---
 .../css_transforms/using_css_transforms/index.html |  80 ---
 .../css_transforms/using_css_transforms/index.md   | 541 +++++++++++++++++++
 files/ko/web/css/display/index.html                | 594 ++++++++++++++++-----
 files/ko/web/html/element/input/date/index.html    |  10 +-
 files/ko/web/html/element/input/index.html         |  54 --
 files/ko/web/html/element/track/index.html         |  14 +-
 .../content-security-policy/img-src/index.html     |   4 +-
 .../content-security-policy/script-src/index.html  |   7 +-
 8 files changed, 1037 insertions(+), 267 deletions(-)
 delete mode 100644 files/ko/web/css/css_transforms/using_css_transforms/index.html
 create mode 100644 files/ko/web/css/css_transforms/using_css_transforms/index.md

diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.html b/files/ko/web/css/css_transforms/using_css_transforms/index.html
deleted file mode 100644
index 1c29e3b1e3..0000000000
--- a/files/ko/web/css/css_transforms/using_css_transforms/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: CSS 변형 사용하기
-slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
-tags:
-  - 3D
-  - Advanced
-  - CSS
-  - CSS Transforms
-  - Graphics
-  - Guide
-translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
----
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS 변형</strong>(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.</p>
-
-<p>CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.</p>
-
-<div class="warning">
-<p><a href="/ko/docs/Web/CSS/CSS_Box_Model">박스 모델</a>에 따라 배치된 요소만 <code>transform</code>을 적용할 수 있습니다. 한 가지 예를 들자면, <code>display: block</code>속성을 가진 요소는 박스 모델을 따릅니다. </p>
-</div>
-
-<h2 id="CSS_변형_속성">CSS 변형 속성</h2>
-
-<p>CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.</p>
-
-<dl>
- <dt>{{cssxref("transform-origin")}}</dt>
- <dd>원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.</dd>
- <dt>{{cssxref("transform")}}</dt>
- <dd>요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.</dd>
-</dl>
-
-<h2 id="예제">예제</h2>
-
-<p>다음 이미지는 변형하지 않은 MDN 로고입니다.</p>
-
-<p><img alt="MDN Logo" src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"></p>
-
-<h3 id="회전">회전</h3>
-
-<p>MDN 로고를 90도 회전합니다.</p>
-
-<pre class="brush: html notranslate">&lt;img style="transform: rotate(90deg);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
-
-<p>{{EmbedLiveSample('회전', 'auto', 240) }}</p>
-
-<h3 id="비틀고_옮기기">비틀고 옮기기</h3>
-
-<p>MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.</p>
-
-<pre class="brush: html notranslate">&lt;img style="transform: skewx(10deg) translatex(150px);
-            transform-origin: bottom left;"
-     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"&gt;</pre>
-
-<p>{{EmbedLiveSample('비틀고_옮기기') }}</p>
-
-<h2 id="3D_전용_CSS_속성">3D 전용 CSS 속성</h2>
-
-<p>3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..</p>
-
-<h3 id="원근">원근</h3>
-
-<p>처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.</p>
-
-<p>{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}</p>
-
-<p>다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.</p>
-
-<p>{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}</p>
-
-<p>모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.</p>
-
-<h2 id="더_보기">더 보기</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms" title="Using Deviceorientation In 3D Transforms">Using device orientation with 3D Transforms</a></li>
-</ul>
diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.md b/files/ko/web/css/css_transforms/using_css_transforms/index.md
new file mode 100644
index 0000000000..fb163d5113
--- /dev/null
+++ b/files/ko/web/css/css_transforms/using_css_transforms/index.md
@@ -0,0 +1,541 @@
+---
+title: CSS 변형 사용하기
+slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
+tags:
+  - 3D
+  - Advanced
+  - CSS
+  - CSS Transforms
+  - Graphics
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+{{CSSRef}}
+
+**CSS 변형**(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.
+
+CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.
+
+> **경고:** [박스 모델](/ko/docs/Web/CSS/CSS_Box_Model)에 따라 배치된 요소만 `transform`을 적용할 수 있습니다. 한 가지 예를 들자면, `display: block` 속성을 가진 요소는 박스 모델을 따릅니다.
+
+## CSS 변형 속성
+
+CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.
+
+- {{cssxref("transform-origin")}}
+  - : 원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.
+- {{cssxref("transform")}}
+  - : 요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.
+
+## 예제
+
+다음 이미지는 변형하지 않은 MDN 로고입니다.
+
+![MDN Logo](https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png)
+
+### 회전
+
+MDN 로고를 90도 회전합니다.
+
+```html
+<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+```
+
+{{EmbedLiveSample('회전', 'auto', 240) }}
+
+### 비틀고 옮기기
+
+MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.
+
+```html
+<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+```
+
+{{EmbedLiveSample('비틀고_옮기기') }}
+
+## 3D 전용 CSS 속성
+
+3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..
+
+### 원근
+
+처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.
+
+#### Setting perspective
+
+This example shows a cube with the perspective set at different positions. How quick the cube shrinks is defined by the {{ cssxref("perspective") }} property. The smaller its value is, the deeper the perspective is.
+
+##### HTML
+
+The HTML below creates four copies of the same box, with the perspective set at different values.
+
+```html
+<table>
+  <tbody>
+    <tr>
+      <th><code>perspective: 250px;</code>
+      </th>
+      <th><code>perspective: 350px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers250">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers350">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th><code>perspective: 500px;</code>
+      </th>
+      <th><code>perspective: 650px;</code>
+      </th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube pers500">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube pers650">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+
+##### CSS
+
+The CSS establishes classes that can be used to set the perspective to different distances. It also includes classes for the container box and the cube itself, as well as each of its faces.
+
+```css
+/* Shorthand classes for different perspective values */
+.pers250 {
+  perspective: 250px;
+}
+
+.pers350 {
+  perspective: 350px;
+}
+
+.pers500 {
+  perspective: 500px;
+}
+
+.pers650 {
+  perspective: 650px;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 200px;
+  height: 200px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+}
+```
+
+##### Result
+
+{{EmbedLiveSample('Setting_perspective', 660, 700)}}
+
+다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.
+
+#### Changing the perspective origin
+
+This example shows cubes with popular `perspective-origin` values.
+
+##### HTML
+
+```html
+<section>
+
+<figure>
+  <figcaption><code>perspective-origin: top left;</code></figcaption>
+    <div class="container">
+     <div class="cube potl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+     </div>
+    </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: top;</code></figcaption>
+   <div class="container">
+    <div class="cube potm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: top right;</code></figcaption>
+  <div class="container">
+    <div class="cube potr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: left;</code></figcaption>
+  <div class="container">
+    <div class="cube poml">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
+  <div class="container">
+    <div class="cube pomm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: right;</code></figcaption>
+  <div class="container">
+    <div class="cube pomr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom left;</code></figcaption>
+  <div class="container">
+    <div class="cube pobl">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom;</code></figcaption>
+  <div class="container">
+    <div class="cube pobm">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: bottom right;</code></figcaption>
+  <div class="container">
+    <div class="cube pobr">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200neg">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200pos">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+<figure>
+  <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
+  <div class="container">
+    <div class="cube po200200">
+      <div class="face front">1</div>
+      <div class="face back">2</div>
+      <div class="face right">3</div>
+      <div class="face left">4</div>
+      <div class="face top">5</div>
+      <div class="face bottom">6</div>
+    </div>
+  </div>
+</figure>
+
+</section>
+```
+
+##### CSS
+
+```css
+/* perspective-origin values (unique per example) */
+.potl {
+  perspective-origin: top left;
+}
+.potm {
+  perspective-origin: top;
+}
+.potr {
+  perspective-origin: top right;
+}
+.poml {
+  perspective-origin: left;
+}
+.pomm {
+  perspective-origin: 50% 50%;
+}
+.pomr {
+  perspective-origin: right;
+}
+.pobl {
+  perspective-origin: bottom left;
+}
+.pobm {
+  perspective-origin: bottom;
+}
+.pobr {
+  perspective-origin: bottom right;
+}
+.po200200neg {
+  perspective-origin: -200% -200%;
+}
+.po200200pos {
+  perspective-origin: 200% 200%;
+}
+.po200200 {
+  perspective-origin: 200% -200%;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 100px;
+  height: 100px;
+  margin: 24px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  backface-visibility: visible;
+  perspective: 300px;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the layout a little nicer */
+section {
+  background-color: #EEE;
+  padding: 10px;
+  font-family: sans-serif;
+  text-align: left;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+```
+
+##### Result
+
+{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}
+
+모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.
+
+## 더 보기
+
+- [Using device orientation with 3D Transforms](/en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms "Using Deviceorientation In 3D Transforms")
diff --git a/files/ko/web/css/display/index.html b/files/ko/web/css/display/index.html
index 73a6545e54..41ebe49019 100644
--- a/files/ko/web/css/display/index.html
+++ b/files/ko/web/css/display/index.html
@@ -9,17 +9,28 @@ tags:
   - display
 translation_of: Web/CSS/display
 ---
+
 <div>{{CSSRef}}</div>
 
-<p class="summary"><strong><code>display</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소를 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">블록과 인라인</a> 요소 중 어느 쪽으로 처리할지와 함께, <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">플로우</a>, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>, <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스</a>처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.</p>
+<p class="summary">
+  <strong><code>display</code></strong> <a href="/ko/docs/Web/CSS">CSS</a> 속성은 요소를
+  <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">블록과 인라인</a> 요소 중 어느 쪽으로 처리할지와 함께,
+  <a href="/ko/docs/Web/CSS/CSS_Flow_Layout">플로우</a>, <a href="/ko/docs/Web/CSS/CSS_Grid_Layout">그리드</a>,
+  <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">플렉스</a>처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.
+</p>
 
-<p class="summary"><code>display</code> 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다. <code>display</code>의 일부 값은 자신만의 명세를 가지고 있습니다. 이 문서의 끝에서 찾을 수 있는 명세표를 참고하세요.</p>
+<p class="summary">
+  <code>display</code> 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은
+  플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다.
+  <code>display</code>의 일부 값은 자신만의 명세를 가지고 있습니다. 이 문서의 끝에서 찾을 수 있는 명세표를 참고하세요.
+</p>
 
 <h2 id="구문">구문</h2>
 
 <p><code>display</code> 속성은 키워드 값을 사용해 지정합니다. 키워드는 6개의 카테고리로 분류할 수 있습니다.</p>
 
-<pre>.container {
+<pre>
+.container {
   display: &lt;display-keyword&gt;;
 }
 </pre>
@@ -27,193 +38,532 @@ translation_of: Web/CSS/display
 <h3 id="바깥쪽">바깥쪽</h3>
 
 <dl>
- <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
- <dd>요소의 외부 디스플레이 유형을 설정하는 키워드입니다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과 마찬가지입니다.</dd>
+  <dt>{{CSSxRef("&lt;display-outside&gt;")}}</dt>
+  <dd>
+    <p>
+      요소의 외부 디스플레이 유형을 설정하는 키워드입니다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과
+      마찬가지입니다.
+    </p>
+    <dl>
+      <dt><code>block</code></dt>
+      <dd>
+        <p>
+          The element generates a block element box, generating line breaks both before and after the element when in
+          the normal flow.
+        </p>
+      </dd>
+      <dt><code>inline</code></dt>
+      <dd>
+        <p>
+          The element generates one or more inline element boxes that do not generate line breaks before or after
+          themselves. In normal flow, the next element will be on the same line if there is space
+        </p>
+      </dd>
+    </dl>
+  </dd>
 </dl>
-
-<p>{{page("/ko/docs/Web/CSS/display-outside", "Syntax")}}</p>
+<div class="notecard note">
+  <p>
+    <strong>Note:</strong> Browsers that support the two-value syntax, on finding the outer value only, such as when
+    <code>display: block</code> or <code>display: inline</code> is specified, will set the inner value to
+    <code>flow</code>. This will result in expected behavior; for example, if you specify an element to be block, you
+    would expect that the children of that element would participate in block and inline normal flow layout.
+  </p>
+</div>
 
 <h3 id="안쪽">안쪽</h3>
 
 <dl>
- <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
- <dd>요소의 내부 디스플레이 유형을 설정하는 키워드입니다. 내부 디스플레이 유형은 대체 요소가 아닌 요소의 콘텐츠 서식과 배치 방법을 나타냅니다.</dd>
+  <dt>{{CSSxRef("&lt;display-inside&gt;")}}</dt>
+  <dd>
+    <p>
+      요소의 내부 디스플레이 유형을 설정하는 키워드입니다. 내부 디스플레이 유형은 대체 요소가 아닌 요소의 콘텐츠 서식과
+      배치 방법을 나타냅니다.
+    </p>
+    <dl>
+      <dt><code>flow</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>The element lays out its contents using flow layout (block-and-inline layout).</p>
+        <p>
+          If its outer display type is <code>inline</code> or <code>run-in</code>, and it is participating in a block or
+          inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
+        </p>
+        <p>
+          Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or
+          {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it
+          either establishes a new
+          <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> (BFC) for its contents
+          or integrates its contents into its parent formatting context.
+        </p>
+      </dd>
+      <dt><code>flow-root</code></dt>
+      <dd>
+        <p>
+          The element generates a block element box that establishes a new
+          <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a>, defining where the
+          formatting root lies.
+        </p>
+      </dd>
+      <dt><code>table</code></dt>
+      <dd>
+        <p>These elements behave like HTML {{HTMLElement("table")}} elements. It defines a block-level box.</p>
+      </dd>
+      <dt><code>flex</code></dt>
+      <dd>
+        <p>
+          The element behaves like a block element and lays out its content according to the
+          <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox model</a>.
+        </p>
+      </dd>
+      <dt><code>grid</code></dt>
+      <dd>
+        <p>
+          The element behaves like a block element and lays out its content according to the
+          <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">grid model</a>.
+        </p>
+      </dd>
+      <dt><code>ruby</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>
+          The element behaves like an inline element and lays out its content according to the ruby formatting model. It
+          behaves like the corresponding HTML {{HTMLElement("ruby")}} elements.
+        </p>
+      </dd>
+    </dl>
+  </dd>
 </dl>
-
-<p>{{page("/ko/docs/Web/CSS/display-inside", "Syntax")}}</p>
+<div class="notecard note">
+  <p>
+    <strong>Note:</strong> Browsers that support the two-value syntax, on finding the inner value only, such as when
+    <code>display: flex</code> or <code>display: grid</code> is specified, will set their outer value to
+    <code>block</code>. This will result in expected behavior; for example, if you specify an element to be
+    <code>display: grid</code>, you would expect that the box created on the grid container would be a block-level box.
+  </p>
+</div>
 
 <h3 id="리스트_아이템">리스트 아이템</h3>
 
 <dl>
- <dt>{{cssxref("&lt;display-listitem&gt;")}}</dt>
- <dd>요소가 콘텐츠 블록 박스를 생성하고, 리스트 아이템 인라인 박스를 분리합니다.</dd>
+  <dt>{{cssxref("&lt;display-listitem&gt;")}}</dt>
+  <dd>
+    <p>요소가 콘텐츠 블록 박스를 생성하고, 리스트 아이템 인라인 박스를 분리합니다.</p>
+  </dd>
 </dl>
-
-<p>{{page("/ko/docs/Web/CSS/display-listitem", "Syntax")}}</p>
+<p>
+  A single value of <code>list-item</code> will cause the element to behave like a list item. This can be used together
+  with {{CSSxRef("list-style-type")}} and {{CSSxRef("list-style-position")}}.
+</p>
+<p>
+  <code>list-item</code> can also be combined with any {{CSSxRef("&lt;display-outside&gt;")}} keyword and the
+  <code>flow</code> or <code>flow-root</code> {{CSSxRef("&lt;display-inside&gt;")}} keywords.
+</p>
+<div class="notecard note">
+  <p>
+    <strong>Note:</strong> In browsers that support the two-value syntax, if no inner value is specified, it will
+    default to <code>flow</code>. If no outer value is specified, the principal box will have an outer display type of
+    <code>block</code>.
+  </p>
+</div>
 
 <h3 id="내부적">내부적</h3>
 
 <dl>
- <dt>{{cssxref("&lt;display-internal&gt;")}}</dt>
- <dd><code>table</code>, <code>ruby</code> 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 자식과 자손이 채워넣을 여러가지 역할을 지닙니다. 이 항목은 그런 특정 레이아웃 모드에서만 의미를 갖는 "내부적"인 값을 정의합니다.</dd>
+  <dt>{{cssxref("&lt;display-internal&gt;")}}</dt>
+  <dd>
+    <p>
+      <code>table</code>, <code>ruby</code> 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 자식과 자손이 채워넣을
+      여러가지 역할을 지닙니다. 이 항목은 그런 특정 레이아웃 모드에서만 의미를 갖는 "내부적"인 값을 정의합니다.
+    </p>
+    <dl>
+      <dt><code>table-row-group</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("tbody")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-header-group</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("thead")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-footer-group</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("tfoot")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-row</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("tr")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-cell</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("td")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-column-group</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("colgroup")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-column</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("col")}} HTML elements.</p>
+      </dd>
+      <dt><code>table-caption</code></dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("caption")}} HTML elements.</p>
+      </dd>
+      <dt><code>ruby-base</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("rb")}} HTML elements.</p>
+      </dd>
+      <dt><code>ruby-text</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("rt")}} HTML elements.</p>
+      </dd>
+      <dt><code>ruby-base-container</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("rbc")}} HTML elements generated as anonymous boxes.</p>
+      </dd>
+      <dt><code>ruby-text-container</code> {{Experimental_Inline}}</dt>
+      <dd>
+        <p>These elements behave like {{HTMLElement("rtc")}} HTML elements.</p>
+      </dd>
+    </dl>
+  </dd>
 </dl>
 
-<p>{{page("/ko/docs/Web/CSS/display-internal", "Syntax")}}</p>
-
 <h3 id="박스">박스</h3>
 
 <dl>
- <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
- <dd>요소의 디스플레이 박스를 생성해야 하는지 지정합니다.</dd>
+  <dt>{{CSSxRef("&lt;display-box&gt;")}}</dt>
+  <dd>
+    <p>요소의 디스플레이 박스를 생성해야 하는지 지정합니다.</p>
+    <dl>
+      <dt><code>contents</code></dt>
+      <dd>
+        <p>
+          These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their
+          child boxes. Please note that the CSS Display Level 3 spec defines how the <code>contents</code> value should
+          affect "unusual elements" — elements that aren't rendered purely by CSS box concepts such as replaced
+          elements. See
+          <a href="https://drafts.csswg.org/css-display/#unbox"
+            >Appendix B: Effects of display: contents on Unusual Elements</a
+          >
+          for more details.
+        </p>
+        <p>
+          <em
+            >Due to a bug in browsers, this will currently remove the element from the accessibility tree — screen
+            readers will not look at what's inside. See the
+            <a href="#accessibility_concerns">Accessibility concerns</a> section below for more details.</em
+          >
+        </p>
+      </dd>
+      <dt><code>none</code></dt>
+      <dd>
+        <p>
+          Turns off the display of an element so that it has no effect on layout (the document is rendered as though the
+          element did not exist). All descendant elements also have their display turned off. To have an element take up
+          the space that it would normally take, but without actually rendering anything, use the
+          {{CSSxRef("visibility")}} property instead.
+        </p>
+      </dd>
+    </dl>
+  </dd>
 </dl>
 
-<p>{{page("/ko/docs/Web/CSS/display-box", "Syntax")}}</p>
-
 <h3 id="레거시">레거시</h3>
 
 <dl>
- <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
- <dd>CSS 2는 <code>display</code> 속성에 단일 키워드만 사용했으므로, 같은 레이아웃 모드를 위해 블록 레벨과 인라인 레벨 키워드를 각각 필요로 했습니다.</dd>
+  <dt>{{CSSxRef("&lt;display-legacy&gt;")}}</dt>
+  <dd>
+    <p>
+      CSS 2는 <code>display</code> 속성에 단일 키워드만 사용했으므로, 같은 레이아웃 모드를 위해 블록 레벨과 인라인 레벨
+      키워드를 각각 필요로 했습니다.
+    </p>
+    <dl>
+      <dt><code>inline-block</code></dt>
+      <dd>
+        <p>
+          The element generates a block element box that will be flowed with surrounding content as if it were a single
+          inline box (behaving much like a replaced element would).
+        </p>
+        <p>It is equivalent to <code>inline flow-root</code>.</p>
+      </dd>
+      <dt><code>inline-table</code></dt>
+      <dd>
+        <p>
+          The <code>inline-table</code> value does not have a direct mapping in HTML. It behaves like an HTML
+          {{HTMLElement("table")}} element, but as an inline box, rather than a block-level box. Inside the table box is
+          a block-level context.
+        </p>
+        <p>It is equivalent to <code>inline table</code>.</p>
+      </dd>
+      <dt><code>inline-flex</code></dt>
+      <dd>
+        <p>The element behaves like an inline element and lays out its content according to the flexbox model.</p>
+        <p>It is equivalent to <code>inline flex</code>.</p>
+      </dd>
+      <dt><code>inline-grid</code></dt>
+      <dd>
+        <p>The element behaves like an inline element and lays out its content according to the grid model.</p>
+        <p>It is equivalent to <code>inline grid</code>.</p>
+      </dd>
+    </dl>
+  </dd>
 </dl>
 
-<p>{{page("/ko/docs/Web/CSS/display-legacy", "Syntax")}}</p>
-
-<p>The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.</p>
-
-<p>The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:</p>
-
-<pre class="brush: css">.container {
+<h3>Which syntax should you use now?</h3>
+<p>
+  The Level 3 specification details two values for the <code>display</code> property — enabling the specification of the
+  outer and inner display type explicitly — but this is not yet well-supported by browsers.
+</p>
+<p>
+  The <code>&#x3C;display-legacy></code> methods allow the same results with single keyword values, and should be
+  favoured by developers until the two keyword values are better supported. For example, using two values you might
+  specify an inline flex container as follows:
+</p>
+<pre class="brush: css">
+.container {
   display: inline flex;
-}</pre>
-
+}
+</pre>
 <p>This can currently be specified using a single value.</p>
-
-<pre class="brush: css">.container {
+<pre class="brush: css">
+.container {
   display: inline-flex;
 }
 </pre>
-
-<h3 id="전역">전역</h3>
-
-<pre class="brush: css">display: inherit;
+<p>
+  For more information on these changes to the specification, see the article
+  <a href="/ko/docs/Web/CSS/display/two-value_syntax_of_display">Adapting to the new two-value syntax of display</a>.
+</p>
+<h3>Global</h3>
+<pre class="brush: css">
+/* Global values */
+display: inherit;
 display: initial;
 display: unset;
 </pre>
 
 <h2 id="안내서_및_예제">안내서 및 예제</h2>
 
-<p>The individual pages for the different types of value that <code>display</code> can have set on it feature multiple examples of those values in action — see the {{anch("Syntax")}} section. In addition, see the following material, which covers the various values of display in depth.</p>
+<p>
+  The individual pages for the different types of value that <code>display</code> can have set on it feature multiple
+  examples of those values in action — see the {{anch("Syntax")}} section. In addition, see the following material,
+  which covers the various values of display in depth.
+</p>
 
-<h3 id="CSS_Flow_Layout_display_block_display_inline">CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)</h3>
+<h3 id="CSS_Flow_Layout_display_block_display_inline">
+  CSS Flow Layout (<code>display: block</code>, <code>display: inline</code>)
+</h3>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow"
+      >Block and Inline Layout in Normal Flow</a
+    >
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
 </ul>
 
 <h3 id="display_flex"><code>display: flex</code></h3>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of Flex Items Along the Main Axis</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering Wrapping of Flex Items</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relationship of flexbox to other layout methods</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Backwards Compatibility of Flexbox</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic concepts of flexbox</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"
+      >Aligning Items in a Flex Container</a
+    >
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax"
+      >Controlling Ratios of Flex Items Along the Main Axis</a
+    >
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items"
+      >Mastering Wrapping of Flex Items</a
+    >
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordering Flex Items</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods"
+      >Relationship of flexbox to other layout methods</a
+    >
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox"
+      >Backwards Compatibility of Flexbox</a
+    >
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of Flexbox</a>
+  </li>
 </ul>
 
 <h3 id="display_grid"><code>display: grid</code></h3>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic Concepts of Grid Layout</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a>
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a>
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes"
+      >Grids, logical values and writing modes</a
+    >
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a>
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement"
+      >CSS Grid Layout and Progressive Enhancement</a
+    >
+  </li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout"
+      >Realizing common layouts using grids</a
+    >
+  </li>
 </ul>
 
 <h2 id="접근성_고려사항">접근성 고려사항</h2>
 
 <h3 id="display_none"><code>display: none</code></h3>
 
-<p>Using a <code>display</code> value of <code>none</code> on an element will remove it from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.</p>
+<p>
+  Using a <code>display</code> value of <code>none</code> on an element will remove it from the
+  <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will
+  cause the element and all its descendant elements to no longer be announced by screen reading technology.
+</p>
 
-<p>If you want to visually hide the element, a more accessible alternative is to use <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">a combination of properties</a> to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.</p>
+<p>
+  If you want to visually hide the element, a more accessible alternative is to use
+  <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link"
+    >a combination of properties</a
+  >
+  to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
+</p>
 
 <h3 id="display_contents"><code>display: contents</code></h3>
 
-<p>Current implementations in most browsers will remove from the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> any element with a <code>display</code> value of <code>contents</code> (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS specification</a>.</p>
+<p>
+  Current implementations in most browsers will remove from the
+  <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a> any element
+  with a <code>display</code> value of <code>contents</code> (but descendants will remain). This will cause the element
+  itself to no longer be announced by screen reading technology. This is incorrect behavior according to the
+  <a href="https://drafts.csswg.org/css-display/#valdef-display-contents">CSS specification</a>.
+</p>
 
 <ul>
- <li><a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents">More accessible markup with display: contents | Hidde de Vries</a></li>
- <li><a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html">Display: Contents Is Not a CSS Reset | Adrian Roselli</a></li>
+  <li>
+    <a class="external" href="https://hiddedevries.nl/en/blog/2018-04-21-more-accessible-markup-with-display-contents"
+      >More accessible markup with display: contents | Hidde de Vries</a
+    >
+  </li>
+  <li>
+    <a class="external" href="http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html"
+      >Display: Contents Is Not a CSS Reset | Adrian Roselli</a
+    >
+  </li>
 </ul>
 
 <h3 id="Tables">Tables</h3>
 
-<p>Changing the <code>display</code> value of a {{HTMLElement("table")}} element to <code>block</code>, <code>grid</code>, or <code>flex</code> will alter its representation in the <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will cause the table to no longer be announced properly by screen reading technology.</p>
+<p>
+  Changing the <code>display</code> value of a {{HTMLElement("table")}} element to <code>block</code>,
+  <code>grid</code>, or <code>flex</code> will alter its representation in the
+  <a href="/ko/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">accessibility tree</a>. This will
+  cause the table to no longer be announced properly by screen reading technology.
+</p>
 
 <ul>
- <li><a class="external" href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/">Short note on what CSS display properties do to table semantics — The Paciello Group</a></li>
- <li><a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
- <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways">MDN Understanding WCAG, Guideline 1.3 explanations</a></li>
- <li><a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a></li>
+  <li>
+    <a
+      class="external"
+      href="https://developer.paciellogroup.com/blog/2018/03/short-note-on-what-css-display-properties-do-to-table-semantics/"
+      >Short note on what CSS display properties do to table semantics — The Paciello Group</a
+    >
+  </li>
+  <li>
+    <a class="external" href="https://gomakethings.com/hidden-content-for-better-a11y/"
+      >Hidden content for better a11y | Go Make Things</a
+    >
+  </li>
+  <li>
+    <a
+      href="/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways"
+      >MDN Understanding WCAG, Guideline 1.3 explanations</a
+    >
+  </li>
+  <li>
+    <a class="external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"
+      >Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</a
+    >
+  </li>
 </ul>
 
 <h2 id="Specifications" name="Specifications">명세</h2>
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
-   <td>{{Spec2('CSS3 Display')}}</td>
-   <td>Added <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, and multi-keyword values.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
-   <td>{{Spec2('CSS3 Ruby')}}</td>
-   <td>Added <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and <code>ruby-text-container</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
-   <td>{{Spec2('CSS3 Grid')}}</td>
-   <td>Added the grid box model values.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>Added the flexible box model values.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>Added the table model values and <code>inline-block<em>.</em></code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#display', 'display')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and <code>list-item</code>.</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Specification</th>
+      <th scope="col">Status</th>
+      <th scope="col">Comment</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}</td>
+      <td>{{Spec2('CSS3 Display')}}</td>
+      <td>
+        Added <code>run-in</code>, <code>flow</code>, <code>flow-root</code>, <code>contents</code>, and multi-keyword
+        values.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}</td>
+      <td>{{Spec2('CSS3 Ruby')}}</td>
+      <td>
+        Added <code>ruby</code>, <code>ruby-base</code>, <code>ruby-text</code>, <code>ruby-base-container</code>, and
+        <code>ruby-text-container</code>.
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}</td>
+      <td>{{Spec2('CSS3 Grid')}}</td>
+      <td>Added the grid box model values.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}</td>
+      <td>{{Spec2('CSS3 Flexbox')}}</td>
+      <td>Added the flexible box model values.</td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}</td>
+      <td>{{Spec2('CSS2.1')}}</td>
+      <td>
+        Added the table model values and <code>inline-block<em>.</em></code>
+      </td>
+    </tr>
+    <tr>
+      <td>{{SpecName('CSS1', '#display', 'display')}}</td>
+      <td>{{Spec2('CSS1')}}</td>
+      <td>
+        Initial definition. Basic values: <code>none</code>, <code>block</code>, <code>inline</code>, and
+        <code>list-item</code>.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
 <p>{{cssinfo}}</p>
@@ -225,8 +575,12 @@ display: unset;
 <h2 id="같이_보기">같이 보기</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
- <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
- <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
+  <li>
+    <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow"
+      >Block and Inline Layout in Normal Flow</a
+    >
+  </li>
+  <li><a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting contexts explained</a></li>
+  <li>{{CSSxRef("visibility")}}, {{CSSxRef("float")}}, {{CSSxRef("position")}}</li>
+  <li>{{CSSxRef("grid")}}, {{CSSxRef("flex")}}</li>
 </ul>
diff --git a/files/ko/web/html/element/input/date/index.html b/files/ko/web/html/element/input/date/index.html
index 8a40c3cc75..79fae01f34 100644
--- a/files/ko/web/html/element/input/date/index.html
+++ b/files/ko/web/html/element/input/date/index.html
@@ -124,11 +124,17 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestam
 
 <h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
 
-<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<code>{{anch("min")}}</code> if specified, {{htmlattrxref("value", "input")}} otherwise, and an appropriate default value if neither of those is provided) are valid.</p>
+
+<p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <code>{{anch("min")}}</code> and <code>{{anch("max")}}</code>).</p>
+
+<div class="note notecard">
+<p><strong>참고:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the {{Glossary("user agent")}} may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p>
+</div>
 
 <p><code>date</code> 입력 칸의 <code>step</code> 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ <code>step</code>로 처리합니다. 기본값은 1로, 하루를 나타냅니다.</p>
 
-<div class="blockIndicator note">
+<div class="note notecard">
 <p><strong>참고:</strong> <code>date</code> 입력 칸에서 <code>step</code>의 값으로 <code>any</code>를 지정하면 <code>1</code>과 같습니다.</p>
 </div>
 
diff --git a/files/ko/web/html/element/input/index.html b/files/ko/web/html/element/input/index.html
index 8ff435e12d..aae4e879d9 100644
--- a/files/ko/web/html/element/input/index.html
+++ b/files/ko/web/html/element/input/index.html
@@ -756,60 +756,6 @@ let hatSize = form.elements["hat-size"];
  </dd>
 </dl>
 
-<h3 id="Non-standard_attributes">Non-standard attributes</h3>
-
-<p>The following non-standard attributes are also available on some browsers. As a general rule, you should avoid using them unless it can't be helped.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribute</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>A string indicating whether or not autocorrect is <code>on</code> or <code>off</code>. <strong>Safari only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("incremental")}}</code></td>
-   <td>Whether or not to send repeated {{event("search")}} events to allow updating live search results while the user is still editing the value of the field. <strong>WebKit and Blink only (Safari, Chrome, Opera, etc.).</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>A string indicating the type of action that will be taken when the user presses the <kbd>Enter</kbd> or <kbd>Return</kbd> key while editing the field; this is used to determine an appropriate label for that key on a virtual keyboard. <strong>Firefox for Android only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("orient")}}</code></td>
-   <td>Sets the orientation of the range slider. <strong>Firefox only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("results")}}</code></td>
-   <td>The maximum number of items that should be displayed in the drop-down list of previous search queries. <strong>Safari only.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("webkitdirectory")}}</code></td>
-   <td>A Boolean indicating whether or not to only allow the user to choose a directory (or directories, if <code>{{anch("multiple")}}</code> is also present)</td>
-  </tr>
- </tbody>
-</table>
-
-<dl>
- <dt>{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</dd>
- <dt>{{htmlattrdef("incremental")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "incremental-include")}}</dd>
- <dt>{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</dd>
- <dt>{{htmlattrdef("orient")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/range", "orient-include")}}</dd>
- <dt>{{htmlattrdef("results")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/search", "results-include")}}</dd>
- <dt>{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</dt>
- <dd>{{page("/en-US/docs/Web/HTML/Element/input/file", "webkitdirectory-include")}}</dd>
-</dl>
-
 <h2 id="예제">예제</h2>
 
 <h3 id="A_simple_input_box">A simple input box</h3>
diff --git a/files/ko/web/html/element/track/index.html b/files/ko/web/html/element/track/index.html
index 9ac120629d..cb391ba9f6 100644
--- a/files/ko/web/html/element/track/index.html
+++ b/files/ko/web/html/element/track/index.html
@@ -107,11 +107,15 @@ translation_of: Web/HTML/Element/track
 
 <p>미디어 요소는 동일한 <code>kind</code>, <code>srclang</code>, <code>label</code>을 가진 <code>&lt;track&gt;</code>을 하나보다 많이 포함할 수 없습니다.</p>
 
-<div class="hidden">
-<h3 id="Detecting_cue_changes">Detecting cue changes</h3>
-
-<p>{{page("/en-US/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
-</div>
+<h3 id="detecting_cue_changes">Detecting cue changes</h3>
+<p>The underlying {{domxref("TextTrack")}}, indicated by the {{domxref("HTMLTrackElement.track", "track")}} property, receives a <code>cuechange</code> event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.</p>
+<p>If the track <em>is</em> associated with a media element, using the {{HTMLElement("track")}} element as a child of the {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, the <code>cuechange</code> event is also sent to the {{domxref("HTMLTrackElement")}}.</p>
+<pre class="brush: js">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", event => {
+  let cues = event.target.track.activeCues;
+});
+</pre>
 
 <h2 id="예제">예제</h2>
 
diff --git a/files/ko/web/http/headers/content-security-policy/img-src/index.html b/files/ko/web/http/headers/content-security-policy/img-src/index.html
index 6bd205e5f4..c9c47fa769 100644
--- a/files/ko/web/http/headers/content-security-policy/img-src/index.html
+++ b/files/ko/web/http/headers/content-security-policy/img-src/index.html
@@ -34,7 +34,9 @@ Content-Security-Policy: img-src &lt;source&gt; &lt;source&gt;;
 
 <h3 id="Sources">Sources</h3>
 
-<p>{{page("Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+<p><code>&lt;source&gt;</code> can be any one of the values listed in <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources">CSP Source Values</a>.</p>
+
+<p>Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives">number of other directives</a>).</p>
 
 <h2 id="Examples">Examples</h2>
 
diff --git a/files/ko/web/http/headers/content-security-policy/script-src/index.html b/files/ko/web/http/headers/content-security-policy/script-src/index.html
index 766043ee67..9cfba52f56 100644
--- a/files/ko/web/http/headers/content-security-policy/script-src/index.html
+++ b/files/ko/web/http/headers/content-security-policy/script-src/index.html
@@ -34,12 +34,9 @@ Content-Security-Policy: script-src &lt;source&gt; &lt;source&gt;;
 
 <h3 id="Sources">Sources</h3>
 
-<p>{{page("Web/HTTP/Headers/Content-Security-Policy/default-src", "Sources")}}</p>
+<p><code>&lt;source&gt;</code> can be any one of the values listed in <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources">CSP Source Values</a>.</p>
 
-<dl>
- <dt>'report-sample'</dt>
- <dd> Report에 위반 코드 샘플을 포함시키려면 이 항목을 추가 해야 합니다.</dd>
-</dl>
+<p>Note that this same set of values can be used in all {{Glossary("fetch directive", "fetch directives")}} (and a <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#relevant_directives">number of other directives</a>).</p>
 
 <h2 id="예제">예제</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From a563c63f0989551bffcbbc8a8b1534747524e4fd Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 11 Mar 2022 18:47:52 +0100
Subject: fix live sample by removing title/id guessing (#4551)

---
 files/fr/web/css/blend-mode/index.md | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/files/fr/web/css/blend-mode/index.md b/files/fr/web/css/blend-mode/index.md
index 206ef8ee2f..0adf5904a3 100644
--- a/files/fr/web/css/blend-mode/index.md
+++ b/files/fr/web/css/blend-mode/index.md
@@ -72,7 +72,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('normal', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### multiply
 
@@ -90,7 +90,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('multiply', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### screen
 
@@ -108,7 +108,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('screen', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### overlay
 
@@ -126,7 +126,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('overlay', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### darken
 
@@ -144,7 +144,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('darken', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### lighten
 
@@ -162,7 +162,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('lighten', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### color-dodge
 
@@ -180,7 +180,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('color-dodge', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### color-burn
 
@@ -198,7 +198,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('color-burn', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### hard-light
 
@@ -216,7 +216,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('hard-light', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### soft-light
 
@@ -234,7 +234,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('soft-light', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### difference
 
@@ -252,7 +252,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('difference', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### exclusion
 
@@ -270,7 +270,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('exclusion', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### hue
 
@@ -288,7 +288,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('hue', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### saturation
 
@@ -306,7 +306,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('saturation', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### color
 
@@ -324,7 +324,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('color', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ### luminosity
 
@@ -342,7 +342,7 @@ Une valeur de type de données `<blend-mode>` s'écrit avec l'un des mots-clés
 }
 ```
 
-{{ EmbedLiveSample('luminosity', "300", "350") }}
+{{ EmbedLiveSample('', "300", "350") }}
 
 ## L'interpolation des modes de fusion
 
-- 
cgit v1.2.3-54-g00ecf


From c19f033e0b60ae59dd2750c3ce85576c2db5a6ba Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 11 Mar 2022 19:35:34 +0100
Subject: cleaning duplicated files (#4549)

---
 .../advanced_styling_effects/colorful-heart.png         | Bin 23396 -> 0 bytes
 .../css/styling_text/styling_links/external-link-52.png | Bin 532 -> 0 bytes
 .../tutorial/basic_animations/canvas_earth.png          | Bin 1612 -> 0 bytes
 .../tutorial/basic_animations/canvas_moon.png           | Bin 278 -> 0 bytes
 .../canvas_api/tutorial/basic_animations/canvas_sun.png | Bin 7015 -> 0 bytes
 .../capitan_meadows_yosemite_national_park.jpg          | Bin 47523 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/backdrop.png   | Bin 1126 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/bg_gallery.png | Bin 2318 -> 0 bytes
 .../tutorial/using_images/canvas_backdrop.png           | Bin 2119 -> 0 bytes
 .../tutorial/using_images/canvas_drawimage.jpg          | Bin 9709 -> 0 bytes
 .../tutorial/using_images/canvas_drawimage2.jpg         | Bin 7136 -> 0 bytes
 .../tutorial/using_images/canvas_scale_image.png        | Bin 3724 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_1.jpg  | Bin 3575 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_2.jpg  | Bin 2341 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_3.jpg  | Bin 3728 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_4.jpg  | Bin 3340 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_5.jpg  | Bin 4729 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_6.jpg  | Bin 3732 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_7.jpg  | Bin 4362 -> 0 bytes
 .../api/canvas_api/tutorial/using_images/gallery_8.jpg  | Bin 3995 -> 0 bytes
 .../web/api/canvas_api/tutorial/using_images/rhino.jpg  | Bin 17994 -> 0 bytes
 files/fr/web/css/blend-mode/br.png                      | Bin 394 -> 0 bytes
 files/fr/web/css/blend-mode/tr.png                      | Bin 395 -> 0 bytes
 files/fr/web/css/filter/test_form.jpg                   | Bin 12922 -> 0 bytes
 files/fr/web/css/filter/test_form_12.jpeg               | Bin 9483 -> 0 bytes
 files/fr/web/css/filter/test_form_12_s.jpg              | Bin 10504 -> 0 bytes
 files/fr/web/css/filter/test_form_14.jpeg               | Bin 9067 -> 0 bytes
 files/fr/web/css/filter/test_form_14_s.jpg              | Bin 7119 -> 0 bytes
 files/fr/web/css/filter/test_form_2.jpeg                | Bin 7932 -> 0 bytes
 files/fr/web/css/filter/test_form_2_s.jpg               | Bin 3145 -> 0 bytes
 files/fr/web/css/filter/test_form_3.jpeg                | Bin 5319 -> 0 bytes
 files/fr/web/css/filter/test_form_3_s.jpg               | Bin 7580 -> 0 bytes
 files/fr/web/css/filter/test_form_4.jpeg                | Bin 5673 -> 0 bytes
 .../test_form_4_irregular-shape_opacity-gradient.png    | Bin 16541 -> 0 bytes
 ...m_4_irregular-shape_opacity-gradient_drop-shadow.png | Bin 17091 -> 0 bytes
 files/fr/web/css/filter/test_form_4_s.jpg               | Bin 7908 -> 0 bytes
 files/fr/web/css/filter/test_form_5.jpeg                | Bin 8746 -> 0 bytes
 files/fr/web/css/filter/test_form_5_s.jpg               | Bin 9049 -> 0 bytes
 files/fr/web/css/filter/test_form_6.jpeg                | Bin 7194 -> 0 bytes
 files/fr/web/css/filter/test_form_6_s.jpg               | Bin 8209 -> 0 bytes
 files/fr/web/css/filter/test_form_7.jpeg                | Bin 10319 -> 0 bytes
 files/fr/web/css/filter/test_form_7_s.jpg               | Bin 10527 -> 0 bytes
 files/fr/web/css/filter/test_form_8.jpeg                | Bin 4097 -> 0 bytes
 files/fr/web/css/filter/test_form_8_s.jpg               | Bin 5447 -> 0 bytes
 files/fr/web/css/filter/test_form_9.jpeg                | Bin 6717 -> 0 bytes
 files/fr/web/css/filter/test_form_9_s.jpg               | Bin 7195 -> 0 bytes
 files/fr/web/css/filter/test_form_s.jpg                 | Bin 5887 -> 0 bytes
 files/fr/web/css/list-style-position/starsolid.gif      | Bin 272 -> 0 bytes
 files/fr/web/html/element/figure/favicon-192x192.png    | Bin 1036 -> 0 bytes
 files/fr/web/html/element/img/clock-demo-400px.png      | Bin 90575 -> 0 bytes
 files/fr/web/html/element/img/favicon144.png            | Bin 3086 -> 0 bytes
 files/fr/web/html/element/img/favicon72.png             | Bin 2061 -> 0 bytes
 52 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png
 delete mode 100644 files/fr/learn/css/styling_text/styling_links/external-link-52.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg
 delete mode 100644 files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg
 delete mode 100644 files/fr/web/css/blend-mode/br.png
 delete mode 100644 files/fr/web/css/blend-mode/tr.png
 delete mode 100644 files/fr/web/css/filter/test_form.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_12.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_12_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_14.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_14_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_2.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_2_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_3.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_3_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_4.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png
 delete mode 100644 files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png
 delete mode 100644 files/fr/web/css/filter/test_form_4_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_5.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_5_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_6.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_6_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_7.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_7_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_8.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_8_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_9.jpeg
 delete mode 100644 files/fr/web/css/filter/test_form_9_s.jpg
 delete mode 100644 files/fr/web/css/filter/test_form_s.jpg
 delete mode 100644 files/fr/web/css/list-style-position/starsolid.gif
 delete mode 100644 files/fr/web/html/element/figure/favicon-192x192.png
 delete mode 100644 files/fr/web/html/element/img/clock-demo-400px.png
 delete mode 100644 files/fr/web/html/element/img/favicon144.png
 delete mode 100644 files/fr/web/html/element/img/favicon72.png

diff --git a/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png b/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png
deleted file mode 100644
index 66549ebd58..0000000000
Binary files a/files/fr/learn/css/building_blocks/advanced_styling_effects/colorful-heart.png and /dev/null differ
diff --git a/files/fr/learn/css/styling_text/styling_links/external-link-52.png b/files/fr/learn/css/styling_text/styling_links/external-link-52.png
deleted file mode 100644
index 7a34cff47c..0000000000
Binary files a/files/fr/learn/css/styling_text/styling_links/external-link-52.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png
deleted file mode 100644
index 21d5fe5c20..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_earth.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png
deleted file mode 100644
index 440da59034..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_moon.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png b/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png
deleted file mode 100644
index 016c9add25..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/basic_animations/canvas_sun.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg b/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg
deleted file mode 100644
index e7ba963f64..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/basic_animations/capitan_meadows_yosemite_national_park.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png
deleted file mode 100644
index 01d35419b2..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/backdrop.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png b/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png
deleted file mode 100644
index cd936a30a1..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/bg_gallery.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png
deleted file mode 100644
index 091505b1b9..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_backdrop.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg
deleted file mode 100644
index 5790de338d..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg
deleted file mode 100644
index 0267621028..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_drawimage2.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png b/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png
deleted file mode 100644
index 3258cf3684..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/canvas_scale_image.png and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg
deleted file mode 100644
index 55f1cee446..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_1.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg
deleted file mode 100644
index 711911f12c..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_2.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg
deleted file mode 100644
index 5b4bb37ac1..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_3.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg
deleted file mode 100644
index 86db3eb243..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_4.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg
deleted file mode 100644
index 01f9e44f3d..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_5.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg
deleted file mode 100644
index fbec8abd8c..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_6.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg
deleted file mode 100644
index 719a55117f..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_7.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg
deleted file mode 100644
index 46d1afa954..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/gallery_8.jpg and /dev/null differ
diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg b/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg
deleted file mode 100644
index 0b4b45c4fa..0000000000
Binary files a/files/fr/web/api/canvas_api/tutorial/using_images/rhino.jpg and /dev/null differ
diff --git a/files/fr/web/css/blend-mode/br.png b/files/fr/web/css/blend-mode/br.png
deleted file mode 100644
index 99477b2318..0000000000
Binary files a/files/fr/web/css/blend-mode/br.png and /dev/null differ
diff --git a/files/fr/web/css/blend-mode/tr.png b/files/fr/web/css/blend-mode/tr.png
deleted file mode 100644
index a6e0f81eaf..0000000000
Binary files a/files/fr/web/css/blend-mode/tr.png and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form.jpg b/files/fr/web/css/filter/test_form.jpg
deleted file mode 100644
index 058841c04a..0000000000
Binary files a/files/fr/web/css/filter/test_form.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_12.jpeg b/files/fr/web/css/filter/test_form_12.jpeg
deleted file mode 100644
index 6089a9ea41..0000000000
Binary files a/files/fr/web/css/filter/test_form_12.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_12_s.jpg b/files/fr/web/css/filter/test_form_12_s.jpg
deleted file mode 100644
index 504208fa3e..0000000000
Binary files a/files/fr/web/css/filter/test_form_12_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_14.jpeg b/files/fr/web/css/filter/test_form_14.jpeg
deleted file mode 100644
index e7574e0000..0000000000
Binary files a/files/fr/web/css/filter/test_form_14.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_14_s.jpg b/files/fr/web/css/filter/test_form_14_s.jpg
deleted file mode 100644
index 3e56addda4..0000000000
Binary files a/files/fr/web/css/filter/test_form_14_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_2.jpeg b/files/fr/web/css/filter/test_form_2.jpeg
deleted file mode 100644
index af66658d4d..0000000000
Binary files a/files/fr/web/css/filter/test_form_2.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_2_s.jpg b/files/fr/web/css/filter/test_form_2_s.jpg
deleted file mode 100644
index 902d6b7bf7..0000000000
Binary files a/files/fr/web/css/filter/test_form_2_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_3.jpeg b/files/fr/web/css/filter/test_form_3.jpeg
deleted file mode 100644
index 812b6e0642..0000000000
Binary files a/files/fr/web/css/filter/test_form_3.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_3_s.jpg b/files/fr/web/css/filter/test_form_3_s.jpg
deleted file mode 100644
index 0a47dc453a..0000000000
Binary files a/files/fr/web/css/filter/test_form_3_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_4.jpeg b/files/fr/web/css/filter/test_form_4.jpeg
deleted file mode 100644
index 31e0cbf5d4..0000000000
Binary files a/files/fr/web/css/filter/test_form_4.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png b/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png
deleted file mode 100644
index db985e4bf9..0000000000
Binary files a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient.png and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png b/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png
deleted file mode 100644
index f0940b7138..0000000000
Binary files a/files/fr/web/css/filter/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_4_s.jpg b/files/fr/web/css/filter/test_form_4_s.jpg
deleted file mode 100644
index c54746d078..0000000000
Binary files a/files/fr/web/css/filter/test_form_4_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_5.jpeg b/files/fr/web/css/filter/test_form_5.jpeg
deleted file mode 100644
index 9b5c708020..0000000000
Binary files a/files/fr/web/css/filter/test_form_5.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_5_s.jpg b/files/fr/web/css/filter/test_form_5_s.jpg
deleted file mode 100644
index 6233d62a52..0000000000
Binary files a/files/fr/web/css/filter/test_form_5_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_6.jpeg b/files/fr/web/css/filter/test_form_6.jpeg
deleted file mode 100644
index c0d910c87b..0000000000
Binary files a/files/fr/web/css/filter/test_form_6.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_6_s.jpg b/files/fr/web/css/filter/test_form_6_s.jpg
deleted file mode 100644
index a3ee5ba075..0000000000
Binary files a/files/fr/web/css/filter/test_form_6_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_7.jpeg b/files/fr/web/css/filter/test_form_7.jpeg
deleted file mode 100644
index 5dde3ae6a9..0000000000
Binary files a/files/fr/web/css/filter/test_form_7.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_7_s.jpg b/files/fr/web/css/filter/test_form_7_s.jpg
deleted file mode 100644
index 77224ff05c..0000000000
Binary files a/files/fr/web/css/filter/test_form_7_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_8.jpeg b/files/fr/web/css/filter/test_form_8.jpeg
deleted file mode 100644
index 499d89b99e..0000000000
Binary files a/files/fr/web/css/filter/test_form_8.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_8_s.jpg b/files/fr/web/css/filter/test_form_8_s.jpg
deleted file mode 100644
index 98e3146a52..0000000000
Binary files a/files/fr/web/css/filter/test_form_8_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_9.jpeg b/files/fr/web/css/filter/test_form_9.jpeg
deleted file mode 100644
index 5f73c0af10..0000000000
Binary files a/files/fr/web/css/filter/test_form_9.jpeg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_9_s.jpg b/files/fr/web/css/filter/test_form_9_s.jpg
deleted file mode 100644
index ae67b7329b..0000000000
Binary files a/files/fr/web/css/filter/test_form_9_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/filter/test_form_s.jpg b/files/fr/web/css/filter/test_form_s.jpg
deleted file mode 100644
index 361a81b63d..0000000000
Binary files a/files/fr/web/css/filter/test_form_s.jpg and /dev/null differ
diff --git a/files/fr/web/css/list-style-position/starsolid.gif b/files/fr/web/css/list-style-position/starsolid.gif
deleted file mode 100644
index 5508bef9c0..0000000000
Binary files a/files/fr/web/css/list-style-position/starsolid.gif and /dev/null differ
diff --git a/files/fr/web/html/element/figure/favicon-192x192.png b/files/fr/web/html/element/figure/favicon-192x192.png
deleted file mode 100644
index 03de2b5d74..0000000000
Binary files a/files/fr/web/html/element/figure/favicon-192x192.png and /dev/null differ
diff --git a/files/fr/web/html/element/img/clock-demo-400px.png b/files/fr/web/html/element/img/clock-demo-400px.png
deleted file mode 100644
index 999ad528fe..0000000000
Binary files a/files/fr/web/html/element/img/clock-demo-400px.png and /dev/null differ
diff --git a/files/fr/web/html/element/img/favicon144.png b/files/fr/web/html/element/img/favicon144.png
deleted file mode 100644
index e30b574b65..0000000000
Binary files a/files/fr/web/html/element/img/favicon144.png and /dev/null differ
diff --git a/files/fr/web/html/element/img/favicon72.png b/files/fr/web/html/element/img/favicon72.png
deleted file mode 100644
index db68260ca1..0000000000
Binary files a/files/fr/web/html/element/img/favicon72.png and /dev/null differ
-- 
cgit v1.2.3-54-g00ecf


From 6c17e71cc7dc70f7a33c532d29d8b13670cdd729 Mon Sep 17 00:00:00 2001
From: serotonyn <youyou1youcef@gmail.com>
Date: Fri, 11 Mar 2022 22:56:18 +0100
Subject: Fix typo (#4555)

---
 files/fr/web/javascript/guide/working_with_objects/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md
index 214902c6dd..9dbfe909e4 100644
--- a/files/fr/web/javascript/guide/working_with_objects/index.md
+++ b/files/fr/web/javascript/guide/working_with_objects/index.md
@@ -348,7 +348,7 @@ On peut définir des méthodes pour un type d'objet en incluant la définition d
 ```js
 function afficheVoiture() {
   let resultat = `Une belle ${this.modele}, fabriquée en ${this.annee} par ${this.fabricant}`;
-  console.log(résultat);
+  console.log(resultat);
 }
 ```
 
-- 
cgit v1.2.3-54-g00ecf


From ba8d3f6f9d418e3b7fdfe79ccfb6e7a6ffb7f566 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Sat, 12 Mar 2022 00:12:34 +0000
Subject: [CRON] sync translated content

---
 files/de/_redirects.txt                            |   1 +
 files/de/_wikihistory.json                         |  14 +-
 files/de/conflicting/tools/index.html              |  10 ++
 files/de/tools/index/index.html                    |   9 -
 files/es/_redirects.txt                            |   5 +-
 files/es/_wikihistory.json                         |  30 ++--
 files/es/conflicting/web/html/index.html           |   9 +
 files/es/conflicting/web/svg/index.html            |   7 +
 files/es/web/api/eventsource/onopen/index.html     |  52 ------
 files/es/web/api/eventsource/open_event/index.html |  53 ++++++
 files/es/web/html/index/index.html                 |   9 -
 files/es/web/svg/index/index.html                  |   6 -
 files/fr/_redirects.txt                            |  23 ++-
 files/fr/_wikihistory.json                         | 128 +++++++------
 files/fr/conflicting/games/index.md                |  11 ++
 files/fr/conflicting/glossary/index.md             |  11 ++
 files/fr/conflicting/learn/index.md                |  12 ++
 .../mozilla/add-ons/webextensions/index.md         |  11 ++
 files/fr/conflicting/tools/index.html              |   9 +
 files/fr/conflicting/web/html/index.md             |  10 ++
 files/fr/conflicting/web/http/index.md             |  16 ++
 files/fr/conflicting/web/mathml/index.md           |   9 +
 files/fr/conflicting/web/svg/index.md              |   9 +
 files/fr/conflicting/web/xslt/index.md             |   9 +
 files/fr/games/index/index.md                      |  11 --
 files/fr/glossary/index/index.md                   |  11 --
 files/fr/learn/index/index.md                      |  12 --
 .../mozilla/add-ons/webextensions/index/index.md   |  10 --
 files/fr/tools/index/index.html                    |   9 -
 files/fr/web/api/eventsource/onopen/index.md       |  42 -----
 files/fr/web/api/eventsource/open_event/index.md   |  43 +++++
 files/fr/web/html/index/index.md                   |   9 -
 files/fr/web/http/index/index.md                   |  15 --
 files/fr/web/mathml/index/index.md                 |   8 -
 files/fr/web/svg/index/index.md                    |   8 -
 files/fr/web/xslt/index/index.md                   |   9 -
 files/ja/_redirects.txt                            |  21 ++-
 files/ja/_wikihistory.json                         | 200 ++++++++++-----------
 files/ja/conflicting/games/index.html              |  12 ++
 files/ja/conflicting/glossary/index.html           |  12 ++
 files/ja/conflicting/learn/index.html              |  11 ++
 .../mozilla/add-ons/webextensions/index.html       |  15 ++
 files/ja/conflicting/tools/index.html              |  10 ++
 files/ja/conflicting/web/accessibility/index.html  |  12 ++
 files/ja/conflicting/web/guide/index.html          |  12 ++
 files/ja/conflicting/web/html/index.html           |  11 ++
 files/ja/conflicting/web/http/index.html           |  14 ++
 files/ja/conflicting/web/mathml/index.html         |  10 ++
 files/ja/conflicting/web/svg/index.html            |  10 ++
 files/ja/conflicting/web/xpath/index.html          |  16 ++
 files/ja/conflicting/web/xslt/index.html           |  13 ++
 files/ja/conflicting/webassembly/index.html        |  12 ++
 files/ja/games/index/index.html                    |  11 --
 files/ja/glossary/index/index.html                 |  11 --
 files/ja/learn/index/index.html                    |  10 --
 .../mozilla/add-ons/webextensions/index/index.html |  14 --
 files/ja/tools/index/index.html                    |   9 -
 files/ja/web/accessibility/index/index.html        |  11 --
 .../ja/web/api/eventsource/error_event/index.html  |  66 +++++++
 .../web/api/eventsource/message_event/index.html   |  70 ++++++++
 files/ja/web/api/eventsource/onerror/index.html    |  65 -------
 files/ja/web/api/eventsource/onmessage/index.html  |  69 -------
 .../web/api/mediaquerylist/change_event/index.html |  73 ++++++++
 .../ja/web/api/mediaquerylist/onchange/index.html  |  72 --------
 files/ja/web/guide/index/index.html                |  11 --
 files/ja/web/html/index/index.html                 |  10 --
 files/ja/web/http/index/index.html                 |  13 --
 files/ja/web/mathml/index/index.html               |   9 -
 files/ja/web/svg/index/index.html                  |   9 -
 files/ja/web/xpath/index/index.html                |  15 --
 files/ja/web/xslt/index/index.html                 |  12 --
 files/ja/webassembly/index/index.html              |  11 --
 files/ko/_redirects.txt                            |   6 +
 files/ko/_wikihistory.json                         |  75 +++-----
 files/ko/conflicting/games/index.html              |  11 ++
 files/ko/conflicting/glossary/index.html           |  12 ++
 files/ko/conflicting/learn/index.html              |  11 ++
 files/ko/conflicting/web/guide/index.html          |  12 ++
 files/ko/conflicting/web/html/index.html           |  11 ++
 files/ko/conflicting/web/http/index.html           |  12 ++
 files/ko/games/index/index.html                    |  10 --
 files/ko/glossary/index/index.html                 |  11 --
 files/ko/learn/index/index.html                    |  10 --
 files/ko/web/guide/index/index.html                |  11 --
 files/ko/web/html/index/index.html                 |  10 --
 files/ko/web/http/index/index.html                 |  11 --
 files/pt-br/_redirects.txt                         |   1 +
 files/pt-br/_wikihistory.json                      |   2 +-
 .../web/api/eventsource/error_event/index.html     | 122 +++++++++++++
 files/pt-br/web/api/eventsource/onerror/index.html | 121 -------------
 files/ru/_redirects.txt                            |   1 +
 files/ru/_wikihistory.json                         |  16 +-
 files/ru/conflicting/tools/index.html              |   9 +
 files/ru/tools/index/index.html                    |   8 -
 files/zh-cn/_redirects.txt                         |   7 +-
 files/zh-cn/_wikihistory.json                      |  18 +-
 files/zh-cn/conflicting/web/html/index.html        |  10 ++
 .../web/api/eventsource/error_event/index.html     |  56 ++++++
 files/zh-cn/web/api/eventsource/onerror/index.html |  56 ------
 files/zh-cn/web/api/eventsource/onopen/index.html  |  57 ------
 .../web/api/eventsource/open_event/index.html      |  57 ++++++
 files/zh-cn/web/html/index/index.html              |   9 -
 102 files changed, 1215 insertions(+), 1160 deletions(-)
 create mode 100644 files/de/conflicting/tools/index.html
 delete mode 100644 files/de/tools/index/index.html
 create mode 100644 files/es/conflicting/web/html/index.html
 create mode 100644 files/es/conflicting/web/svg/index.html
 delete mode 100644 files/es/web/api/eventsource/onopen/index.html
 create mode 100644 files/es/web/api/eventsource/open_event/index.html
 delete mode 100644 files/es/web/html/index/index.html
 delete mode 100644 files/es/web/svg/index/index.html
 create mode 100644 files/fr/conflicting/games/index.md
 create mode 100644 files/fr/conflicting/glossary/index.md
 create mode 100644 files/fr/conflicting/learn/index.md
 create mode 100644 files/fr/conflicting/mozilla/add-ons/webextensions/index.md
 create mode 100644 files/fr/conflicting/tools/index.html
 create mode 100644 files/fr/conflicting/web/html/index.md
 create mode 100644 files/fr/conflicting/web/http/index.md
 create mode 100644 files/fr/conflicting/web/mathml/index.md
 create mode 100644 files/fr/conflicting/web/svg/index.md
 create mode 100644 files/fr/conflicting/web/xslt/index.md
 delete mode 100644 files/fr/games/index/index.md
 delete mode 100644 files/fr/glossary/index/index.md
 delete mode 100644 files/fr/learn/index/index.md
 delete mode 100644 files/fr/mozilla/add-ons/webextensions/index/index.md
 delete mode 100644 files/fr/tools/index/index.html
 delete mode 100644 files/fr/web/api/eventsource/onopen/index.md
 create mode 100644 files/fr/web/api/eventsource/open_event/index.md
 delete mode 100644 files/fr/web/html/index/index.md
 delete mode 100644 files/fr/web/http/index/index.md
 delete mode 100644 files/fr/web/mathml/index/index.md
 delete mode 100644 files/fr/web/svg/index/index.md
 delete mode 100644 files/fr/web/xslt/index/index.md
 create mode 100644 files/ja/conflicting/games/index.html
 create mode 100644 files/ja/conflicting/glossary/index.html
 create mode 100644 files/ja/conflicting/learn/index.html
 create mode 100644 files/ja/conflicting/mozilla/add-ons/webextensions/index.html
 create mode 100644 files/ja/conflicting/tools/index.html
 create mode 100644 files/ja/conflicting/web/accessibility/index.html
 create mode 100644 files/ja/conflicting/web/guide/index.html
 create mode 100644 files/ja/conflicting/web/html/index.html
 create mode 100644 files/ja/conflicting/web/http/index.html
 create mode 100644 files/ja/conflicting/web/mathml/index.html
 create mode 100644 files/ja/conflicting/web/svg/index.html
 create mode 100644 files/ja/conflicting/web/xpath/index.html
 create mode 100644 files/ja/conflicting/web/xslt/index.html
 create mode 100644 files/ja/conflicting/webassembly/index.html
 delete mode 100644 files/ja/games/index/index.html
 delete mode 100644 files/ja/glossary/index/index.html
 delete mode 100644 files/ja/learn/index/index.html
 delete mode 100644 files/ja/mozilla/add-ons/webextensions/index/index.html
 delete mode 100644 files/ja/tools/index/index.html
 delete mode 100644 files/ja/web/accessibility/index/index.html
 create mode 100644 files/ja/web/api/eventsource/error_event/index.html
 create mode 100644 files/ja/web/api/eventsource/message_event/index.html
 delete mode 100644 files/ja/web/api/eventsource/onerror/index.html
 delete mode 100644 files/ja/web/api/eventsource/onmessage/index.html
 create mode 100644 files/ja/web/api/mediaquerylist/change_event/index.html
 delete mode 100644 files/ja/web/api/mediaquerylist/onchange/index.html
 delete mode 100644 files/ja/web/guide/index/index.html
 delete mode 100644 files/ja/web/html/index/index.html
 delete mode 100644 files/ja/web/http/index/index.html
 delete mode 100644 files/ja/web/mathml/index/index.html
 delete mode 100644 files/ja/web/svg/index/index.html
 delete mode 100644 files/ja/web/xpath/index/index.html
 delete mode 100644 files/ja/web/xslt/index/index.html
 delete mode 100644 files/ja/webassembly/index/index.html
 create mode 100644 files/ko/conflicting/games/index.html
 create mode 100644 files/ko/conflicting/glossary/index.html
 create mode 100644 files/ko/conflicting/learn/index.html
 create mode 100644 files/ko/conflicting/web/guide/index.html
 create mode 100644 files/ko/conflicting/web/html/index.html
 create mode 100644 files/ko/conflicting/web/http/index.html
 delete mode 100644 files/ko/games/index/index.html
 delete mode 100644 files/ko/glossary/index/index.html
 delete mode 100644 files/ko/learn/index/index.html
 delete mode 100644 files/ko/web/guide/index/index.html
 delete mode 100644 files/ko/web/html/index/index.html
 delete mode 100644 files/ko/web/http/index/index.html
 create mode 100644 files/pt-br/web/api/eventsource/error_event/index.html
 delete mode 100644 files/pt-br/web/api/eventsource/onerror/index.html
 create mode 100644 files/ru/conflicting/tools/index.html
 delete mode 100644 files/ru/tools/index/index.html
 create mode 100644 files/zh-cn/conflicting/web/html/index.html
 create mode 100644 files/zh-cn/web/api/eventsource/error_event/index.html
 delete mode 100644 files/zh-cn/web/api/eventsource/onerror/index.html
 delete mode 100644 files/zh-cn/web/api/eventsource/onopen/index.html
 create mode 100644 files/zh-cn/web/api/eventsource/open_event/index.html
 delete mode 100644 files/zh-cn/web/html/index/index.html

diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt
index f6ee4d81d4..0bdaf0f0ef 100644
--- a/files/de/_redirects.txt
+++ b/files/de/_redirects.txt
@@ -406,6 +406,7 @@
 /de/docs/Tools/3D_untersuchung	/de/docs/Tools/3D_View
 /de/docs/Tools/Barrierefreiheits_inspektor	/de/docs/Tools/Accessibility_inspector
 /de/docs/Tools/Browser_Werkzeuge	/de/docs/Tools/Browser_Toolbox
+/de/docs/Tools/Index	/de/docs/conflicting/Tools
 /de/docs/Tools/Page_Inspector/How_to/Event_Listener_untersuchen	/de/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
 /de/docs/Tools/Page_Inspector/How_to/Raster_Layout_untersuchen	/de/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
 /de/docs/Tools/Seiten_Inspektor	/de/docs/Tools/Page_Inspector
diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json
index 544d6f1274..0303027ece 100644
--- a/files/de/_wikihistory.json
+++ b/files/de/_wikihistory.json
@@ -2007,13 +2007,6 @@
       "AngelSankturio"
     ]
   },
-  "Tools/Index": {
-    "modified": "2020-07-16T22:36:02.468Z",
-    "contributors": [
-      "wbamberg",
-      "fscholz"
-    ]
-  },
   "Tools/JSON_viewer": {
     "modified": "2020-07-16T22:36:31.343Z",
     "contributors": [
@@ -13538,6 +13531,13 @@
       "Dria"
     ]
   },
+  "conflicting/Tools": {
+    "modified": "2020-07-16T22:36:02.468Z",
+    "contributors": [
+      "wbamberg",
+      "fscholz"
+    ]
+  },
   "conflicting/Web/API": {
     "modified": "2019-03-23T23:21:31.048Z",
     "contributors": [
diff --git a/files/de/conflicting/tools/index.html b/files/de/conflicting/tools/index.html
new file mode 100644
index 0000000000..8b7e222774
--- /dev/null
+++ b/files/de/conflicting/tools/index.html
@@ -0,0 +1,10 @@
+---
+title: Index
+slug: conflicting/Tools
+tags:
+  - Index
+  - Tools
+translation_of: Tools/Index
+original_slug: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/de/docs/Tools")}}</p>
diff --git a/files/de/tools/index/index.html b/files/de/tools/index/index.html
deleted file mode 100644
index 7505b123b1..0000000000
--- a/files/de/tools/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Index
-slug: Tools/Index
-tags:
-  - Index
-  - Tools
-translation_of: Tools/Index
----
-<div>{{ToolsSidebar}}</div><p>{{Index("/de/docs/Tools")}}</p>
diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index f62d9cc572..7465e846fa 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1543,6 +1543,7 @@
 /es/docs/Web/API/Element/onwheel	/es/docs/Web/API/GlobalEventHandlers/onwheel
 /es/docs/Web/API/ElementosHTMLparaVideo	/es/docs/Web/API/HTMLVideoElement
 /es/docs/Web/API/Event/createEvent	/es/docs/Web/API/Document/createEvent
+/es/docs/Web/API/EventSource/onopen	/es/docs/Web/API/EventSource/open_event
 /es/docs/Web/API/Fetch_API/Conceptos_basicos	/es/docs/Web/API/Fetch_API/Basic_concepts
 /es/docs/Web/API/Fetch_API/Utilizando_Fetch	/es/docs/Web/API/Fetch_API/Using_Fetch
 /es/docs/Web/API/File/fileName	/es/docs/conflicting/Web/API/File/name
@@ -1954,6 +1955,7 @@
 /es/docs/Web/HTML/Elementos_en_línea	/es/docs/Web/HTML/Inline_elements
 /es/docs/Web/HTML/Gestión_del_foco_en_HTML	/es/docs/Web/API/Document/hasFocus
 /es/docs/Web/HTML/Imagen_con_CORS_habilitado	/es/docs/Web/HTML/CORS_enabled_image
+/es/docs/Web/HTML/Index	/es/docs/conflicting/Web/HTML
 /es/docs/Web/HTML/Microdatos	/es/docs/Web/HTML/Microdata
 /es/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing	/es/docs/Glossary/speculative_parsing
 /es/docs/Web/HTML/Referencia	/es/docs/Web/HTML/Reference
@@ -1961,7 +1963,7 @@
 /es/docs/Web/HTML/Transision_adaptativa_DASH	/es/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video
 /es/docs/Web/HTML/anipular_video_por_medio_de_canvas	/es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
 /es/docs/Web/HTML/microformatos	/es/docs/Web/HTML/microformats
-/es/docs/Web/HTML/Índice	/es/docs/Web/HTML/Index
+/es/docs/Web/HTML/Índice	/es/docs/conflicting/Web/HTML
 /es/docs/Web/HTTP/Access_control_CORS	/es/docs/Web/HTTP/CORS
 /es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs	/es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
 /es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web	/es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
@@ -2533,6 +2535,7 @@
 /es/docs/Web/Reference/Events/transitionend	/es/docs/Web/API/HTMLElement/transitionend_event
 /es/docs/Web/Reference/Events/wheel	/es/docs/Web/API/Element/wheel_event
 /es/docs/Web/SVG/Element/glifo	/es/docs/Web/SVG/Element/glyph
+/es/docs/Web/SVG/Index	/es/docs/conflicting/Web/SVG
 /es/docs/Web/SVG/Tutorial/Introducción	/es/docs/Web/SVG/Tutorial/Introduction
 /es/docs/Web/Security/Same-origin_politica	/es/docs/Web/Security/Same-origin_policy
 /es/docs/Web/Security/Securing_your_site/desactivar_autocompletado_formulario	/es/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 6156c5aff5..7cbcbe886f 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -6474,7 +6474,7 @@
       "Jabi"
     ]
   },
-  "Web/API/EventSource/onopen": {
+  "Web/API/EventSource/open_event": {
     "modified": "2019-03-23T22:03:59.180Z",
     "contributors": [
       "Hoosep"
@@ -15038,13 +15038,6 @@
       "WriestTavo"
     ]
   },
-  "Web/HTML/Index": {
-    "modified": "2019-01-16T22:12:02.767Z",
-    "contributors": [
-      "raecillacastellana",
-      "pekechis"
-    ]
-  },
   "Web/HTML/Inline_elements": {
     "modified": "2019-03-23T22:46:15.359Z",
     "contributors": [
@@ -20480,13 +20473,6 @@
       "jorge_castro"
     ]
   },
-  "Web/SVG/Index": {
-    "modified": "2019-01-16T22:36:49.773Z",
-    "contributors": [
-      "jwhitlock",
-      "ComplementosMozilla"
-    ]
-  },
   "Web/SVG/SVG_1.1_Support_in_Firefox": {
     "modified": "2019-03-23T23:43:25.545Z",
     "contributors": [
@@ -21559,6 +21545,13 @@
       "wbamberg"
     ]
   },
+  "conflicting/Web/HTML": {
+    "modified": "2019-01-16T22:12:02.767Z",
+    "contributors": [
+      "raecillacastellana",
+      "pekechis"
+    ]
+  },
   "conflicting/Web/HTML/Element": {
     "modified": "2020-01-21T22:36:54.135Z",
     "contributors": [
@@ -21823,6 +21816,13 @@
       "totopizzahn"
     ]
   },
+  "conflicting/Web/SVG": {
+    "modified": "2019-01-16T22:36:49.773Z",
+    "contributors": [
+      "jwhitlock",
+      "ComplementosMozilla"
+    ]
+  },
   "conflicting/Web/Web_Components/Using_custom_elements": {
     "modified": "2019-03-23T22:21:51.809Z",
     "contributors": [
diff --git a/files/es/conflicting/web/html/index.html b/files/es/conflicting/web/html/index.html
new file mode 100644
index 0000000000..f99a5c972d
--- /dev/null
+++ b/files/es/conflicting/web/html/index.html
@@ -0,0 +1,9 @@
+---
+title: Índice de la documentación HTML
+slug: conflicting/Web/HTML
+tags:
+  - HTML
+translation_of: Web/HTML/Index
+original_slug: Web/HTML/Index
+---
+<p>{{Index("/es/docs/Web/HTML")}}</p>
diff --git a/files/es/conflicting/web/svg/index.html b/files/es/conflicting/web/svg/index.html
new file mode 100644
index 0000000000..274e4ad49c
--- /dev/null
+++ b/files/es/conflicting/web/svg/index.html
@@ -0,0 +1,7 @@
+---
+title: SVG documentation index
+slug: conflicting/Web/SVG
+translation_of: Web/SVG/Index
+original_slug: Web/SVG/Index
+---
+<p>{{Index("/en-US/docs/Web/SVG")}}</p>
diff --git a/files/es/web/api/eventsource/onopen/index.html b/files/es/web/api/eventsource/onopen/index.html
deleted file mode 100644
index 59ee6537dd..0000000000
--- a/files/es/web/api/eventsource/onopen/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: EventSource.onopen
-slug: Web/API/EventSource/onopen
-translation_of: Web/API/EventSource/onopen
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-<p>La propiedad <code><strong>onopen</strong></code> de la interfaz  {{domxref("EventSource")}}  es un {{event("Event_handlers", "event handler")}} llamado cuando un evento  {{event("open")}} es recibido, esto pasa cuando la conexión fue solo abierta.</p>
-
-<h2 id="Syntax">Syntax</h2>
-
-<pre class="syntaxbox">eventSource.onopen = function</pre>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<pre class="brush: js">evtSource.onopen = function() {
-  console.log("Connection to server opened.");
-};</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Tu puedes encontrar un ejemplo completo en GitHub — ve <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
-</div>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificación</th>
-   <th scope="col">Estado</th>
-   <th scope="col">Comentario</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
-
-{{Compat("api.EventSource.onopen")}}
-
-<h2 id="Mira_también">Mira también</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/es/web/api/eventsource/open_event/index.html b/files/es/web/api/eventsource/open_event/index.html
new file mode 100644
index 0000000000..ea7b4d5d98
--- /dev/null
+++ b/files/es/web/api/eventsource/open_event/index.html
@@ -0,0 +1,53 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/open_event
+translation_of: Web/API/EventSource/onopen
+original_slug: Web/API/EventSource/onopen
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>La propiedad <code><strong>onopen</strong></code> de la interfaz  {{domxref("EventSource")}}  es un {{event("Event_handlers", "event handler")}} llamado cuando un evento  {{event("open")}} es recibido, esto pasa cuando la conexión fue solo abierta.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Tu puedes encontrar un ejemplo completo en GitHub — ve <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
+
+{{Compat("api.EventSource.onopen")}}
+
+<h2 id="Mira_también">Mira también</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/es/web/html/index/index.html b/files/es/web/html/index/index.html
deleted file mode 100644
index 388b7b4d96..0000000000
--- a/files/es/web/html/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Índice de la documentación HTML
-slug: Web/HTML/Index
-tags:
-  - HTML
-translation_of: Web/HTML/Index
-original_slug: Web/HTML/Índice
----
-<p>{{Index("/es/docs/Web/HTML")}}</p>
diff --git a/files/es/web/svg/index/index.html b/files/es/web/svg/index/index.html
deleted file mode 100644
index a9cf2d3736..0000000000
--- a/files/es/web/svg/index/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: SVG documentation index
-slug: Web/SVG/Index
-translation_of: Web/SVG/Index
----
-<p>{{Index("/en-US/docs/Web/SVG")}}</p>
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt
index 2f4624d9d5..f18598385c 100644
--- a/files/fr/_redirects.txt
+++ b/files/fr/_redirects.txt
@@ -214,7 +214,7 @@
 /fr/docs/Apprendre/HTML/Tableaux/Basics	/fr/docs/Learn/HTML/Tables/Basics
 /fr/docs/Apprendre/HTML/Tableaux/Structuring_planet_data	/fr/docs/Learn/HTML/Tables/Structuring_planet_data
 /fr/docs/Apprendre/HTML/Écrire_une_simple_page_HTML	/fr/docs/conflicting/Learn/Getting_started_with_the_web
-/fr/docs/Apprendre/Index	/fr/docs/Learn/Index
+/fr/docs/Apprendre/Index	/fr/docs/conflicting/Learn
 /fr/docs/Apprendre/Infrastructure	/fr/docs/Learn/Common_questions
 /fr/docs/Apprendre/JavaScript	/fr/docs/Learn/JavaScript
 /fr/docs/Apprendre/JavaScript/Building_blocks	/fr/docs/Learn/JavaScript/Building_blocks
@@ -1262,6 +1262,7 @@
 /fr/docs/Firefox_8_for_developers	/fr/docs/Mozilla/Firefox/Releases/8
 /fr/docs/Firefox_9_for_developers	/fr/docs/Mozilla/Firefox/Releases/9
 /fr/docs/Firefox_pour_les_développeurs	/fr/docs/Mozilla/Firefox/Releases
+/fr/docs/Games/Index	/fr/docs/conflicting/Games
 /fr/docs/Games/Workflows	/fr/docs/Games/Tutorials
 /fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript	/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
 /fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field	/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
@@ -1473,7 +1474,7 @@
 /fr/docs/Glossaire/Identificateur	/fr/docs/Glossary/Identifier
 /fr/docs/Glossaire/Image_matricielle	/fr/docs/Glossary/Raster_image
 /fr/docs/Glossaire/Immuable	/fr/docs/Glossary/Immutable
-/fr/docs/Glossaire/Index	/fr/docs/Glossary/Index
+/fr/docs/Glossaire/Index	/fr/docs/conflicting/Glossary
 /fr/docs/Glossaire/IndexedDB	/fr/docs/Glossary/IndexedDB
 /fr/docs/Glossaire/Injection_SQL	/fr/docs/Glossary/SQL_Injection
 /fr/docs/Glossaire/Input_method_editor	/fr/docs/Glossary/Input_method_editor
@@ -1747,6 +1748,7 @@
 /fr/docs/Glossary/Client_hints	/fr/docs/Web/HTTP/Client_hints
 /fr/docs/Glossary/Gaia	/fr/docs/orphaned/Glossary/Gaia
 /fr/docs/Glossary/Gonk	/fr/docs/orphaned/Glossary/Gonk
+/fr/docs/Glossary/Index	/fr/docs/conflicting/Glossary
 /fr/docs/Glossary/Modern_web_apps	/fr/docs/orphaned/Glossary/Modern_web_apps
 /fr/docs/Glossary/Node/réseau	/fr/docs/Glossary/Node/networking
 /fr/docs/Glossary/Origine	/fr/docs/Glossary/Origin
@@ -2014,7 +2016,7 @@
 /fr/docs/HTTP/Headers/Vary	/fr/docs/Web/HTTP/Headers/Vary
 /fr/docs/HTTP/Headers/WWW-Authenticate	/fr/docs/Web/HTTP/Headers/WWW-Authenticate
 /fr/docs/HTTP/Headers/X-Frame-Options	/fr/docs/Web/HTTP/Headers/X-Frame-Options
-/fr/docs/HTTP/Index	/fr/docs/Web/HTTP/Index
+/fr/docs/HTTP/Index	/fr/docs/conflicting/Web/HTTP
 /fr/docs/HTTP/Méthode	/fr/docs/Web/HTTP/Methods
 /fr/docs/HTTP/Méthode/CONNECT	/fr/docs/Web/HTTP/Methods/CONNECT
 /fr/docs/HTTP/Méthode/DELETE	/fr/docs/Web/HTTP/Methods/DELETE
@@ -2964,7 +2966,7 @@
 /fr/docs/Jeux	/fr/docs/Games
 /fr/docs/Jeux/Anatomie	/fr/docs/Games/Anatomy
 /fr/docs/Jeux/Exemples	/fr/docs/Games/Examples
-/fr/docs/Jeux/Index	/fr/docs/Games/Index
+/fr/docs/Jeux/Index	/fr/docs/conflicting/Games
 /fr/docs/Jeux/Introduction	/fr/docs/Games/Introduction
 /fr/docs/Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary)	/fr/docs/Games/Introduction_to_HTML5_Game_Development
 /fr/docs/Jeux/Publier_jeux	/fr/docs/Games/Publishing_games
@@ -2997,6 +2999,7 @@
 /fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS	/fr/docs/Learn/CSS/First_steps/What_is_CSS
 /fr/docs/Learn/CSS/Styling_text/Mise_en_forme_des_liens	/fr/docs/Learn/CSS/Styling_text/Styling_links
 /fr/docs/Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte	/fr/docs/Learn/CSS/Styling_text/Fundamentals
+/fr/docs/Learn/Index	/fr/docs/conflicting/Learn
 /fr/docs/Learn/JavaScript/Asynchronous/Async_await	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
 /fr/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach	/fr/docs/conflicting/Learn/JavaScript/Asynchronous
 /fr/docs/Learn/JavaScript/Asynchronous/Concepts	/fr/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
@@ -3083,6 +3086,7 @@
 /fr/docs/Mozilla/Add-ons/WebExtensions/Differences_entre_les_implementations_api	/fr/docs/Mozilla/Add-ons/WebExtensions/Differences_between_API_implementations
 /fr/docs/Mozilla/Add-ons/WebExtensions/Exemples	/fr/docs/Mozilla/Add-ons/WebExtensions/Examples
 /fr/docs/Mozilla/Add-ons/WebExtensions/Incompatibilités_Chrome	/fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities
+/fr/docs/Mozilla/Add-ons/WebExtensions/Index	/fr/docs/conflicting/Mozilla/Add-ons/WebExtensions
 /fr/docs/Mozilla/Add-ons/WebExtensions/Intercepter_requêtes_HTTP	/fr/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests
 /fr/docs/Mozilla/Add-ons/WebExtensions/Travailler_avec_l_API_Tabs	/fr/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API
 /fr/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs	/fr/docs/Mozilla/Add-ons/WebExtensions/API
@@ -3219,7 +3223,7 @@
 /fr/docs/Outils/Eyedropper	/fr/docs/Tools/Eyedropper
 /fr/docs/Outils/Firefox_OS_Simulator_clone	/fr/docs/Tools/Firefox_OS_Simulator_clone
 /fr/docs/Outils/Frise_chronologique	/fr/docs/conflicting/Tools/Performance/Waterfall
-/fr/docs/Outils/Index	/fr/docs/Tools/Index
+/fr/docs/Outils/Index	/fr/docs/conflicting/Tools
 /fr/docs/Outils/Inspecteur	/fr/docs/Tools/Page_Inspector
 /fr/docs/Outils/Inspecteur/3-pane_mode	/fr/docs/Tools/Page_Inspector/3-pane_mode
 /fr/docs/Outils/Inspecteur/Comment	/fr/docs/Tools/Page_Inspector/How_to
@@ -3404,6 +3408,7 @@
 /fr/docs/Tools/Debugger/How_to/Break_on_a_DOM_event	/fr/docs/Tools/Debugger/Break_on_DOM_mutation
 /fr/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables	/fr/docs/conflicting/Tools/Debugger/How_to/Set_Watch_Expressions
 /fr/docs/Tools/Debugger/Keyboard_shortcuts	/fr/docs/orphaned/Tools/Debugger/Keyboard_shortcuts
+/fr/docs/Tools/Index	/fr/docs/conflicting/Tools
 /fr/docs/Tools/Page_Inspector/How_to/Examiner_et_éditer_le_code_HTML	/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
 /fr/docs/Tools/Page_Inspector/Keyboard_shortcuts	/fr/docs/orphaned/Tools/Page_Inspector/Keyboard_shortcuts
 /fr/docs/Tools/Web_Console/Keyboard_shortcuts	/fr/docs/orphaned/Tools/Web_Console/Keyboard_shortcuts
@@ -3646,6 +3651,7 @@
 /fr/docs/Web/API/Event.stopPropagation	/fr/docs/Web/API/Event/stopPropagation
 /fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements	/fr/docs/Web/API/Event/Comparison_of_Event_Targets
 /fr/docs/Web/API/Event/createEvent	/fr/docs/conflicting/Web/API/Document/createEvent
+/fr/docs/Web/API/EventSource/onopen	/fr/docs/Web/API/EventSource/open_event
 /fr/docs/Web/API/EventTarget/attachEvent	/fr/docs/Web/API/EventTarget/addEventListener
 /fr/docs/Web/API/EventTarget/detachEvent	/fr/docs/Web/API/EventTarget/removeEventListener
 /fr/docs/Web/API/EventTarget/fireEvent	/fr/docs/Web/API/EventTarget/dispatchEvent
@@ -4504,6 +4510,7 @@
 /fr/docs/Web/HTML/HTML5/Liste_des_éléments_HTML5	/fr/docs/conflicting/Web/HTML/Element
 /fr/docs/Web/HTML/Image_avec_ressources_origines_multiples_CORS_activees	/fr/docs/Web/HTML/CORS_enabled_image
 /fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP	/fr/docs/Web/HTML/CORS_enabled_image
+/fr/docs/Web/HTML/Index	/fr/docs/conflicting/Web/HTML
 /fr/docs/Web/HTML/Inline_elemente	/fr/docs/Web/HTML/Inline_elements
 /fr/docs/Web/HTML/Introduction	/fr/docs/Learn/HTML/Introduction_to_HTML
 /fr/docs/Web/HTML/Introduction_to_HTML5	/fr/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5
@@ -4534,6 +4541,7 @@
 /fr/docs/Web/HTTP/Detection_du_navigateur_en_utilisant_le_user_agent	/fr/docs/Web/HTTP/Browser_detection_using_the_user_agent
 /fr/docs/Web/HTTP/FAQ_sur_le_préchargement_des_liens	/fr/docs/Web/HTTP/Link_prefetching_FAQ
 /fr/docs/Web/HTTP/Headers/Serveur	/fr/docs/Web/HTTP/Headers/Server
+/fr/docs/Web/HTTP/Index	/fr/docs/conflicting/Web/HTTP
 /fr/docs/Web/HTTP/Méthode	/fr/docs/Web/HTTP/Methods
 /fr/docs/Web/HTTP/Méthode/CONNECT	/fr/docs/Web/HTTP/Methods/CONNECT
 /fr/docs/Web/HTTP/Méthode/DELETE	/fr/docs/Web/HTTP/Methods/DELETE
@@ -5498,6 +5506,7 @@
 /fr/docs/Web/MathML/Exemples	/fr/docs/Web/MathML/Examples
 /fr/docs/Web/MathML/Exemples/Dériver_la_Formule_Quadratique	/fr/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula
 /fr/docs/Web/MathML/Exemples/MathML_Theoreme_de_Pythagore	/fr/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem
+/fr/docs/Web/MathML/Index	/fr/docs/conflicting/Web/MathML
 /fr/docs/Web/Media/Formats/Questions_sur_le_soutien	/fr/docs/Web/Media/Formats/Support_issues
 /fr/docs/Web/Media/Formats/Types_des_images	/fr/docs/Web/Media/Formats/Image_types
 /fr/docs/Web/Performance/Budgets_de_performance	/fr/docs/Web/Performance/Performance_budgets
@@ -5517,6 +5526,7 @@
 /fr/docs/Web/Reference/API	/fr/docs/orphaned/Web/Reference/API
 /fr/docs/Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML	/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content
 /fr/docs/Web/SVG/Element/cercle	/fr/docs/Web/SVG/Element/circle
+/fr/docs/Web/SVG/Index	/fr/docs/conflicting/Web/SVG
 /fr/docs/Web/SVG/SVG_en_tant_qu_image	/fr/docs/Web/SVG/SVG_as_an_Image
 /fr/docs/Web/SVG/Sources_compatibilite	/fr/docs/Web/SVG/Compatibility_sources
 /fr/docs/Web/SVG/Tutoriel	/fr/docs/Web/SVG/Tutorial
@@ -5594,6 +5604,7 @@
 /fr/docs/Web/XPath/Fonctions/translate	/fr/docs/Web/XPath/Functions/translate
 /fr/docs/Web/XPath/Fonctions/true	/fr/docs/Web/XPath/Functions/true
 /fr/docs/Web/XPath/Fonctions/unparsed-entity-url	/fr/docs/Web/XPath/Functions/unparsed-entity-url
+/fr/docs/Web/XSLT/Index	/fr/docs/conflicting/Web/XSLT
 /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko	/fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko
 /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres	/fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Setting_Parameters
 /fr/docs/Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_avancé	/fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example
@@ -5607,7 +5618,7 @@
 /fr/docs/Web/XSLT/L'interface_XSLT_JavaScript_dans_Gecko/Les_liaisons_JavaScript_XSLT	/fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/JavaScript_XSLT_Bindings
 /fr/docs/Web/XSLT/L'interface_XSLT_JavaScript_dans_Gecko/Ressources	/fr/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Resources
 /fr/docs/Web/XSLT/Paramètres_des_instructions_de_traitement	/fr/docs/Web/XSLT/PI_Parameters
-/fr/docs/Web/XSLT/Sommaire	/fr/docs/Web/XSLT/Index
+/fr/docs/Web/XSLT/Sommaire	/fr/docs/conflicting/Web/XSLT
 /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT	/fr/docs/Web/XSLT/Transforming_XML_with_XSLT
 /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources	/fr/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading
 /fr/docs/Web/XSLT/Transformations_XML_avec_XSLT/La_référence_XSLT_XPath_de_Netscape	/fr/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json
index 7032f73e7a..db7fabbb59 100644
--- a/files/fr/_wikihistory.json
+++ b/files/fr/_wikihistory.json
@@ -29,13 +29,6 @@
       "BNedry"
     ]
   },
-  "Games/Index": {
-    "modified": "2019-01-16T21:55:43.323Z",
-    "contributors": [
-      "wbamberg",
-      "xdelatour"
-    ]
-  },
   "Games/Introduction": {
     "modified": "2019-04-23T09:34:16.784Z",
     "contributors": [
@@ -1715,12 +1708,6 @@
       "xdelatour"
     ]
   },
-  "Glossary/Index": {
-    "modified": "2019-01-16T21:55:44.075Z",
-    "contributors": [
-      "xdelatour"
-    ]
-  },
   "Glossary/IndexedDB": {
     "modified": "2019-03-23T22:46:35.134Z",
     "contributors": [
@@ -4794,12 +4781,6 @@
       "tonybengue"
     ]
   },
-  "Learn/Index": {
-    "modified": "2020-07-16T22:33:36.900Z",
-    "contributors": [
-      "SphinxKnight"
-    ]
-  },
   "Learn/JavaScript": {
     "modified": "2020-07-16T22:29:38.759Z",
     "contributors": [
@@ -9328,12 +9309,6 @@
       "RoyalPanda"
     ]
   },
-  "Mozilla/Add-ons/WebExtensions/Index": {
-    "modified": "2019-03-18T21:01:44.832Z",
-    "contributors": [
-      "hellosct1"
-    ]
-  },
   "Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard": {
     "modified": "2019-07-03T05:46:49.789Z",
     "contributors": [
@@ -10666,13 +10641,6 @@
       "xdelatour"
     ]
   },
-  "Tools/Index": {
-    "modified": "2020-07-16T22:36:03.885Z",
-    "contributors": [
-      "wbamberg",
-      "xdelatour"
-    ]
-  },
   "Tools/JSON_viewer": {
     "modified": "2020-07-16T22:36:31.458Z",
     "contributors": [
@@ -15556,7 +15524,7 @@
       "Plotisateur"
     ]
   },
-  "Web/API/EventSource/onopen": {
+  "Web/API/EventSource/open_event": {
     "modified": "2020-10-15T22:17:18.152Z",
     "contributors": [
       "SphinxKnight",
@@ -32084,13 +32052,6 @@
       "SphinxKnight"
     ]
   },
-  "Web/HTML/Index": {
-    "modified": "2019-01-16T18:47:13.379Z",
-    "contributors": [
-      "SphinxKnight",
-      "tregagnon"
-    ]
-  },
   "Web/HTML/Inline_elements": {
     "modified": "2019-04-06T13:04:18.081Z",
     "contributors": [
@@ -32917,14 +32878,6 @@
       "mmahouachi"
     ]
   },
-  "Web/HTTP/Index": {
-    "modified": "2019-03-23T22:26:53.499Z",
-    "contributors": [
-      "tonybengue",
-      "SphinxKnight",
-      "xdelatour"
-    ]
-  },
   "Web/HTTP/Link_prefetching_FAQ": {
     "modified": "2019-03-23T23:46:22.581Z",
     "contributors": [
@@ -40091,12 +40044,6 @@
       "Powlow"
     ]
   },
-  "Web/MathML/Index": {
-    "modified": "2019-01-16T22:05:50.107Z",
-    "contributors": [
-      "xdelatour"
-    ]
-  },
   "Web/Media": {
     "modified": "2019-03-18T21:32:54.694Z",
     "contributors": [
@@ -41020,12 +40967,6 @@
       "Nothus"
     ]
   },
-  "Web/SVG/Index": {
-    "modified": "2019-01-16T21:57:35.980Z",
-    "contributors": [
-      "xdelatour"
-    ]
-  },
   "Web/SVG/SVG_animation_with_SMIL": {
     "modified": "2019-08-24T09:55:45.297Z",
     "contributors": [
@@ -42141,12 +42082,6 @@
       "Fredchat"
     ]
   },
-  "Web/XSLT/Index": {
-    "modified": "2019-06-17T11:21:18.591Z",
-    "contributors": [
-      "Arzak656"
-    ]
-  },
   "Web/XSLT/PI_Parameters": {
     "modified": "2019-03-23T23:44:06.266Z",
     "contributors": [
@@ -42318,6 +42253,19 @@
       "dattaz"
     ]
   },
+  "conflicting/Games": {
+    "modified": "2019-01-16T21:55:43.323Z",
+    "contributors": [
+      "wbamberg",
+      "xdelatour"
+    ]
+  },
+  "conflicting/Glossary": {
+    "modified": "2019-01-16T21:55:44.075Z",
+    "contributors": [
+      "xdelatour"
+    ]
+  },
   "conflicting/Glossary/Chrome": {
     "modified": "2019-03-23T23:48:48.795Z",
     "contributors": [
@@ -42351,7 +42299,7 @@
     ]
   },
   "conflicting/Learn": {
-    "modified": "2020-07-16T22:22:13.196Z",
+    "modified": "2020-07-16T22:33:36.900Z",
     "contributors": [
       "SphinxKnight"
     ]
@@ -42744,6 +42692,12 @@
       "Sheppy"
     ]
   },
+  "conflicting/Mozilla/Add-ons/WebExtensions": {
+    "modified": "2019-03-18T21:01:44.832Z",
+    "contributors": [
+      "hellosct1"
+    ]
+  },
   "conflicting/Mozilla/Add-ons/WebExtensions/API/menus/overrideContext": {
     "modified": "2019-07-03T07:58:27.877Z",
     "contributors": [
@@ -42756,6 +42710,13 @@
       "hellosct1"
     ]
   },
+  "conflicting/Tools": {
+    "modified": "2020-07-16T22:36:03.885Z",
+    "contributors": [
+      "wbamberg",
+      "xdelatour"
+    ]
+  },
   "conflicting/Tools/Debugger/How_to/Set_Watch_Expressions": {
     "modified": "2020-07-16T22:35:12.981Z",
     "contributors": [
@@ -43481,6 +43442,13 @@
       "Fredchat"
     ]
   },
+  "conflicting/Web/HTML": {
+    "modified": "2019-01-16T18:47:13.379Z",
+    "contributors": [
+      "SphinxKnight",
+      "tregagnon"
+    ]
+  },
   "conflicting/Web/HTML/Element": {
     "modified": "2019-03-23T23:39:45.493Z",
     "contributors": [
@@ -43499,6 +43467,14 @@
       "xdelatour"
     ]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2019-03-23T22:26:53.499Z",
+    "contributors": [
+      "tonybengue",
+      "SphinxKnight",
+      "xdelatour"
+    ]
+  },
   "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": {
     "modified": "2020-04-19T02:52:23.292Z",
     "contributors": [
@@ -43878,6 +43854,12 @@
       "SphinxKnight"
     ]
   },
+  "conflicting/Web/MathML": {
+    "modified": "2019-01-16T22:05:50.107Z",
+    "contributors": [
+      "xdelatour"
+    ]
+  },
   "conflicting/Web/Progressive_web_apps": {
     "modified": "2019-03-18T20:52:18.657Z",
     "contributors": [
@@ -43935,6 +43917,12 @@
       "JeffD"
     ]
   },
+  "conflicting/Web/SVG": {
+    "modified": "2019-01-16T21:57:35.980Z",
+    "contributors": [
+      "xdelatour"
+    ]
+  },
   "conflicting/Web/Web_Components": {
     "modified": "2020-10-15T22:12:01.555Z",
     "contributors": [
@@ -43951,6 +43939,12 @@
       "Fredchat"
     ]
   },
+  "conflicting/Web/XSLT": {
+    "modified": "2019-06-17T11:21:18.591Z",
+    "contributors": [
+      "Arzak656"
+    ]
+  },
   "orphaned/Glossary/Gaia": {
     "modified": "2019-03-23T22:42:05.161Z",
     "contributors": [
diff --git a/files/fr/conflicting/games/index.md b/files/fr/conflicting/games/index.md
new file mode 100644
index 0000000000..a2f1287d53
--- /dev/null
+++ b/files/fr/conflicting/games/index.md
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Games
+tags:
+  - Meta
+translation_of: Games/Index
+original_slug: Games/Index
+---
+{{GamesSidebar}}{{IncludeSubnav("/fr/docs/Jeux")}}
+
+{{Index("/fr/docs/Jeux")}}
diff --git a/files/fr/conflicting/glossary/index.md b/files/fr/conflicting/glossary/index.md
new file mode 100644
index 0000000000..84c7e9bb13
--- /dev/null
+++ b/files/fr/conflicting/glossary/index.md
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Glossary
+tags:
+  - Glossaire
+  - Index
+  - Navigation
+translation_of: Glossary/Index
+original_slug: Glossary/Index
+---
+{{Index("/fr/docs/Glossaire")}}
diff --git a/files/fr/conflicting/learn/index.md b/files/fr/conflicting/learn/index.md
new file mode 100644
index 0000000000..71cdb8736f
--- /dev/null
+++ b/files/fr/conflicting/learn/index.md
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: conflicting/Learn
+tags:
+  - Index
+  - Learn
+  - MDN
+  - Meta
+translation_of: Learn/Index
+original_slug: Learn/Index
+---
+{{Index("/fr/docs/Apprendre")}}
diff --git a/files/fr/conflicting/mozilla/add-ons/webextensions/index.md b/files/fr/conflicting/mozilla/add-ons/webextensions/index.md
new file mode 100644
index 0000000000..7236a454ab
--- /dev/null
+++ b/files/fr/conflicting/mozilla/add-ons/webextensions/index.md
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Mozilla/Add-ons/WebExtensions
+tags:
+  - Add-ons
+  - Index
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/Index
+original_slug: Mozilla/Add-ons/WebExtensions/Index
+---
+{{AddonSidebar}}{{Index("/fr/Add-ons/WebExtensions")}}
diff --git a/files/fr/conflicting/tools/index.html b/files/fr/conflicting/tools/index.html
new file mode 100644
index 0000000000..afaa168566
--- /dev/null
+++ b/files/fr/conflicting/tools/index.html
@@ -0,0 +1,9 @@
+---
+title: Index
+slug: conflicting/Tools
+tags:
+  - Outils
+translation_of: Tools/Index
+original_slug: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/fr/docs/Outils")}}</p>
diff --git a/files/fr/conflicting/web/html/index.md b/files/fr/conflicting/web/html/index.md
new file mode 100644
index 0000000000..14022f7307
--- /dev/null
+++ b/files/fr/conflicting/web/html/index.md
@@ -0,0 +1,10 @@
+---
+title: Index de la documentation HTML
+slug: conflicting/Web/HTML
+tags:
+  - HTML
+  - Index
+translation_of: Web/HTML/Index
+original_slug: Web/HTML/Index
+---
+{{Index("/fr/docs/Web/HTML")}}
diff --git a/files/fr/conflicting/web/http/index.md b/files/fr/conflicting/web/http/index.md
new file mode 100644
index 0000000000..655176157f
--- /dev/null
+++ b/files/fr/conflicting/web/http/index.md
@@ -0,0 +1,16 @@
+---
+title: Index
+slug: conflicting/Web/HTTP
+tags:
+  - HTTP
+  - Index
+translation_of: Web/HTTP/Index
+original_slug: Web/HTTP/Index
+---
+{{HTTPSidebar}}
+
+## Pages MDN HTTP
+
+Cette page liste toutes les pages de MDN sur le HTTP avec leur résumé et balises.
+
+{{Index("fr/docs/Web/HTTP")}}
diff --git a/files/fr/conflicting/web/mathml/index.md b/files/fr/conflicting/web/mathml/index.md
new file mode 100644
index 0000000000..f3bb5bd189
--- /dev/null
+++ b/files/fr/conflicting/web/mathml/index.md
@@ -0,0 +1,9 @@
+---
+title: Index de la documentation MathML
+slug: conflicting/Web/MathML
+tags:
+  - MathML
+translation_of: Web/MathML/Index
+original_slug: Web/MathML/Index
+---
+{{Index("/fr/docs/Web/MathML")}}
diff --git a/files/fr/conflicting/web/svg/index.md b/files/fr/conflicting/web/svg/index.md
new file mode 100644
index 0000000000..b645f9da52
--- /dev/null
+++ b/files/fr/conflicting/web/svg/index.md
@@ -0,0 +1,9 @@
+---
+title: Index de la documentation SVG
+slug: conflicting/Web/SVG
+tags:
+  - SVG
+translation_of: Web/SVG/Index
+original_slug: Web/SVG/Index
+---
+{{Index("/fr/docs/Web/SVG")}}
diff --git a/files/fr/conflicting/web/xslt/index.md b/files/fr/conflicting/web/xslt/index.md
new file mode 100644
index 0000000000..9c09d87728
--- /dev/null
+++ b/files/fr/conflicting/web/xslt/index.md
@@ -0,0 +1,9 @@
+---
+title: Sommaire
+slug: conflicting/Web/XSLT
+translation_of: Web/XSLT/Index
+original_slug: Web/XSLT/Index
+---
+{{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}}
+
+{{Index("/fr/docs/Web/XSLT")}}
diff --git a/files/fr/games/index/index.md b/files/fr/games/index/index.md
deleted file mode 100644
index e71dad980f..0000000000
--- a/files/fr/games/index/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Index
-slug: Games/Index
-tags:
-  - Meta
-translation_of: Games/Index
-original_slug: Jeux/Index
----
-{{GamesSidebar}}{{IncludeSubnav("/fr/docs/Jeux")}}
-
-{{Index("/fr/docs/Jeux")}}
diff --git a/files/fr/glossary/index/index.md b/files/fr/glossary/index/index.md
deleted file mode 100644
index 4cdb0f3a01..0000000000
--- a/files/fr/glossary/index/index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Index
-slug: Glossary/Index
-tags:
-  - Glossaire
-  - Index
-  - Navigation
-translation_of: Glossary/Index
-original_slug: Glossaire/Index
----
-{{Index("/fr/docs/Glossaire")}}
diff --git a/files/fr/learn/index/index.md b/files/fr/learn/index/index.md
deleted file mode 100644
index 9edb6a5134..0000000000
--- a/files/fr/learn/index/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Index
-slug: Learn/Index
-tags:
-  - Index
-  - Learn
-  - MDN
-  - Meta
-translation_of: Learn/Index
-original_slug: Apprendre/Index
----
-{{Index("/fr/docs/Apprendre")}}
diff --git a/files/fr/mozilla/add-ons/webextensions/index/index.md b/files/fr/mozilla/add-ons/webextensions/index/index.md
deleted file mode 100644
index 1631e2d620..0000000000
--- a/files/fr/mozilla/add-ons/webextensions/index/index.md
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Index
-slug: Mozilla/Add-ons/WebExtensions/Index
-tags:
-  - Add-ons
-  - Index
-  - WebExtensions
-translation_of: Mozilla/Add-ons/WebExtensions/Index
----
-{{AddonSidebar}}{{Index("/fr/Add-ons/WebExtensions")}}
diff --git a/files/fr/tools/index/index.html b/files/fr/tools/index/index.html
deleted file mode 100644
index 427a08ab27..0000000000
--- a/files/fr/tools/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Index
-slug: Tools/Index
-tags:
-  - Outils
-translation_of: Tools/Index
-original_slug: Outils/Index
----
-<div>{{ToolsSidebar}}</div><p>{{Index("/fr/docs/Outils")}}</p>
diff --git a/files/fr/web/api/eventsource/onopen/index.md b/files/fr/web/api/eventsource/onopen/index.md
deleted file mode 100644
index 8cd75bbcb1..0000000000
--- a/files/fr/web/api/eventsource/onopen/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: EventSource.onopen
-slug: Web/API/EventSource/onopen
-tags:
-  - API
-  - Event Handler
-  - EventSource
-  - Propriété
-  - Reference
-translation_of: Web/API/EventSource/onopen
----
-{{APIRef('Server Sent Events')}}
-
-La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.
-
-## Syntaxe
-
-    eventSource.onopen = function
-
-## Exemples
-
-```js
-evtSource.onopen = function() {
-  console.log("Connexion au serveur établie.");
-};
-```
-
-> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
-
-## Spécifications
-
-| Spécification                                                                                            | Statut                           | Commentaires         |
-| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
-
-## Compatibilité des navigateurs
-
-{{Compat("api.EventSource.onopen")}}
-
-## Voir aussi
-
-- {{domxref("EventSource")}}
diff --git a/files/fr/web/api/eventsource/open_event/index.md b/files/fr/web/api/eventsource/open_event/index.md
new file mode 100644
index 0000000000..44b9be5821
--- /dev/null
+++ b/files/fr/web/api/eventsource/open_event/index.md
@@ -0,0 +1,43 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/open_event
+tags:
+  - API
+  - Event Handler
+  - EventSource
+  - Propriété
+  - Reference
+translation_of: Web/API/EventSource/onopen
+original_slug: Web/API/EventSource/onopen
+---
+{{APIRef('Server Sent Events')}}
+
+La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie.
+
+## Syntaxe
+
+    eventSource.onopen = function
+
+## Exemples
+
+```js
+evtSource.onopen = function() {
+  console.log("Connexion au serveur établie.");
+};
+```
+
+> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events)
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("api.EventSource.onopen")}}
+
+## Voir aussi
+
+- {{domxref("EventSource")}}
diff --git a/files/fr/web/html/index/index.md b/files/fr/web/html/index/index.md
deleted file mode 100644
index 73f68028a6..0000000000
--- a/files/fr/web/html/index/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Index de la documentation HTML
-slug: Web/HTML/Index
-tags:
-  - HTML
-  - Index
-translation_of: Web/HTML/Index
----
-{{Index("/fr/docs/Web/HTML")}}
diff --git a/files/fr/web/http/index/index.md b/files/fr/web/http/index/index.md
deleted file mode 100644
index da1d0de1ff..0000000000
--- a/files/fr/web/http/index/index.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Index
-slug: Web/HTTP/Index
-tags:
-  - HTTP
-  - Index
-translation_of: Web/HTTP/Index
----
-{{HTTPSidebar}}
-
-## Pages MDN HTTP
-
-Cette page liste toutes les pages de MDN sur le HTTP avec leur résumé et balises.
-
-{{Index("fr/docs/Web/HTTP")}}
diff --git a/files/fr/web/mathml/index/index.md b/files/fr/web/mathml/index/index.md
deleted file mode 100644
index 36ce8ae063..0000000000
--- a/files/fr/web/mathml/index/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Index de la documentation MathML
-slug: Web/MathML/Index
-tags:
-  - MathML
-translation_of: Web/MathML/Index
----
-{{Index("/fr/docs/Web/MathML")}}
diff --git a/files/fr/web/svg/index/index.md b/files/fr/web/svg/index/index.md
deleted file mode 100644
index 50edd31d3b..0000000000
--- a/files/fr/web/svg/index/index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Index de la documentation SVG
-slug: Web/SVG/Index
-tags:
-  - SVG
-translation_of: Web/SVG/Index
----
-{{Index("/fr/docs/Web/SVG")}}
diff --git a/files/fr/web/xslt/index/index.md b/files/fr/web/xslt/index/index.md
deleted file mode 100644
index 0e4fb850a3..0000000000
--- a/files/fr/web/xslt/index/index.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Sommaire
-slug: Web/XSLT/Index
-translation_of: Web/XSLT/Index
-original_slug: Web/XSLT/Sommaire
----
-{{XSLTRef}}{{QuickLinksWithSubpages("/fr/docs/Web/XSLT")}}
-
-{{Index("/fr/docs/Web/XSLT")}}
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index f4b7a44b99..3bd3759ed7 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -1869,6 +1869,7 @@
 /ja/docs/Firefox_9_for_developers	/ja/docs/Mozilla/Firefox/Releases/9
 /ja/docs/Focus_management_in_HTML	/ja/docs/Web/API/Document/hasFocus
 /ja/docs/Full_page_zoom	/ja/docs/Mozilla/Firefox/Releases/3/Full_page_zoom
+/ja/docs/Games/Index	/ja/docs/conflicting/Games
 /ja/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary)	/ja/docs/Games/Introduction_to_HTML5_Game_Development
 /ja/docs/Games/Workflows	/ja/docs/Games/Tutorials
 /ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript	/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
@@ -1891,6 +1892,7 @@
 /ja/docs/Glossary/DTD	/ja/docs/Glossary/Doctype
 /ja/docs/Glossary/Global_attribute	/ja/docs/Web/HTML/Global_attributes
 /ja/docs/Glossary/Header	/ja/docs/Glossary/HTTP_header
+/ja/docs/Glossary/Index	/ja/docs/conflicting/Glossary
 /ja/docs/Glossary/POP3	/ja/docs/Glossary/POP
 /ja/docs/Glossary/SSL_Glossary	/ja/docs/Glossary/SSL
 /ja/docs/Glossary/Signature/セキュリティ	/ja/docs/Glossary/Signature/Security
@@ -2693,6 +2695,7 @@
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form	/ja/docs/Learn/Forms/Your_first_form
 /ja/docs/Learn/HTML/Forms/Your_first_HTML_form/Example	/ja/docs/Learn/Forms/Your_first_form/Example
 /ja/docs/Learn/HTML/Introduction_to_HTML/高度なテキスト成型	/ja/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
+/ja/docs/Learn/Index	/ja/docs/conflicting/Learn
 /ja/docs/Learn/JavaScript/Asynchronous/Concepts	/ja/docs/Learn/JavaScript/Asynchronous/Introducing
 /ja/docs/Learn/JavaScript/Objects/Inheritance	/ja/docs/Learn/JavaScript/Objects/Classes_in_JavaScript
 /ja/docs/Learn/JavaScript/Objects/Object-oriented_JS	/ja/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript
@@ -2785,6 +2788,7 @@
 /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId	/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow/tabId
 /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network	/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network
 /ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels	/ja/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels
+/ja/docs/Mozilla/Add-ons/WebExtensions/Index	/ja/docs/conflicting/Mozilla/Add-ons/WebExtensions
 /ja/docs/Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発	/ja/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird
 /ja/docs/Mozilla/Add-ons/WebExtensions/Using_the_JavaScript_APIs	/ja/docs/Mozilla/Add-ons/WebExtensions/API
 /ja/docs/Mozilla/Add-ons/WebExtensions/Walkthrough	/ja/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
@@ -2938,6 +2942,7 @@
 /ja/docs/Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts	/ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts
 /ja/docs/Tools/Debugger_(before_Firefox_52)/Settings	/ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Settings
 /ja/docs/Tools/Debugger_(before_Firefox_52)/UI_Tour	/ja/docs/orphaned/Tools/Debugger_(before_Firefox_52)/UI_Tour
+/ja/docs/Tools/Index	/ja/docs/conflicting/Tools
 /ja/docs/Tools/Memory/Comparing_heap_snapshots	/ja/docs/Tools/Memory/Basic_operations
 /ja/docs/Tools/Memory/Open_the_Memory_tool	/ja/docs/Tools/Memory/Basic_operations
 /ja/docs/Tools/Memory/Take_a_heap_snapshot	/ja/docs/Tools/Memory/Basic_operations
@@ -3098,6 +3103,8 @@
 /ja/docs/Web/API/Event/button	/ja/docs/Web/API/MouseEvent/button
 /ja/docs/Web/API/Event/createEvent	/ja/docs/Web/API/Document/createEvent
 /ja/docs/Web/API/EventHandler	/ja/docs/Web/Events/Event_handlers
+/ja/docs/Web/API/EventSource/onerror	/ja/docs/Web/API/EventSource/error_event
+/ja/docs/Web/API/EventSource/onmessage	/ja/docs/Web/API/EventSource/message_event
 /ja/docs/Web/API/EventTarget.addEventListener	/ja/docs/Web/API/EventTarget/addEventListener
 /ja/docs/Web/API/EventTarget.dispatchEvent	/ja/docs/Web/API/EventTarget/dispatchEvent
 /ja/docs/Web/API/EventTarget.removeEventListener	/ja/docs/Web/API/EventTarget/removeEventListener
@@ -3180,6 +3187,7 @@
 /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB	/ja/docs/Web/API/IndexedDB_API/Basic_Terminology
 /ja/docs/Web/API/MediaCapabilitiesInfo	/ja/docs/Web/API/MediaCapabilities/encodingInfo
 /ja/docs/Web/API/MediaDevices/ondevicechange	/ja/docs/Web/API/MediaDevices/devicechange_event
+/ja/docs/Web/API/MediaQueryList/onchange	/ja/docs/Web/API/MediaQueryList/change_event
 /ja/docs/Web/API/MediaRecorder_API	/ja/docs/Web/API/MediaStream_Recording_API
 /ja/docs/Web/API/MediaStreamConstraints	/ja/docs/conflicting/Web/API/MediaDevices/getUserMedia
 /ja/docs/Web/API/MouseEvent/which	/ja/docs/Web/API/UIEvent/which
@@ -3634,6 +3642,7 @@
 /ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role	/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role
 /ja/docs/Web/Accessibility/ARIA/widgets/overview	/ja/docs/Web/Accessibility/ARIA/widgets
 /ja/docs/Web/Accessibility/Accessibility_FAQ	/ja/docs/Web/Accessibility/FAQ
+/ja/docs/Web/Accessibility/Index	/ja/docs/conflicting/Web/Accessibility
 /ja/docs/Web/Apps/Build/Manipulating_media	/ja/docs/Web/Guide/Audio_and_video_delivery
 /ja/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video	/ja/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
 /ja/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video	/ja/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video
@@ -4008,6 +4017,7 @@
 /ja/docs/Web/Guide/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/Guide/HTML/Obsolete_things_to_avoid	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
+/ja/docs/Web/Guide/Index	/ja/docs/conflicting/Web/Guide
 /ja/docs/Web/Guide/Localizations_and_character_encodings	/ja/docs/orphaned/Web/Guide/Localizations_and_character_encodings
 /ja/docs/Web/Guide/Performance/Using_web_workers	/ja/docs/Web/API/Web_Workers_API/Using_web_workers
 /ja/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API	/ja/docs/Web/API/Page_Visibility_API
@@ -4111,6 +4121,7 @@
 /ja/docs/Web/HTML/HTML_Elements/strong	/ja/docs/Web/HTML/Element/strong
 /ja/docs/Web/HTML/HTML_Elements/title	/ja/docs/Web/HTML/Element/title
 /ja/docs/Web/HTML/HTML_Elements/var	/ja/docs/Web/HTML/Element/var
+/ja/docs/Web/HTML/Index	/ja/docs/conflicting/Web/HTML
 /ja/docs/Web/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/HTML/Introduction_to_HTML5	/ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5
 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing	/ja/docs/Glossary/speculative_parsing
@@ -4141,6 +4152,7 @@
 /ja/docs/Web/HTTP/HTTP_response_codes	/ja/docs/Web/HTTP/Status
 /ja/docs/Web/HTTP/Headers/Feature-Policy/vr	/ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
+/ja/docs/Web/HTTP/Index	/ja/docs/conflicting/Web/HTTP
 /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file	/ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file
 /ja/docs/Web/HTTP/Response_codes	/ja/docs/Web/HTTP/Status
 /ja/docs/Web/HTTP/Response_codes/204	/ja/docs/Web/HTTP/Status/204
@@ -4398,6 +4410,7 @@
 /ja/docs/Web/JavaScript/Typed_arrays/Uint32Array	/ja/docs/Web/JavaScript/Reference/Global_objects/Uint32Array
 /ja/docs/Web/JavaScript/Typed_arrays/Uint8Array	/ja/docs/Web/JavaScript/Reference/Global_objects/Uint8Array
 /ja/docs/Web/Manifest/serviceworker	/ja/docs/orphaned/Web/Manifest/serviceworker
+/ja/docs/Web/MathML/Index	/ja/docs/conflicting/Web/MathML
 /ja/docs/Web/Progressive_web_apps/Advantages	/ja/docs/Web/Progressive_web_apps/Introduction
 /ja/docs/Web/Progressive_web_apps/Responsive	/ja/docs/Web/Progressive_web_apps
 /ja/docs/Web/Progressive_web_apps/Responsive/Media_types	/ja/docs/conflicting/Web/CSS/Media_Queries/Using_media_queries
@@ -4435,6 +4448,7 @@
 /ja/docs/Web/Reference/Events/vrdisplayconnected	/ja/docs/Web/API/Window/vrdisplayconnect_event
 /ja/docs/Web/Reference/Events/vrdisplaydisconnected	/ja/docs/Web/API/Window/vrdisplaydisconnect_event
 /ja/docs/Web/Reference/Events/vrdisplaypresentchange	/ja/docs/Web/API/Window/vrdisplaypresentchange_event
+/ja/docs/Web/SVG/Index	/ja/docs/conflicting/Web/SVG
 /ja/docs/Web/Security/CSP	/ja/docs/Web/HTTP/CSP
 /ja/docs/Web/Security/CSP/CSP_policy_directives	/ja/docs/Web/HTTP/Headers/Content-Security-Policy
 /ja/docs/Web/Security/CSP/Default_CSP_restrictions	/ja/docs/Web/HTTP/Headers/Content-Security-Policy
@@ -4467,6 +4481,7 @@
 /ja/docs/Web/Web_Components/Custom_Elements	/ja/docs/Web/Web_Components/Using_custom_elements
 /ja/docs/Web/Web_Components/HTML_Imports	/ja/docs/conflicting/Web/Web_Components
 /ja/docs/Web/Web_Components/Status_in_Firefox	/ja/docs/orphaned/Web/Web_Components/Status_in_Firefox
+/ja/docs/Web/XPath/Index	/ja/docs/conflicting/Web/XPath
 /ja/docs/Web/XSLT/Elements	/ja/docs/Web/XSLT/Element
 /ja/docs/Web/XSLT/Elements/apply-imports	/ja/docs/Web/XSLT/Element/apply-imports
 /ja/docs/Web/XSLT/Elements/apply-templates	/ja/docs/Web/XSLT/Element/apply-templates
@@ -4503,6 +4518,7 @@
 /ja/docs/Web/XSLT/Elements/variable	/ja/docs/Web/XSLT/Element/variable
 /ja/docs/Web/XSLT/Elements/when	/ja/docs/Web/XSLT/Element/when
 /ja/docs/Web/XSLT/Elements/with-param	/ja/docs/Web/XSLT/Element/with-param
+/ja/docs/Web/XSLT/Index	/ja/docs/conflicting/Web/XSLT
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko	/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example	/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Basic_Example	/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Basic_Example
@@ -4521,6 +4537,7 @@
 /ja/docs/WebAPI/Proximity	/ja/docs/Web/API/Proximity_Events
 /ja/docs/WebAPI/Using_Web_Notifications	/ja/docs/Web/API/Notifications_API/Using_the_Notifications_API
 /ja/docs/WebAPI/Using_geolocation	/ja/docs/Web/API/Geolocation_API
+/ja/docs/WebAssembly/Index	/ja/docs/conflicting/WebAssembly
 /ja/docs/WebGL	/ja/docs/Web/API/WebGL_API
 /ja/docs/WebGL/Adding_2D_content_to_a_WebGL_context	/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
 /ja/docs/WebGL/Animating_objects_with_WebGL	/ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
@@ -4617,7 +4634,7 @@
 /ja/docs/XPath/Functions/translate	/ja/docs/Web/XPath/Functions/translate
 /ja/docs/XPath/Functions/true	/ja/docs/Web/XPath/Functions/true
 /ja/docs/XPath/Functions/unparsed-entity-url	/ja/docs/Web/XPath/Functions/unparsed-entity-url
-/ja/docs/XPath/Index	/ja/docs/Web/XPath/Index
+/ja/docs/XPath/Index	/ja/docs/conflicting/Web/XPath
 /ja/docs/XPath/Snippets	/ja/docs/Web/XPath/Snippets
 /ja/docs/XPath:Axes	/ja/docs/Web/XPath/Axes
 /ja/docs/XPath:Functions	/ja/docs/Web/XPath/Functions
@@ -4687,7 +4704,7 @@
 /ja/docs/XSLT/Elements/variable	/ja/docs/Web/XSLT/Element/variable
 /ja/docs/XSLT/Elements/when	/ja/docs/Web/XSLT/Element/when
 /ja/docs/XSLT/Elements/with-param	/ja/docs/Web/XSLT/Element/with-param
-/ja/docs/XSLT/Index	/ja/docs/Web/XSLT/Index
+/ja/docs/XSLT/Index	/ja/docs/conflicting/Web/XSLT
 /ja/docs/XSLT/PI_Parameters	/ja/docs/Web/XSLT/PI_Parameters
 /ja/docs/XSLT/The_XSLT_JavaScript_Interface_in_Gecko	/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko
 /ja/docs/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example	/ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index e42e93574b..6b0e4a264b 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -29,13 +29,6 @@
       "Uemmra3"
     ]
   },
-  "Games/Index": {
-    "modified": "2019-01-16T21:55:46.834Z",
-    "contributors": [
-      "wbamberg",
-      "Marsf"
-    ]
-  },
   "Games/Introduction": {
     "modified": "2019-03-23T22:51:04.568Z",
     "contributors": [
@@ -1821,13 +1814,6 @@
       "Wind1808"
     ]
   },
-  "Glossary/Index": {
-    "modified": "2019-01-16T21:36:54.645Z",
-    "contributors": [
-      "mfuji09",
-      "x2357"
-    ]
-  },
   "Glossary/IndexedDB": {
     "modified": "2019-03-18T21:40:55.276Z",
     "contributors": [
@@ -5140,12 +5126,6 @@
       "karaage-kun"
     ]
   },
-  "Learn/Index": {
-    "modified": "2020-07-16T22:33:38.849Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
   "Learn/JavaScript": {
     "modified": "2020-12-12T21:01:57.465Z",
     "contributors": [
@@ -7517,12 +7497,6 @@
       "kyokutyo"
     ]
   },
-  "Mozilla/Add-ons/WebExtensions/Index": {
-    "modified": "2020-03-07T04:25:12.950Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard": {
     "modified": "2019-05-20T05:14:06.954Z",
     "contributors": [
@@ -9230,13 +9204,6 @@
       "silverskyvicto"
     ]
   },
-  "Tools/Index": {
-    "modified": "2020-07-16T22:36:05.417Z",
-    "contributors": [
-      "wbamberg",
-      "Marsf"
-    ]
-  },
   "Tools/JSON_viewer": {
     "modified": "2020-07-16T22:36:31.583Z",
     "contributors": [
@@ -14440,13 +14407,13 @@
       "k-kuwahara"
     ]
   },
-  "Web/API/EventSource/onerror": {
+  "Web/API/EventSource/error_event": {
     "modified": "2020-10-15T22:22:24.575Z",
     "contributors": [
       "k-kuwahara"
     ]
   },
-  "Web/API/EventSource/onmessage": {
+  "Web/API/EventSource/message_event": {
     "modified": "2020-10-15T22:22:24.577Z",
     "contributors": [
       "k-kuwahara"
@@ -17951,22 +17918,22 @@
       "ethertank"
     ]
   },
-  "Web/API/MediaQueryList/matches": {
-    "modified": "2020-10-15T21:59:32.651Z",
+  "Web/API/MediaQueryList/change_event": {
+    "modified": "2020-10-15T21:59:30.222Z",
     "contributors": [
       "mfuji09",
       "Marsf"
     ]
   },
-  "Web/API/MediaQueryList/media": {
-    "modified": "2020-10-15T21:59:28.975Z",
+  "Web/API/MediaQueryList/matches": {
+    "modified": "2020-10-15T21:59:32.651Z",
     "contributors": [
       "mfuji09",
       "Marsf"
     ]
   },
-  "Web/API/MediaQueryList/onchange": {
-    "modified": "2020-10-15T21:59:30.222Z",
+  "Web/API/MediaQueryList/media": {
+    "modified": "2020-10-15T21:59:28.975Z",
     "contributors": [
       "mfuji09",
       "Marsf"
@@ -26493,12 +26460,6 @@
       "Marsf"
     ]
   },
-  "Web/Accessibility/Index": {
-    "modified": "2019-03-23T22:41:12.085Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
   "Web/Accessibility/Keyboard-navigable_JavaScript_widgets": {
     "modified": "2019-09-04T08:46:02.292Z",
     "contributors": [
@@ -33354,14 +33315,6 @@
       "Wind1808"
     ]
   },
-  "Web/Guide/Index": {
-    "modified": "2020-12-07T13:42:04.312Z",
-    "contributors": [
-      "peterbe",
-      "mfuji09",
-      "silverskyvicto"
-    ]
-  },
   "Web/Guide/Introduction_to_Web_development": {
     "modified": "2020-05-04T12:39:54.645Z",
     "contributors": [
@@ -35214,13 +35167,6 @@
       "eltociear"
     ]
   },
-  "Web/HTML/Index": {
-    "modified": "2020-09-19T11:13:50.506Z",
-    "contributors": [
-      "mfuji09",
-      "Marsf"
-    ]
-  },
   "Web/HTML/Inline_elements": {
     "modified": "2019-04-15T20:58:44.936Z",
     "contributors": [
@@ -36521,12 +36467,6 @@
       "kurimaru"
     ]
   },
-  "Web/HTTP/Index": {
-    "modified": "2019-03-18T21:35:45.067Z",
-    "contributors": [
-      "mfuji09"
-    ]
-  },
   "Web/HTTP/Link_prefetching_FAQ": {
     "modified": "2020-01-12T13:11:34.893Z",
     "contributors": [
@@ -46124,12 +46064,6 @@
       "cosmology233"
     ]
   },
-  "Web/MathML/Index": {
-    "modified": "2019-01-16T21:55:31.944Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
   "Web/Media": {
     "modified": "2020-10-24T14:12:13.318Z",
     "contributors": [
@@ -46858,12 +46792,6 @@
       "teoli"
     ]
   },
-  "Web/SVG/Index": {
-    "modified": "2019-01-16T21:55:52.943Z",
-    "contributors": [
-      "Marsf"
-    ]
-  },
   "Web/SVG/Namespaces_Crash_Course": {
     "modified": "2019-03-23T23:49:34.244Z",
     "contributors": [
@@ -47714,13 +47642,6 @@
       "silverskyvicto"
     ]
   },
-  "Web/XPath/Index": {
-    "modified": "2019-03-30T15:46:42.224Z",
-    "contributors": [
-      "silverskyvicto",
-      "ExE-Boss"
-    ]
-  },
   "Web/XPath/Introduction_to_using_XPath_in_JavaScript": {
     "modified": "2019-03-23T23:54:12.896Z",
     "contributors": [
@@ -48019,13 +47940,6 @@
       "silverskyvicto"
     ]
   },
-  "Web/XSLT/Index": {
-    "modified": "2019-03-18T20:50:34.547Z",
-    "contributors": [
-      "mfuji09",
-      "silverskyvicto"
-    ]
-  },
   "Web/XSLT/PI_Parameters": {
     "modified": "2019-03-18T20:50:34.245Z",
     "contributors": [
@@ -48198,12 +48112,6 @@
       "ukyo"
     ]
   },
-  "WebAssembly/Index": {
-    "modified": "2019-03-18T21:24:03.527Z",
-    "contributors": [
-      "silverskyvicto"
-    ]
-  },
   "WebAssembly/Loading_and_running": {
     "modified": "2019-03-23T22:13:00.551Z",
     "contributors": [
@@ -48256,12 +48164,32 @@
       "silverskyvicto"
     ]
   },
+  "conflicting/Games": {
+    "modified": "2019-01-16T21:55:46.834Z",
+    "contributors": [
+      "wbamberg",
+      "Marsf"
+    ]
+  },
+  "conflicting/Glossary": {
+    "modified": "2019-01-16T21:36:54.645Z",
+    "contributors": [
+      "mfuji09",
+      "x2357"
+    ]
+  },
   "conflicting/Glossary/Plugin": {
     "modified": "2019-03-18T21:35:38.258Z",
     "contributors": [
       "momdo"
     ]
   },
+  "conflicting/Learn": {
+    "modified": "2020-07-16T22:33:38.849Z",
+    "contributors": [
+      "silverskyvicto"
+    ]
+  },
   "conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript": {
     "modified": "2020-12-06T14:17:48.495Z",
     "contributors": [
@@ -48285,6 +48213,19 @@
       "Uemmra3"
     ]
   },
+  "conflicting/Mozilla/Add-ons/WebExtensions": {
+    "modified": "2020-03-07T04:25:12.950Z",
+    "contributors": [
+      "mfuji09"
+    ]
+  },
+  "conflicting/Tools": {
+    "modified": "2020-07-16T22:36:05.417Z",
+    "contributors": [
+      "wbamberg",
+      "Marsf"
+    ]
+  },
   "conflicting/Web/API/AudioTrackList/addtrack_event": {
     "modified": "2020-10-15T22:19:07.769Z",
     "contributors": [
@@ -48541,6 +48482,12 @@
       "Wind1808"
     ]
   },
+  "conflicting/Web/Accessibility": {
+    "modified": "2019-03-23T22:41:12.085Z",
+    "contributors": [
+      "Marsf"
+    ]
+  },
   "conflicting/Web/Accessibility/ARIA/Roles/alert_role": {
     "modified": "2019-03-18T21:24:32.583Z",
     "contributors": [
@@ -48584,6 +48531,27 @@
       "mfuji09"
     ]
   },
+  "conflicting/Web/Guide": {
+    "modified": "2020-12-07T13:42:04.312Z",
+    "contributors": [
+      "peterbe",
+      "mfuji09",
+      "silverskyvicto"
+    ]
+  },
+  "conflicting/Web/HTML": {
+    "modified": "2020-09-19T11:13:50.506Z",
+    "contributors": [
+      "mfuji09",
+      "Marsf"
+    ]
+  },
+  "conflicting/Web/HTTP": {
+    "modified": "2019-03-18T21:35:45.067Z",
+    "contributors": [
+      "mfuji09"
+    ]
+  },
   "conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking": {
     "modified": "2020-08-12T12:42:41.854Z",
     "contributors": [
@@ -48591,12 +48559,44 @@
       "tamura4278"
     ]
   },
+  "conflicting/Web/MathML": {
+    "modified": "2019-01-16T21:55:31.944Z",
+    "contributors": [
+      "Marsf"
+    ]
+  },
+  "conflicting/Web/SVG": {
+    "modified": "2019-01-16T21:55:52.943Z",
+    "contributors": [
+      "Marsf"
+    ]
+  },
   "conflicting/Web/Web_Components": {
     "modified": "2020-10-15T22:23:11.378Z",
     "contributors": [
       "reodog"
     ]
   },
+  "conflicting/Web/XPath": {
+    "modified": "2019-03-30T15:46:42.224Z",
+    "contributors": [
+      "silverskyvicto",
+      "ExE-Boss"
+    ]
+  },
+  "conflicting/Web/XSLT": {
+    "modified": "2019-03-18T20:50:34.547Z",
+    "contributors": [
+      "mfuji09",
+      "silverskyvicto"
+    ]
+  },
+  "conflicting/WebAssembly": {
+    "modified": "2019-03-18T21:24:03.527Z",
+    "contributors": [
+      "silverskyvicto"
+    ]
+  },
   "orphaned/Building_a_Mozilla_Distribution": {
     "modified": "2019-03-23T23:49:07.062Z",
     "contributors": [
diff --git a/files/ja/conflicting/games/index.html b/files/ja/conflicting/games/index.html
new file mode 100644
index 0000000000..f0d8b472be
--- /dev/null
+++ b/files/ja/conflicting/games/index.html
@@ -0,0 +1,12 @@
+---
+title: ゲーム開発関連ドキュメントの索引
+slug: conflicting/Games
+tags:
+  - Games
+  - Index
+translation_of: Games/Index
+original_slug: Games/Index
+---
+<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>
+
+<p>{{Index("/ja/docs/Games")}}</p>
diff --git a/files/ja/conflicting/glossary/index.html b/files/ja/conflicting/glossary/index.html
new file mode 100644
index 0000000000..acdc1de061
--- /dev/null
+++ b/files/ja/conflicting/glossary/index.html
@@ -0,0 +1,12 @@
+---
+title: 索引
+slug: conflicting/Glossary
+tags:
+  - Glossary
+  - Index
+  - MDN Meta
+  - Navigation
+translation_of: Glossary/Index
+original_slug: Glossary/Index
+---
+<p>{{Index("/ja/docs/Glossary")}}</p>
diff --git a/files/ja/conflicting/learn/index.html b/files/ja/conflicting/learn/index.html
new file mode 100644
index 0000000000..9c78d9dcac
--- /dev/null
+++ b/files/ja/conflicting/learn/index.html
@@ -0,0 +1,11 @@
+---
+title: インデックス
+slug: conflicting/Learn
+tags:
+  - MDN Meta
+  - インデックス
+  - 学習
+translation_of: Learn/Index
+original_slug: Learn/Index
+---
+<p>{{Index("/ja/docs/Learn")}}</p>
diff --git a/files/ja/conflicting/mozilla/add-ons/webextensions/index.html b/files/ja/conflicting/mozilla/add-ons/webextensions/index.html
new file mode 100644
index 0000000000..06b5e82b73
--- /dev/null
+++ b/files/ja/conflicting/mozilla/add-ons/webextensions/index.html
@@ -0,0 +1,15 @@
+---
+title: 索引
+slug: conflicting/Mozilla/Add-ons/WebExtensions
+tags:
+  - Add-ons
+  - Index
+  - WebExtensions
+  - アドオン
+  - 索引
+translation_of: Mozilla/Add-ons/WebExtensions/Index
+original_slug: Mozilla/Add-ons/WebExtensions/Index
+---
+<div>{{AddonSidebar}}</div>
+
+<div style="overflow: auto;">{{Index("/ja/docs/Mozilla/Add-ons/WebExtensions")}}</div>
diff --git a/files/ja/conflicting/tools/index.html b/files/ja/conflicting/tools/index.html
new file mode 100644
index 0000000000..1d1bad64e0
--- /dev/null
+++ b/files/ja/conflicting/tools/index.html
@@ -0,0 +1,10 @@
+---
+title: 開発ツール関連ドキュメントの索引
+slug: conflicting/Tools
+tags:
+  - Index
+  - Tools
+translation_of: Tools/Index
+original_slug: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/ja/docs/Tools")}}</p>
diff --git a/files/ja/conflicting/web/accessibility/index.html b/files/ja/conflicting/web/accessibility/index.html
new file mode 100644
index 0000000000..93a56991bc
--- /dev/null
+++ b/files/ja/conflicting/web/accessibility/index.html
@@ -0,0 +1,12 @@
+---
+title: アクセシビリティ関連ドキュメントの索引
+slug: conflicting/Web/Accessibility
+tags:
+  - Accessibility
+  - Index
+translation_of: Web/Accessibility/Index
+original_slug: Web/Accessibility/Index
+---
+<p class="summary"><span class="seoSummary">このドキュメントは、Mozilla Developer Network サイト上の、すべてのアクセシビリティの記事へのリンクの一覧を提供します。</span></p>
+
+<p>{{Index("/ja/docs/Web/Accessibility")}}</p>
diff --git a/files/ja/conflicting/web/guide/index.html b/files/ja/conflicting/web/guide/index.html
new file mode 100644
index 0000000000..a5d6cd1488
--- /dev/null
+++ b/files/ja/conflicting/web/guide/index.html
@@ -0,0 +1,12 @@
+---
+title: 索引
+slug: conflicting/Web/Guide
+tags:
+  - Index
+  - ガイド
+translation_of: Web/Guide/Index
+original_slug: Web/Guide/Index
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div>
+
+<p>{{Index("/ja/docs/Web/Guide")}}</p>
diff --git a/files/ja/conflicting/web/html/index.html b/files/ja/conflicting/web/html/index.html
new file mode 100644
index 0000000000..5f9ada989f
--- /dev/null
+++ b/files/ja/conflicting/web/html/index.html
@@ -0,0 +1,11 @@
+---
+title: HTML ドキュメントの索引
+slug: conflicting/Web/HTML
+tags:
+  - HTML
+  - Index
+  - MDN Meta
+translation_of: Web/HTML/Index
+original_slug: Web/HTML/Index
+---
+<p>{{Index("/ja/docs/Web/HTML")}} <span class="seoSummary">利用可能なすべての HTML に関する文書の包括的な索引リストです。</span></p>
diff --git a/files/ja/conflicting/web/http/index.html b/files/ja/conflicting/web/http/index.html
new file mode 100644
index 0000000000..aa400e86e2
--- /dev/null
+++ b/files/ja/conflicting/web/http/index.html
@@ -0,0 +1,14 @@
+---
+title: 索引
+slug: conflicting/Web/HTTP
+tags:
+  - HTTP
+  - Index
+translation_of: Web/HTTP/Index
+original_slug: Web/HTTP/Index
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>このページは概要やタグに沿った MDN のすべての HTTP ページの一覧です。</p>
+
+<p>{{Index("/ja/docs/Web/HTTP")}}</p>
diff --git a/files/ja/conflicting/web/mathml/index.html b/files/ja/conflicting/web/mathml/index.html
new file mode 100644
index 0000000000..06d9c020b2
--- /dev/null
+++ b/files/ja/conflicting/web/mathml/index.html
@@ -0,0 +1,10 @@
+---
+title: MathML 関連ドキュメントの索引
+slug: conflicting/Web/MathML
+tags:
+  - Index
+  - MathML
+translation_of: Web/MathML/Index
+original_slug: Web/MathML/Index
+---
+<p>{{Index("/ja/docs/Web/MathML")}}</p>
diff --git a/files/ja/conflicting/web/svg/index.html b/files/ja/conflicting/web/svg/index.html
new file mode 100644
index 0000000000..e0b02812c4
--- /dev/null
+++ b/files/ja/conflicting/web/svg/index.html
@@ -0,0 +1,10 @@
+---
+title: SVG 関連ドキュメントの索引
+slug: conflicting/Web/SVG
+tags:
+  - Index
+  - SVG
+translation_of: Web/SVG/Index
+original_slug: Web/SVG/Index
+---
+<p>{{Index("/ja/docs/Web/SVG")}}</p>
diff --git a/files/ja/conflicting/web/xpath/index.html b/files/ja/conflicting/web/xpath/index.html
new file mode 100644
index 0000000000..dbe896db2c
--- /dev/null
+++ b/files/ja/conflicting/web/xpath/index.html
@@ -0,0 +1,16 @@
+---
+title: Index
+slug: conflicting/Web/XPath
+tags:
+  - Index
+  - Reference
+  - XPath
+  - XSLT
+translation_of: Web/XPath/Index
+original_slug: Web/XPath/Index
+---
+<p>{{Index("/ja/docs/Web/XPath")}}</p>
+
+<div class="boxed translate-rendered text-content">
+<p>{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}}</p>
+</div>
diff --git a/files/ja/conflicting/web/xslt/index.html b/files/ja/conflicting/web/xslt/index.html
new file mode 100644
index 0000000000..6cec119901
--- /dev/null
+++ b/files/ja/conflicting/web/xslt/index.html
@@ -0,0 +1,13 @@
+---
+title: Index
+slug: conflicting/Web/XSLT
+tags:
+  - Index
+  - XSLT
+  - リファレンス
+translation_of: Web/XSLT/Index
+original_slug: Web/XSLT/Index
+---
+<p>{{XSLTRef}}{{QuickLinksWithSubpages("/ja/docs/Web/XSLT")}}</p>
+
+<p>{{Index("/ja/docs/XSLT")}}</p>
diff --git a/files/ja/conflicting/webassembly/index.html b/files/ja/conflicting/webassembly/index.html
new file mode 100644
index 0000000000..cb88ce4a63
--- /dev/null
+++ b/files/ja/conflicting/webassembly/index.html
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: conflicting/WebAssembly
+tags:
+  - Index
+  - WebAssembly
+translation_of: WebAssembly/Index
+original_slug: WebAssembly/Index
+---
+<div>{{WebAssemblySidebar}}</div>
+
+<p>{{Index("/ja/docs/WebAssembly")}}</p>
diff --git a/files/ja/games/index/index.html b/files/ja/games/index/index.html
deleted file mode 100644
index 6879d6d0ef..0000000000
--- a/files/ja/games/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: ゲーム開発関連ドキュメントの索引
-slug: Games/Index
-tags:
-  - Games
-  - Index
-translation_of: Games/Index
----
-<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/ja/docs/Games")}}</div>
-
-<p>{{Index("/ja/docs/Games")}}</p>
diff --git a/files/ja/glossary/index/index.html b/files/ja/glossary/index/index.html
deleted file mode 100644
index 57b963f40b..0000000000
--- a/files/ja/glossary/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: 索引
-slug: Glossary/Index
-tags:
-  - Glossary
-  - Index
-  - MDN Meta
-  - Navigation
-translation_of: Glossary/Index
----
-<p>{{Index("/ja/docs/Glossary")}}</p>
diff --git a/files/ja/learn/index/index.html b/files/ja/learn/index/index.html
deleted file mode 100644
index 0c842ca444..0000000000
--- a/files/ja/learn/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: インデックス
-slug: Learn/Index
-tags:
-  - MDN Meta
-  - インデックス
-  - 学習
-translation_of: Learn/Index
----
-<p>{{Index("/ja/docs/Learn")}}</p>
diff --git a/files/ja/mozilla/add-ons/webextensions/index/index.html b/files/ja/mozilla/add-ons/webextensions/index/index.html
deleted file mode 100644
index ec4a9066f7..0000000000
--- a/files/ja/mozilla/add-ons/webextensions/index/index.html
+++ /dev/null
@@ -1,14 +0,0 @@
----
-title: 索引
-slug: Mozilla/Add-ons/WebExtensions/Index
-tags:
-  - Add-ons
-  - Index
-  - WebExtensions
-  - アドオン
-  - 索引
-translation_of: Mozilla/Add-ons/WebExtensions/Index
----
-<div>{{AddonSidebar}}</div>
-
-<div style="overflow: auto;">{{Index("/ja/docs/Mozilla/Add-ons/WebExtensions")}}</div>
diff --git a/files/ja/tools/index/index.html b/files/ja/tools/index/index.html
deleted file mode 100644
index 092c03076e..0000000000
--- a/files/ja/tools/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: 開発ツール関連ドキュメントの索引
-slug: Tools/Index
-tags:
-  - Index
-  - Tools
-translation_of: Tools/Index
----
-<div>{{ToolsSidebar}}</div><p>{{Index("/ja/docs/Tools")}}</p>
diff --git a/files/ja/web/accessibility/index/index.html b/files/ja/web/accessibility/index/index.html
deleted file mode 100644
index 3e2035d320..0000000000
--- a/files/ja/web/accessibility/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: アクセシビリティ関連ドキュメントの索引
-slug: Web/Accessibility/Index
-tags:
-  - Accessibility
-  - Index
-translation_of: Web/Accessibility/Index
----
-<p class="summary"><span class="seoSummary">このドキュメントは、Mozilla Developer Network サイト上の、すべてのアクセシビリティの記事へのリンクの一覧を提供します。</span></p>
-
-<p>{{Index("/ja/docs/Web/Accessibility")}}</p>
diff --git a/files/ja/web/api/eventsource/error_event/index.html b/files/ja/web/api/eventsource/error_event/index.html
new file mode 100644
index 0000000000..31df170d43
--- /dev/null
+++ b/files/ja/web/api/eventsource/error_event/index.html
@@ -0,0 +1,66 @@
+---
+title: EventSource.onerror
+slug: Web/API/EventSource/error_event
+tags:
+  - API
+  - EventSource
+  - Server-sent events
+  - イベントハンドラ
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/EventSource/onerror
+original_slug: Web/API/EventSource/onerror
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+
+
+<p>{{domxref("EventSource")}} インターフェースの<code><strong>onerror</strong></code> プロパティは、エラーが発生し、<code>EventSource</code> オブジェクトに対して {{event("error")}} が送出されたときに呼び出される {{event("Event_handlers", "event handler")}} です。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">eventSource.onerror = function</pre>
+
+<h2 id="例">例</h2>
+
+<pre class="brush: js">evtSource.onerror = function() {
+  console.log("EventSource failed.");
+};</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 完全な例を GitHub から見つけることができます — <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" rel="noopener">PHP を用いた簡単な SSE のデモ</a> を参照。</p>
+</div>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.EventSource.onerror")}}</p>
+</div>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/ja/web/api/eventsource/message_event/index.html b/files/ja/web/api/eventsource/message_event/index.html
new file mode 100644
index 0000000000..6b35ddf7d2
--- /dev/null
+++ b/files/ja/web/api/eventsource/message_event/index.html
@@ -0,0 +1,70 @@
+---
+title: EventSource.onmessage
+slug: Web/API/EventSource/message_event
+tags:
+  - API
+  - EventSource
+  - Server-sent events
+  - onmessage
+  - イベントハンドラ
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/EventSource/onmessage
+original_slug: Web/API/EventSource/onmessage
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>{{domxref("EventSource")}} インターフェースの <code><strong>onmessage</strong></code> プロパティは、メッセージイベントが受信されたとき、つまりソースからメッセージが送信されたときに呼び出される {{event("Event_handlers", "event handler")}} です。</p>
+
+<p><code>onmessage</code> イベントハンドラのイベントオブジェクトの型は {{domxref("MessageEvent")}} です。</p>
+
+<h2 id="構文">構文</h2>
+
+<pre class="syntaxbox">eventSource.onmessage = function</pre>
+
+<h2 id="例">例</h2>
+
+<pre class="brush: js">evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 完全な例を GitHub から見つけることができます — <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" rel="noopener">PHP を用いた簡単な SSE のデモ</a> を参照。</p>
+</div>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">ステータス</th>
+   <th scope="col">コメント</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onmessage", "onmessage")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>初期定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<div>
+
+
+<p>{{Compat("api.EventSource.onmessage")}}</p>
+</div>
+
+<h2 id="関連情報">関連情報</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/ja/web/api/eventsource/onerror/index.html b/files/ja/web/api/eventsource/onerror/index.html
deleted file mode 100644
index 1629027780..0000000000
--- a/files/ja/web/api/eventsource/onerror/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: EventSource.onerror
-slug: Web/API/EventSource/onerror
-tags:
-  - API
-  - EventSource
-  - Server-sent events
-  - イベントハンドラ
-  - プロパティ
-  - リファレンス
-translation_of: Web/API/EventSource/onerror
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-
-
-<p>{{domxref("EventSource")}} インターフェースの<code><strong>onerror</strong></code> プロパティは、エラーが発生し、<code>EventSource</code> オブジェクトに対して {{event("error")}} が送出されたときに呼び出される {{event("Event_handlers", "event handler")}} です。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">eventSource.onerror = function</pre>
-
-<h2 id="例">例</h2>
-
-<pre class="brush: js">evtSource.onerror = function() {
-  console.log("EventSource failed.");
-};</pre>
-
-<div class="note">
-<p><strong>メモ</strong>: 完全な例を GitHub から見つけることができます — <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" rel="noopener">PHP を用いた簡単な SSE のデモ</a> を参照。</p>
-</div>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-<div>
-
-
-<p>{{Compat("api.EventSource.onerror")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/ja/web/api/eventsource/onmessage/index.html b/files/ja/web/api/eventsource/onmessage/index.html
deleted file mode 100644
index 0b0f8c7c6b..0000000000
--- a/files/ja/web/api/eventsource/onmessage/index.html
+++ /dev/null
@@ -1,69 +0,0 @@
----
-title: EventSource.onmessage
-slug: Web/API/EventSource/onmessage
-tags:
-  - API
-  - EventSource
-  - Server-sent events
-  - onmessage
-  - イベントハンドラ
-  - プロパティ
-  - リファレンス
-translation_of: Web/API/EventSource/onmessage
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-<p>{{domxref("EventSource")}} インターフェースの <code><strong>onmessage</strong></code> プロパティは、メッセージイベントが受信されたとき、つまりソースからメッセージが送信されたときに呼び出される {{event("Event_handlers", "event handler")}} です。</p>
-
-<p><code>onmessage</code> イベントハンドラのイベントオブジェクトの型は {{domxref("MessageEvent")}} です。</p>
-
-<h2 id="構文">構文</h2>
-
-<pre class="syntaxbox">eventSource.onmessage = function</pre>
-
-<h2 id="例">例</h2>
-
-<pre class="brush: js">evtSource.onmessage = function(e) {
-  var newElement = document.createElement("li");
-
-  newElement.textContent = "message: " + e.data;
-  eventList.appendChild(newElement);
-}</pre>
-
-<div class="note">
-<p><strong>メモ</strong>: 完全な例を GitHub から見つけることができます — <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events" rel="noopener">PHP を用いた簡単な SSE のデモ</a> を参照。</p>
-</div>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onmessage", "onmessage")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-<div>
-
-
-<p>{{Compat("api.EventSource.onmessage")}}</p>
-</div>
-
-<h2 id="関連情報">関連情報</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/ja/web/api/mediaquerylist/change_event/index.html b/files/ja/web/api/mediaquerylist/change_event/index.html
new file mode 100644
index 0000000000..388dad93d3
--- /dev/null
+++ b/files/ja/web/api/mediaquerylist/change_event/index.html
@@ -0,0 +1,73 @@
+---
+title: MediaQueryList.onchange
+slug: Web/API/MediaQueryList/change_event
+tags:
+  - API
+  - CSSOM View
+  - Event Handler
+  - MediaQueryList
+  - Property
+  - Reference
+  - onchange
+  - イベントハンドラー
+  - プロパティ
+  - メディアクエリ
+translation_of: Web/API/MediaQueryList/onchange
+original_slug: Web/API/MediaQueryList/onchange
+---
+<p>{{APIRef("CSSOM")}}</p>
+
+<p><code><strong>onchange</strong></code> は {{DOMxRef("MediaQueryList")}} インターフェイスのプロパティで、 {{domxref("MediaQueryList/change_event", "change")}} イベントが発行されたとき、すなわちメディアクエリの対応の状態が変化したときに呼び出される関数を表します。イベントオブジェクトは {{DOMxRef("MediaQueryListEvent")}} のインスタンスであり、古いブラウザーからは後方互換性のために <code>MediaListQuery</code> のインスタンスと解釈されます。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>MediaQueryList</var>.onchange = function() { ... };</pre>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js notranslate">var mql = window.matchMedia('(max-width: 600px)');
+
+mql.addEventListener( "change", (e) =&gt; {
+    if (e.matches) {
+    /* ビューポートが 600 ピクセル幅以下 */
+    console.log('This is a narrow screen — less than 600px wide.')
+  } else {
+    /* ビューポートが 600 ピクセル幅より広い */
+    console.log('This is a wide screen — more than 600px wide.')
+  }
+})
+
+</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("CSSOM View", "#dom-mediaquerylist-onchange", "onchange")}}</td>
+   <td>{{Spec2("CSSOM View")}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("api.MediaQueryList.onchange")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></li>
+ <li><a href="/ja/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/ja/web/api/mediaquerylist/onchange/index.html b/files/ja/web/api/mediaquerylist/onchange/index.html
deleted file mode 100644
index 5539cdd3c7..0000000000
--- a/files/ja/web/api/mediaquerylist/onchange/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: MediaQueryList.onchange
-slug: Web/API/MediaQueryList/onchange
-tags:
-  - API
-  - CSSOM View
-  - Event Handler
-  - MediaQueryList
-  - Property
-  - Reference
-  - onchange
-  - イベントハンドラー
-  - プロパティ
-  - メディアクエリ
-translation_of: Web/API/MediaQueryList/onchange
----
-<p>{{APIRef("CSSOM")}}</p>
-
-<p><code><strong>onchange</strong></code> は {{DOMxRef("MediaQueryList")}} インターフェイスのプロパティで、 {{domxref("MediaQueryList/change_event", "change")}} イベントが発行されたとき、すなわちメディアクエリの対応の状態が変化したときに呼び出される関数を表します。イベントオブジェクトは {{DOMxRef("MediaQueryListEvent")}} のインスタンスであり、古いブラウザーからは後方互換性のために <code>MediaListQuery</code> のインスタンスと解釈されます。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate"><var>MediaQueryList</var>.onchange = function() { ... };</pre>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush: js notranslate">var mql = window.matchMedia('(max-width: 600px)');
-
-mql.addEventListener( "change", (e) =&gt; {
-    if (e.matches) {
-    /* ビューポートが 600 ピクセル幅以下 */
-    console.log('This is a narrow screen — less than 600px wide.')
-  } else {
-    /* ビューポートが 600 ピクセル幅より広い */
-    console.log('This is a wide screen — more than 600px wide.')
-  }
-})
-
-</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("CSSOM View", "#dom-mediaquerylist-onchange", "onchange")}}</td>
-   <td>{{Spec2("CSSOM View")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("api.MediaQueryList.onchange")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/CSS/Media_queries">メディアクエリ</a></li>
- <li><a href="/ja/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/ja/web/guide/index/index.html b/files/ja/web/guide/index/index.html
deleted file mode 100644
index 9f0d683123..0000000000
--- a/files/ja/web/guide/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: 索引
-slug: Web/Guide/Index
-tags:
-  - Index
-  - ガイド
-translation_of: Web/Guide/Index
----
-<div>{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}</div>
-
-<p>{{Index("/ja/docs/Web/Guide")}}</p>
diff --git a/files/ja/web/html/index/index.html b/files/ja/web/html/index/index.html
deleted file mode 100644
index eadaa1c4d0..0000000000
--- a/files/ja/web/html/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: HTML ドキュメントの索引
-slug: Web/HTML/Index
-tags:
-  - HTML
-  - Index
-  - MDN Meta
-translation_of: Web/HTML/Index
----
-<p>{{Index("/ja/docs/Web/HTML")}} <span class="seoSummary">利用可能なすべての HTML に関する文書の包括的な索引リストです。</span></p>
diff --git a/files/ja/web/http/index/index.html b/files/ja/web/http/index/index.html
deleted file mode 100644
index acbf54eb38..0000000000
--- a/files/ja/web/http/index/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: 索引
-slug: Web/HTTP/Index
-tags:
-  - HTTP
-  - Index
-translation_of: Web/HTTP/Index
----
-<div>{{HTTPSidebar}}</div>
-
-<p>このページは概要やタグに沿った MDN のすべての HTTP ページの一覧です。</p>
-
-<p>{{Index("/ja/docs/Web/HTTP")}}</p>
diff --git a/files/ja/web/mathml/index/index.html b/files/ja/web/mathml/index/index.html
deleted file mode 100644
index a32dfa6b75..0000000000
--- a/files/ja/web/mathml/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: MathML 関連ドキュメントの索引
-slug: Web/MathML/Index
-tags:
-  - Index
-  - MathML
-translation_of: Web/MathML/Index
----
-<p>{{Index("/ja/docs/Web/MathML")}}</p>
diff --git a/files/ja/web/svg/index/index.html b/files/ja/web/svg/index/index.html
deleted file mode 100644
index 84bc4161f7..0000000000
--- a/files/ja/web/svg/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: SVG 関連ドキュメントの索引
-slug: Web/SVG/Index
-tags:
-  - Index
-  - SVG
-translation_of: Web/SVG/Index
----
-<p>{{Index("/ja/docs/Web/SVG")}}</p>
diff --git a/files/ja/web/xpath/index/index.html b/files/ja/web/xpath/index/index.html
deleted file mode 100644
index e90e8fb344..0000000000
--- a/files/ja/web/xpath/index/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Index
-slug: Web/XPath/Index
-tags:
-  - Index
-  - Reference
-  - XPath
-  - XSLT
-translation_of: Web/XPath/Index
----
-<p>{{Index("/ja/docs/Web/XPath")}}</p>
-
-<div class="boxed translate-rendered text-content">
-<p>{{QuickLinksWithSubpages("/ja/docs/Web/XPath")}}</p>
-</div>
diff --git a/files/ja/web/xslt/index/index.html b/files/ja/web/xslt/index/index.html
deleted file mode 100644
index 91bb5362a3..0000000000
--- a/files/ja/web/xslt/index/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Index
-slug: Web/XSLT/Index
-tags:
-  - Index
-  - XSLT
-  - リファレンス
-translation_of: Web/XSLT/Index
----
-<p>{{XSLTRef}}{{QuickLinksWithSubpages("/ja/docs/Web/XSLT")}}</p>
-
-<p>{{Index("/ja/docs/XSLT")}}</p>
diff --git a/files/ja/webassembly/index/index.html b/files/ja/webassembly/index/index.html
deleted file mode 100644
index dd2f92d0e9..0000000000
--- a/files/ja/webassembly/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Index
-slug: WebAssembly/Index
-tags:
-  - Index
-  - WebAssembly
-translation_of: WebAssembly/Index
----
-<div>{{WebAssemblySidebar}}</div>
-
-<p>{{Index("/ja/docs/WebAssembly")}}</p>
diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt
index a69d0e95b6..80407fb56b 100644
--- a/files/ko/_redirects.txt
+++ b/files/ko/_redirects.txt
@@ -196,6 +196,7 @@
 /ko/docs/Firefox_3_for_developers	/ko/docs/Mozilla/Firefox/Releases/3
 /ko/docs/Focus_management_in_HTML	/ko/docs/Web/API/Document/hasFocus
 /ko/docs/Full_page_zoom	/ko/docs/Mozilla/Firefox/Releases/3/Full_page_zoom
+/ko/docs/Games/Index	/ko/docs/conflicting/Games
 /ko/docs/Games/Tutorials/2D_breakout_game_Phaser/득점	/ko/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score
 /ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임	/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
 /ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls	/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
@@ -210,6 +211,7 @@
 /ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기	/ko/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
 /ko/docs/Glossary/Client_hints	/ko/docs/Web/HTTP/Client_hints
 /ko/docs/Glossary/Header	/ko/docs/Glossary/HTTP_header
+/ko/docs/Glossary/Index	/ko/docs/conflicting/Glossary
 /ko/docs/Glossary/Transmission_Control_Protocol_(TCP)	/ko/docs/conflicting/Glossary/TCP
 /ko/docs/Glossary/동적_프로그래밍_언어	/ko/docs/Glossary/Dynamic_programming_language
 /ko/docs/Glossary/배열	/ko/docs/Glossary/array
@@ -313,6 +315,7 @@
 /ko/docs/Learn/HTML/Forms/Your_first_HTML_form	/ko/docs/Learn/Forms/Your_first_form
 /ko/docs/Learn/HTML/Howto/데이터_속성_사용하기	/ko/docs/Learn/HTML/Howto/Use_data_attributes
 /ko/docs/Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content	/ko/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
+/ko/docs/Learn/Index	/ko/docs/conflicting/Learn
 /ko/docs/Learn/JavaScript/Asynchronous/Async_await	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises
 /ko/docs/Learn/JavaScript/Asynchronous/Concepts	/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Introducing
 /ko/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals	/ko/docs/conflicting/Learn/JavaScript/Asynchronous
@@ -612,6 +615,7 @@
 /ko/docs/Web/Guide/HTML/폼/HTML_폼_구성_방법	/ko/docs/Learn/Forms/How_to_structure_a_web_form
 /ko/docs/Web/Guide/HTML/폼/My_first_HTML_form	/ko/docs/Learn/Forms/Your_first_form
 /ko/docs/Web/Guide/HTML/폼/Sending_and_retrieving_form_data	/ko/docs/Learn/Forms/Sending_and_retrieving_form_data
+/ko/docs/Web/Guide/Index	/ko/docs/conflicting/Web/Guide
 /ko/docs/Web/Guide/XML_파싱_및_직렬화	/ko/docs/Web/Guide/Parsing_and_serializing_XML
 /ko/docs/Web/Guide/그래픽	/ko/docs/Web/Guide/Graphics
 /ko/docs/Web/HTML/Canvas	/ko/docs/Web/API/Canvas_API
@@ -642,11 +646,13 @@
 /ko/docs/Web/HTML/Global_attributes/클래스	/ko/docs/Web/HTML/Global_attributes/class
 /ko/docs/Web/HTML/HTML5/HTML5_element_list	/ko/docs/Web/HTML/Element
 /ko/docs/Web/HTML/HTML에서_폼	/ko/docs/Learn/Forms
+/ko/docs/Web/HTML/Index	/ko/docs/conflicting/Web/HTML
 /ko/docs/Web/HTML/Introduction	/ko/docs/Learn/HTML/Introduction_to_HTML
 /ko/docs/Web/HTTP/Access_control_CORS	/ko/docs/Web/HTTP/CORS
 /ko/docs/Web/HTTP/Access_control_CORS/Errors	/ko/docs/Web/HTTP/CORS/Errors
 /ko/docs/Web/HTTP/Access_control_CORS/Errors/CORSDidNotSucceed	/ko/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed
 /ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ko/docs/Web/HTTP/Index	/ko/docs/conflicting/Web/HTTP
 /ko/docs/Web/HTTP/User_agent를_이용한_브라우저_감지	/ko/docs/Web/HTTP/Browser_detection_using_the_user_agent
 /ko/docs/Web/HTTP/상태_코드	/ko/docs/Web/HTTP/Status
 /ko/docs/Web/JavaScript/About	/ko/docs/Web/JavaScript/About_JavaScript
diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json
index 6c67d4c18d..b811cae08e 100644
--- a/files/ko/_wikihistory.json
+++ b/files/ko/_wikihistory.json
@@ -13,12 +13,6 @@
       "kom2727"
     ]
   },
-  "Games/Index": {
-    "modified": "2020-12-05T03:39:50.081Z",
-    "contributors": [
-      "movegun1027"
-    ]
-  },
   "Games/Introduction": {
     "modified": "2019-06-03T20:16:02.213Z",
     "contributors": [
@@ -574,12 +568,6 @@
       "HyunSeob"
     ]
   },
-  "Glossary/Index": {
-    "modified": "2019-05-26T04:17:19.834Z",
-    "contributors": [
-      "alattalatta"
-    ]
-  },
   "Glossary/Internet": {
     "modified": "2019-10-29T12:34:29.654Z",
     "contributors": [
@@ -1867,12 +1855,6 @@
       "byoung_hyun"
     ]
   },
-  "Learn/Index": {
-    "modified": "2020-07-16T22:33:40.026Z",
-    "contributors": [
-      "alattalatta"
-    ]
-  },
   "Learn/JavaScript": {
     "modified": "2020-12-01T10:05:39.249Z",
     "contributors": [
@@ -9915,13 +9897,6 @@
       "gblue1223"
     ]
   },
-  "Web/Guide/Index": {
-    "modified": "2020-12-07T13:40:57.143Z",
-    "contributors": [
-      "peterbe",
-      "alattalatta"
-    ]
-  },
   "Web/Guide/Mobile": {
     "modified": "2019-05-30T06:59:50.297Z",
     "contributors": [
@@ -11092,12 +11067,6 @@
       "alattalatta"
     ]
   },
-  "Web/HTML/Index": {
-    "modified": "2020-01-19T02:45:39.384Z",
-    "contributors": [
-      "alattalatta"
-    ]
-  },
   "Web/HTML/Inline_elements": {
     "modified": "2020-02-12T03:45:21.056Z",
     "contributors": [
@@ -11717,12 +11686,6 @@
       "Simtu"
     ]
   },
-  "Web/HTTP/Index": {
-    "modified": "2020-02-05T12:28:02.372Z",
-    "contributors": [
-      "alattalatta"
-    ]
-  },
   "Web/HTTP/Messages": {
     "modified": "2019-03-18T20:59:38.193Z",
     "contributors": [
@@ -17342,6 +17305,18 @@
       "limkukhyun"
     ]
   },
+  "conflicting/Games": {
+    "modified": "2020-12-05T03:39:50.081Z",
+    "contributors": [
+      "movegun1027"
+    ]
+  },
+  "conflicting/Glossary": {
+    "modified": "2019-05-26T04:17:19.834Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
   "conflicting/Glossary/TCP": {
     "modified": "2020-01-12T14:32:05.700Z",
     "contributors": [
@@ -17349,10 +17324,9 @@
     ]
   },
   "conflicting/Learn": {
-    "modified": "2020-07-16T22:22:13.258Z",
+    "modified": "2020-07-16T22:33:40.026Z",
     "contributors": [
-      "Netaras",
-      "KwanHong_Lee66"
+      "alattalatta"
     ]
   },
   "conflicting/Learn/CSS/Building_blocks": {
@@ -17581,13 +17555,22 @@
     ]
   },
   "conflicting/Web/Guide": {
-    "modified": "2019-03-23T23:41:47.329Z",
+    "modified": "2020-12-07T13:40:57.143Z",
     "contributors": [
-      "teoli",
-      "Jiyoon",
-      "Unixcruiser",
-      "Netaras",
-      "Sebuls"
+      "peterbe",
+      "alattalatta"
+    ]
+  },
+  "conflicting/Web/HTML": {
+    "modified": "2020-01-19T02:45:39.384Z",
+    "contributors": [
+      "alattalatta"
+    ]
+  },
+  "conflicting/Web/HTTP": {
+    "modified": "2020-02-05T12:28:02.372Z",
+    "contributors": [
+      "alattalatta"
     ]
   },
   "conflicting/Web/JavaScript/Guide": {
diff --git a/files/ko/conflicting/games/index.html b/files/ko/conflicting/games/index.html
new file mode 100644
index 0000000000..88c9158fdc
--- /dev/null
+++ b/files/ko/conflicting/games/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Games
+tags:
+  - Meta
+translation_of: Games/Index
+original_slug: Games/Index
+---
+<div>{{GamesSidebar}}</div>
+
+<p>{{Index("/en-US/docs/Games")}}</p>
diff --git a/files/ko/conflicting/glossary/index.html b/files/ko/conflicting/glossary/index.html
new file mode 100644
index 0000000000..e27f7b7ce2
--- /dev/null
+++ b/files/ko/conflicting/glossary/index.html
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: conflicting/Glossary
+tags:
+  - Glossary
+  - Index
+  - MDN Meta
+  - Navigation
+translation_of: Glossary/Index
+original_slug: Glossary/Index
+---
+<p>{{Index("/ko/docs/Glossary")}}</p>
diff --git a/files/ko/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html
new file mode 100644
index 0000000000..828ba7b7fa
--- /dev/null
+++ b/files/ko/conflicting/learn/index.html
@@ -0,0 +1,11 @@
+---
+title: Index
+slug: conflicting/Learn
+tags:
+  - Index
+  - Learn
+  - MDN Meta
+translation_of: Learn/Index
+original_slug: Learn/Index
+---
+<p>{{Index("/ko/docs/Learn")}}</p>
diff --git a/files/ko/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html
new file mode 100644
index 0000000000..2ae329dcdc
--- /dev/null
+++ b/files/ko/conflicting/web/guide/index.html
@@ -0,0 +1,12 @@
+---
+title: Index
+slug: conflicting/Web/Guide
+tags:
+  - Guide
+  - Index
+translation_of: Web/Guide/Index
+original_slug: Web/Guide/Index
+---
+<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div>
+
+<p>{{Index("/ko/docs/Web/Guide")}}</p>
diff --git a/files/ko/conflicting/web/html/index.html b/files/ko/conflicting/web/html/index.html
new file mode 100644
index 0000000000..98a0225d2a
--- /dev/null
+++ b/files/ko/conflicting/web/html/index.html
@@ -0,0 +1,11 @@
+---
+title: HTML documentation index
+slug: conflicting/Web/HTML
+tags:
+  - HTML
+  - Index
+  - MDN Meta
+translation_of: Web/HTML/Index
+original_slug: Web/HTML/Index
+---
+<p>{{Index("/ko/docs/Web/HTML")}} <span class="seoSummary">전체 HTML 문서의 목록입니다.</span></p>
diff --git a/files/ko/conflicting/web/http/index.html b/files/ko/conflicting/web/http/index.html
new file mode 100644
index 0000000000..b52d63cc82
--- /dev/null
+++ b/files/ko/conflicting/web/http/index.html
@@ -0,0 +1,12 @@
+---
+title: HTTP 색인
+slug: conflicting/Web/HTTP
+tags:
+  - HTTP
+  - Index
+translation_of: Web/HTTP/Index
+original_slug: Web/HTTP/Index
+---
+<div>{{HTTPSidebar}}</div>
+
+<p>{{Index("/ko/docs/Web/HTTP")}}</p>
diff --git a/files/ko/games/index/index.html b/files/ko/games/index/index.html
deleted file mode 100644
index 5d36376f6e..0000000000
--- a/files/ko/games/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Index
-slug: Games/Index
-tags:
-  - Meta
-translation_of: Games/Index
----
-<div>{{GamesSidebar}}</div>
-
-<p>{{Index("/en-US/docs/Games")}}</p>
diff --git a/files/ko/glossary/index/index.html b/files/ko/glossary/index/index.html
deleted file mode 100644
index f7edc11916..0000000000
--- a/files/ko/glossary/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Index
-slug: Glossary/Index
-tags:
-  - Glossary
-  - Index
-  - MDN Meta
-  - Navigation
-translation_of: Glossary/Index
----
-<p>{{Index("/ko/docs/Glossary")}}</p>
diff --git a/files/ko/learn/index/index.html b/files/ko/learn/index/index.html
deleted file mode 100644
index ef35585b45..0000000000
--- a/files/ko/learn/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Index
-slug: Learn/Index
-tags:
-  - Index
-  - Learn
-  - MDN Meta
-translation_of: Learn/Index
----
-<p>{{Index("/ko/docs/Learn")}}</p>
diff --git a/files/ko/web/guide/index/index.html b/files/ko/web/guide/index/index.html
deleted file mode 100644
index 1d121dfb94..0000000000
--- a/files/ko/web/guide/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: Index
-slug: Web/Guide/Index
-tags:
-  - Guide
-  - Index
-translation_of: Web/Guide/Index
----
-<div>{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}</div>
-
-<p>{{Index("/ko/docs/Web/Guide")}}</p>
diff --git a/files/ko/web/html/index/index.html b/files/ko/web/html/index/index.html
deleted file mode 100644
index dde859c07d..0000000000
--- a/files/ko/web/html/index/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: HTML documentation index
-slug: Web/HTML/Index
-tags:
-  - HTML
-  - Index
-  - MDN Meta
-translation_of: Web/HTML/Index
----
-<p>{{Index("/ko/docs/Web/HTML")}} <span class="seoSummary">전체 HTML 문서의 목록입니다.</span></p>
diff --git a/files/ko/web/http/index/index.html b/files/ko/web/http/index/index.html
deleted file mode 100644
index ffd7a593f4..0000000000
--- a/files/ko/web/http/index/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: HTTP 색인
-slug: Web/HTTP/Index
-tags:
-  - HTTP
-  - Index
-translation_of: Web/HTTP/Index
----
-<div>{{HTTPSidebar}}</div>
-
-<p>{{Index("/ko/docs/Web/HTTP")}}</p>
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index 3363b351ae..91690e911a 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -517,6 +517,7 @@
 /pt-BR/docs/Web/API/Element/accessKey	/pt-BR/docs/Web/API/HTMLElement/accessKey
 /pt-BR/docs/Web/API/Element/addEventListener	/pt-BR/docs/Web/API/EventTarget/addEventListener
 /pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets	/pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets
+/pt-BR/docs/Web/API/EventSource/onerror	/pt-BR/docs/Web/API/EventSource/error_event
 /pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global	/pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage
 /pt-BR/docs/Web/API/FileReader/onload	/pt-BR/docs/Web/API/FileReader/load_event
 /pt-BR/docs/Web/API/FullscreenOptions	/pt-BR/docs/orphaned/Web/API/FullscreenOptions
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index c050bf05f2..6041ed758b 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -5001,7 +5001,7 @@
       "ronrother"
     ]
   },
-  "Web/API/EventSource/onerror": {
+  "Web/API/EventSource/error_event": {
     "modified": "2019-03-18T21:30:45.574Z",
     "contributors": [
       "ronrother"
diff --git a/files/pt-br/web/api/eventsource/error_event/index.html b/files/pt-br/web/api/eventsource/error_event/index.html
new file mode 100644
index 0000000000..9f0407f3f4
--- /dev/null
+++ b/files/pt-br/web/api/eventsource/error_event/index.html
@@ -0,0 +1,122 @@
+---
+title: EventSource.onerror
+slug: Web/API/EventSource/error_event
+translation_of: Web/API/EventSource/onerror
+original_slug: Web/API/EventSource/onerror
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<div> </div>
+
+<p>A propriedade <code><strong>onerror</strong></code> da interface {{domxref("EventSource")}} é um {{event("Event_handlers", "event handler")}} chamado quando um erro ocorre e um evento {{event("error")}} é despachado para o objeto <code>EventSource</code>.</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="syntaxbox">eventSource.onerror = function</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: js">evtSource.onerror = function() {
+  console.log("EventSource failed.");
+};</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comentário</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Definição inicial</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="Browser_compatibility">Compatibilidade com navegadores</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>Suporte a EventSource</td>
+   <td>6</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("6.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>5</td>
+  </tr>
+  <tr>
+   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte a EventSource</td>
+   <td>4.4</td>
+   <td>45</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>4.1</td>
+  </tr>
+  <tr>
+   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoMobile("53.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Mas <a href="https://github.com/w3c/ServiceWorker/issues/947">ainda não em service workers.</a></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/pt-br/web/api/eventsource/onerror/index.html b/files/pt-br/web/api/eventsource/onerror/index.html
deleted file mode 100644
index 6221e01bd0..0000000000
--- a/files/pt-br/web/api/eventsource/onerror/index.html
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: EventSource.onerror
-slug: Web/API/EventSource/onerror
-translation_of: Web/API/EventSource/onerror
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-<div> </div>
-
-<p>A propriedade <code><strong>onerror</strong></code> da interface {{domxref("EventSource")}} é um {{event("Event_handlers", "event handler")}} chamado quando um erro ocorre e um evento {{event("error")}} é despachado para o objeto <code>EventSource</code>.</p>
-
-<h2 id="Sintaxe">Sintaxe</h2>
-
-<pre class="syntaxbox">eventSource.onerror = function</pre>
-
-<h2 id="Exemplos">Exemplos</h2>
-
-<pre class="brush: js">evtSource.onerror = function() {
-  console.log("EventSource failed.");
-};</pre>
-
-<div class="note">
-<p><strong>Nota</strong>: Você pode encontrar um exemplo completo no GitHub — veja <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
-</div>
-
-<h2 id="Especificações">Especificações</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificação</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comentário</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Definição inicial</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="Browser_compatibility">Compatibilidade com navegadores</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>Suporte a EventSource</td>
-   <td>6</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop("6.0")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>5</td>
-  </tr>
-  <tr>
-   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatGeckoDesktop("53.0")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
-  <tr>
-   <th>Feature</th>
-   <th>Android</th>
-   <th>Firefox Mobile (Gecko)</th>
-   <th>IE Mobile</th>
-   <th>Opera Mobile</th>
-   <th>Safari Mobile</th>
-  </tr>
-  <tr>
-   <td>Suporte a EventSource</td>
-   <td>4.4</td>
-   <td>45</td>
-   <td>{{CompatNo}}</td>
-   <td>12</td>
-   <td>4.1</td>
-  </tr>
-  <tr>
-   <td>Disponibilidade em workers compartilhados e dedicados<sup>[1]</sup></td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatGeckoMobile("53.0")}}</td>
-   <td>{{CompatNo}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-   <td>{{CompatVersionUnknown}}</td>
-  </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Mas <a href="https://github.com/w3c/ServiceWorker/issues/947">ainda não em service workers.</a></p>
-
-<h2 id="Veja_também">Veja também</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 377cf27043..076f9409bb 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -290,6 +290,7 @@
 /ru/docs/Sample_.htaccess_file	/ru/docs/Learn/Server-side/Apache_Configuration_htaccess
 /ru/docs/Tools/Debugger/How_to/Отладка_кода_внутри_eval	/ru/docs/Tools/Debugger/How_to/Debug_eval_sources
 /ru/docs/Tools/Debugger/How_to/Работа_с_минифицированным_кодом	/ru/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file
+/ru/docs/Tools/Index	/ru/docs/conflicting/Tools
 /ru/docs/Tools/Page_Inspector/How_to/Otkrytie_Inspektora	/ru/docs/Tools/Page_Inspector/How_to/Open_the_Inspector
 /ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa	/ru/docs/Tools/Page_Inspector/How_to/Select_an_element
 /ru/docs/Tools/Page_Inspector/How_to/Исследовать_event_listeners	/ru/docs/Tools/Page_Inspector/How_to/Examine_event_listeners
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index d6c88836f4..a348d4fe1e 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -5037,14 +5037,6 @@
       "vm10111957r"
     ]
   },
-  "Tools/Index": {
-    "modified": "2020-07-16T22:36:06.095Z",
-    "contributors": [
-      "wbamberg",
-      "Aleksej",
-      "Mingun"
-    ]
-  },
   "Tools/Keyboard_shortcuts": {
     "modified": "2020-11-06T04:42:55.218Z",
     "contributors": [
@@ -24053,6 +24045,14 @@
       "uleming"
     ]
   },
+  "conflicting/Tools": {
+    "modified": "2020-07-16T22:36:06.095Z",
+    "contributors": [
+      "wbamberg",
+      "Aleksej",
+      "Mingun"
+    ]
+  },
   "conflicting/Tools/Performance": {
     "modified": "2020-07-16T22:35:29.176Z",
     "contributors": [
diff --git a/files/ru/conflicting/tools/index.html b/files/ru/conflicting/tools/index.html
new file mode 100644
index 0000000000..6af7016701
--- /dev/null
+++ b/files/ru/conflicting/tools/index.html
@@ -0,0 +1,9 @@
+---
+title: Индекс
+slug: conflicting/Tools
+tags:
+  - инструменты
+translation_of: Tools/Index
+original_slug: Tools/Index
+---
+<div>{{ToolsSidebar}}</div><p>{{Index("/ru/docs/Tools")}}</p>
diff --git a/files/ru/tools/index/index.html b/files/ru/tools/index/index.html
deleted file mode 100644
index b9d3f33dbb..0000000000
--- a/files/ru/tools/index/index.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Индекс
-slug: Tools/Index
-tags:
-  - инструменты
-translation_of: Tools/Index
----
-<div>{{ToolsSidebar}}</div><p>{{Index("/ru/docs/Tools")}}</p>
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 5724992b1b..73596ab89d 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -1191,8 +1191,8 @@
 /zh-CN/docs/Server-sent_events/EventSource	/zh-CN/docs/Web/API/EventSource
 /zh-CN/docs/Server-sent_events/EventSource/EventSource	/zh-CN/docs/Web/API/EventSource/EventSource
 /zh-CN/docs/Server-sent_events/EventSource/close	/zh-CN/docs/Web/API/EventSource/close
-/zh-CN/docs/Server-sent_events/EventSource/onerror	/zh-CN/docs/Web/API/EventSource/onerror
-/zh-CN/docs/Server-sent_events/EventSource/onopen	/zh-CN/docs/Web/API/EventSource/onopen
+/zh-CN/docs/Server-sent_events/EventSource/onerror	/zh-CN/docs/Web/API/EventSource/error_event
+/zh-CN/docs/Server-sent_events/EventSource/onopen	/zh-CN/docs/Web/API/EventSource/open_event
 /zh-CN/docs/Server-sent_events/Using_server-sent_events	/zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events
 /zh-CN/docs/Site_Compatibility_for_Firefox_19	/zh-CN/docs/Mozilla/Firefox/Releases/19/Site_compatibility
 /zh-CN/docs/Site_Compatibility_for_Firefox_21	/zh-CN/docs/Mozilla/Firefox/Releases/21/Site_compatibility
@@ -1333,6 +1333,8 @@
 /zh-CN/docs/Web/API/Event/isChar	/zh-CN/docs/Web/API/UIEvent/isChar
 /zh-CN/docs/Web/API/Event/pageY	/zh-CN/docs/conflicting/Web/API/MouseEvent/pageY
 /zh-CN/docs/Web/API/Event/禁用时间冒泡	/zh-CN/docs/Web/API/Event/cancelBubble
+/zh-CN/docs/Web/API/EventSource/onerror	/zh-CN/docs/Web/API/EventSource/error_event
+/zh-CN/docs/Web/API/EventSource/onopen	/zh-CN/docs/Web/API/EventSource/open_event
 /zh-CN/docs/Web/API/EventTarget.dispatchEvent	/zh-CN/docs/Web/API/EventTarget/dispatchEvent
 /zh-CN/docs/Web/API/EventTarget.removeEventListener	/zh-CN/docs/Web/API/EventTarget/removeEventListener
 /zh-CN/docs/Web/API/FetchController	/zh-CN/docs/Web/API/AbortController
@@ -2014,6 +2016,7 @@
 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-加速装置键	/zh-CN/docs/Web/HTML/Global_attributes/x-ms-acceleratorkey
 /zh-CN/docs/Web/HTML/Global_attributes/x-ms-格式-检测	/zh-CN/docs/Web/HTML/Global_attributes/x-ms-format-detection
 /zh-CN/docs/Web/HTML/Global_attributes/摩缺	/zh-CN/docs/Web/HTML/Global_attributes/accesskey
+/zh-CN/docs/Web/HTML/Index	/zh-CN/docs/conflicting/Web/HTML
 /zh-CN/docs/Web/HTML/Inline_elemente	/zh-CN/docs/Web/HTML/Inline_elements
 /zh-CN/docs/Web/HTML/Introduction	/zh-CN/docs/learn/HTML/Introduction_to_HTML
 /zh-CN/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing	/zh-CN/docs/Glossary/speculative_parsing
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index 81df0cfbad..3fd874797f 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -12997,13 +12997,13 @@
       "Char-Ten"
     ]
   },
-  "Web/API/EventSource/onerror": {
+  "Web/API/EventSource/error_event": {
     "modified": "2019-03-23T22:09:23.181Z",
     "contributors": [
       "Char-Ten"
     ]
   },
-  "Web/API/EventSource/onopen": {
+  "Web/API/EventSource/open_event": {
     "modified": "2019-03-23T22:16:16.621Z",
     "contributors": [
       "kameii"
@@ -32750,13 +32750,6 @@
       "pans9"
     ]
   },
-  "Web/HTML/Index": {
-    "modified": "2019-03-21T11:52:09.419Z",
-    "contributors": [
-      "RainSlide",
-      "xcffl"
-    ]
-  },
   "Web/HTML/Inline_elements": {
     "modified": "2020-08-05T19:04:54.777Z",
     "contributors": [
@@ -47559,6 +47552,13 @@
       "wbamberg"
     ]
   },
+  "conflicting/Web/HTML": {
+    "modified": "2019-03-21T11:52:09.419Z",
+    "contributors": [
+      "RainSlide",
+      "xcffl"
+    ]
+  },
   "conflicting/Web/HTML/Element": {
     "modified": "2020-01-10T02:18:08.432Z",
     "contributors": [
diff --git a/files/zh-cn/conflicting/web/html/index.html b/files/zh-cn/conflicting/web/html/index.html
new file mode 100644
index 0000000000..0329d96704
--- /dev/null
+++ b/files/zh-cn/conflicting/web/html/index.html
@@ -0,0 +1,10 @@
+---
+title: HTML 文档索引
+slug: conflicting/Web/HTML
+tags:
+  - HTML
+  - 索引
+translation_of: Web/HTML/Index
+original_slug: Web/HTML/Index
+---
+<p>{{Index("/zh-CN/docs/Web/HTML")}} 所有可用的 HTML 文档的综合索引列表。</p>
diff --git a/files/zh-cn/web/api/eventsource/error_event/index.html b/files/zh-cn/web/api/eventsource/error_event/index.html
new file mode 100644
index 0000000000..eb69418af9
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/error_event/index.html
@@ -0,0 +1,56 @@
+---
+title: EventSource.onerror
+slug: Web/API/EventSource/error_event
+translation_of: Web/API/EventSource/onerror
+original_slug: Web/API/EventSource/onerror
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<div> </div>
+
+
+<p>{{domxref("EventSource")}} 的属性 <code><strong>onerror</strong></code> 是当发生错误且这个错误事件（{{event("error")}} ）被EventSource触发时调用的一个事件处理函数（{{event("Event_handlers", "event handler")}}）</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">eventSource.onerror = function</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: js">evtSource.onerror = function() {
+  console.log("EventSource failed.");
+};</pre>
+
+<div class="note">
+<p><strong>Note</strong>: 你可以在Github上查看这个完整例子： <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.EventSource.onerror")}}
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/eventsource/onerror/index.html b/files/zh-cn/web/api/eventsource/onerror/index.html
deleted file mode 100644
index 991d194795..0000000000
--- a/files/zh-cn/web/api/eventsource/onerror/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: EventSource.onerror
-slug: Web/API/EventSource/onerror
-translation_of: Web/API/EventSource/onerror
-original_slug: Server-sent_events/EventSource/onerror
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-<div> </div>
-
-
-<p>{{domxref("EventSource")}} 的属性 <code><strong>onerror</strong></code> 是当发生错误且这个错误事件（{{event("error")}} ）被EventSource触发时调用的一个事件处理函数（{{event("Event_handlers", "event handler")}}）</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">eventSource.onerror = function</pre>
-
-<h2 id="例子">例子</h2>
-
-<pre class="brush: js">evtSource.onerror = function() {
-  console.log("EventSource failed.");
-};</pre>
-
-<div class="note">
-<p><strong>Note</strong>: 你可以在Github上查看这个完整例子： <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">Simple SSE demo using PHP.</a></p>
-</div>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onerror", "onerror")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.EventSource.onerror")}}
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/eventsource/onopen/index.html b/files/zh-cn/web/api/eventsource/onopen/index.html
deleted file mode 100644
index 20ca54d1f4..0000000000
--- a/files/zh-cn/web/api/eventsource/onopen/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: EventSource.onopen
-slug: Web/API/EventSource/onopen
-tags:
-  - API
-  - Event Handler
-  - EventSource
-translation_of: Web/API/EventSource/onopen
-original_slug: Server-sent_events/EventSource/onopen
----
-<div>{{APIRef('WebSockets API')}}</div>
-
-<p>{{domxref("EventSource")}}接口的 <code><strong>onopen</strong></code> 属性是一个 {{event("Event_handlers", "event handler")}} ，它在收到{{event("open")}} 事件时被调用，在那时，连接刚被打开。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">eventSource.onopen = function</pre>
-
-<h2 id="示例">示例</h2>
-
-<pre class="brush: js">evtSource.onopen = function() {
-  console.log("Connection to server opened.");
-};</pre>
-
-<div class="note">
-<p><strong>注意</strong> ：你可以在 GitHub 上看到一个完整的示例— 请看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">使用php的SSE(服务器发送事件)demo。</a></p>
-</div>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Initial definition</td>
-  </tr>
- </tbody>
-</table>
-
-<ul>
-</ul>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-{{Compat("api.EventSource.onopen")}}
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li>{{domxref("EventSource")}}</li>
-</ul>
diff --git a/files/zh-cn/web/api/eventsource/open_event/index.html b/files/zh-cn/web/api/eventsource/open_event/index.html
new file mode 100644
index 0000000000..64214dbd2f
--- /dev/null
+++ b/files/zh-cn/web/api/eventsource/open_event/index.html
@@ -0,0 +1,57 @@
+---
+title: EventSource.onopen
+slug: Web/API/EventSource/open_event
+tags:
+  - API
+  - Event Handler
+  - EventSource
+translation_of: Web/API/EventSource/onopen
+original_slug: Web/API/EventSource/onopen
+---
+<div>{{APIRef('WebSockets API')}}</div>
+
+<p>{{domxref("EventSource")}}接口的 <code><strong>onopen</strong></code> 属性是一个 {{event("Event_handlers", "event handler")}} ，它在收到{{event("open")}} 事件时被调用，在那时，连接刚被打开。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">eventSource.onopen = function</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: js">evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};</pre>
+
+<div class="note">
+<p><strong>注意</strong> ：你可以在 GitHub 上看到一个完整的示例— 请看 <a href="https://github.com/mdn/dom-examples/tree/master/server-sent-events">使用php的SSE(服务器发送事件)demo。</a></p>
+</div>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+</ul>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+{{Compat("api.EventSource.onopen")}}
+
+<h2 id="相关链接">相关链接</h2>
+
+<ul>
+ <li>{{domxref("EventSource")}}</li>
+</ul>
diff --git a/files/zh-cn/web/html/index/index.html b/files/zh-cn/web/html/index/index.html
deleted file mode 100644
index baae41e64c..0000000000
--- a/files/zh-cn/web/html/index/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: HTML 文档索引
-slug: Web/HTML/Index
-tags:
-  - HTML
-  - 索引
-translation_of: Web/HTML/Index
----
-<p>{{Index("/zh-CN/docs/Web/HTML")}} 所有可用的 HTML 文档的综合索引列表。</p>
-- 
cgit v1.2.3-54-g00ecf


From 8b67957d078ae8b8e56f540ddcbd6e2f50585990 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 4 Mar 2022 22:43:54 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/stylepropertymapreadonly/getall/index.md   | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/getall/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/getall/index.md b/files/ja/web/api/stylepropertymapreadonly/getall/index.md
new file mode 100644
index 0000000000..216e826ea2
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/getall/index.md
@@ -0,0 +1,57 @@
+---
+title: StylePropertyMapReadOnly.getAll()
+slug: Web/API/StylePropertyMapReadOnly/getAll
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - getAll()
+browser-compat: api.StylePropertyMapReadOnly.getAll
+translation_of: Web/API/StylePropertyMapReadOnly/getAll
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`getAll()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。
+
+## 構文
+
+```js
+var cssStyleValues[] = StylePropertyMapReadOnly.getAll(property)
+```
+
+### 引数
+
+- property
+  - : すべての値を取得するプロパティの名前です。
+
+### 返値
+
+{{domxref("CSSStyleValue")}} オブジェクトの配列です。
+
+## 例
+
+以下の例では、 `getAll()` を使用して {{cssxref('background-image')}} プロパティに対して使用しています。宣言されているそれぞれの背景画像の項目が入った {{jsxref('Array')}} を返します。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// getAll() を background-image プロパティに対して使用
+const allBkImages = allComputedStyles.getAll('background-image');
+console.log(allBkImages); // それぞれの背景画像を項目とした配列を出力
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 8d8aabed0956c3f50cb3ee9743966b1060d34d3a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 12:47:35 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/stylepropertymapreadonly/entries/index.md  | 58 ++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/entries/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/entries/index.md b/files/ja/web/api/stylepropertymapreadonly/entries/index.md
new file mode 100644
index 0000000000..2a6aaeb799
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/entries/index.md
@@ -0,0 +1,58 @@
+---
+title: StylePropertyMapReadOnly.entries()
+slug: Web/API/StylePropertyMapReadOnly/entries
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - entries()
+browser-compat: api.StylePropertyMapReadOnly.entries
+translation_of: Web/API/StylePropertyMapReadOnly/entries
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.entries()`** メソッドは、このオブジェクトが持つ列挙可能なプロパティの `[key, value]` の組の配列を、 {{jsxref("Statements/for...in", "for...in")}} ループで提供されるのと同じ順序で返します（違いは for-in ループではプロトタイプチェーン内のプロパティも列挙する点です）。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.entries()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+この `StylePropertyMapReadOnly` オブジェクトが持つ列挙可能な `[key, value]` の組の配列です。
+
+## 例
+
+こちらは、 `StylePropertyMapReadOnly.entries()` メソッドを使用して要素の計算済みスタイルを取得する例です。
+
+```js
+// DOM 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// entries は項目の反復可能オブジェクトを返します
+const iterableStyles = allComputedStyles.entries();
+
+// align-content を最初の項目、 CSSStyleValue を 2 番目の項目とする 2 項目の配列を返します。
+console.log(iterableStyles.next().value);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From c77d1c2c3aac1b52f549ccff32c0b5ca2842229f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 21:53:26 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/stylepropertymapreadonly/index.md | 97 ++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/index.md b/files/ja/web/api/stylepropertymapreadonly/index.md
new file mode 100644
index 0000000000..c7849699c3
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/index.md
@@ -0,0 +1,97 @@
+---
+title: StylePropertyMapReadOnly
+slug: Web/API/StylePropertyMapReadOnly
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - インターフェイス
+  - リファレンス
+  - StylePropertyMapReadOnly
+browser-compat: api.StylePropertyMapReadOnly
+translation_of: Web/API/StylePropertyMapReadOnly
+---
+{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}}
+
+**`StylePropertyMapReadOnly`** は [CSS 型付きオブジェクトモデル API](/ja/docs/Web/API/CSS_Typed_Object_Model_API) のインターフェイスで、 {{domxref("CSSStyleDeclaration")}} の代替となる読み取り専用の CSS 宣言ブロックの表現を提供します。このインターフェイスのインスタンスを取得するには、 {{domxref('Element.computedStyleMap','Element.computedStyleMap()')}} を使用してください。
+
+## プロパティ
+
+- {{domxref('StylePropertyMapReadOnly.size')}}
+  - : `StylePropertyMapReadOnly` オブジェクトの大きさを、符号なし長整数値で返します。
+
+## メソッド
+
+- {{domxref('StylePropertyMapReadOnly.entries()')}}
+  - : このオブジェクト自身の列挙可能なプロパティ `[key, value]` の組を、 {{jsxref("Statements/for...in", "for...in")}} ループが提供するものと同じ順序で配列として返します（違いは、 for-in ループがプロトタイプチェーン内のプロパティも列挙することです）。
+- {{domxref('StylePropertyMapReadOnly.forEach()')}}
+  - : 指定された関数を `StylePropertyMapReadOnly` のそれぞれの要素について 1 回ずつ実行します。
+- {{domxref('StylePropertyMapReadOnly.get()')}}
+  - : 指定されたプロパティの値を返します。
+- {{domxref('StylePropertyMapReadOnly.getAll()')}}
+  - : 指定されたプロパティの値を含む {{domxref("CSSStyleValue")}} オブジェクトの配列を返します。
+- {{domxref('StylePropertyMapReadOnly.has()')}}
+  - : 指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。
+- {{domxref('StylePropertyMapReadOnly.keys()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目のキーを含む新しい*配列反復子*を返します。
+- {{domxref('StylePropertyMapReadOnly.values()')}}
+  - : `StylePropertyMapReadOnly` 内のそれぞれの項目の値を含む新しい*配列反復子*を返します。
+
+## 例
+
+観察するための要素を用意します。
+
+```html
+<p>
+   これは、いくつかのテキストを含む段落です。 CSS を追加することもできますし、しないこともできます。スタイルマップには、既定のものと継承されたすべての CSS プロパティ値が含まれます。
+</p>
+<dl id="output"></dl>
+```
+
+出力をよりよくするに、カスタムプロパティで CSS を少々追加します。
+
+```css
+p {
+   --someVariable: 1.6em;
+   --someOtherVariable: translateX(33vw);
+   --anotherVariable: 42;
+   line-height: var(--someVariable);
+}
+```
+
+JavaScript を追加して段落を取得し、 {{domxref('Element.computedStyleMap()')}} を使って、すべての既定の CSS プロパティ値の定義リストを返します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('p');
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#output');
+
+// computedStyleMap() ですべての計算済みスタイルを取得
+const stylePropertyMap = myElement.computedStyleMap();
+
+// すべてのプロパティと値のマップを反復処理して、それぞれ <dt> と <dd> を追加
+for (const [prop, val] of stylePropertyMap) {
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.innerText = prop;
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  cssValue.innerText = val;
+  stylesList.appendChild(cssValue);
+}
+```
+
+{{EmbedLiveSample("Examples", 120, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 8971bf5faa2fe5feea89d2680aa0971c3ea990cb Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 22:35:55 +0900
Subject: 2021/09/23 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/toggleattribute/index.md | 97 +++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 files/ja/web/api/element/toggleattribute/index.md

diff --git a/files/ja/web/api/element/toggleattribute/index.md b/files/ja/web/api/element/toggleattribute/index.md
new file mode 100644
index 0000000000..5f30bb6566
--- /dev/null
+++ b/files/ja/web/api/element/toggleattribute/index.md
@@ -0,0 +1,97 @@
+---
+title: Element.toggleAttribute()
+slug: Web/API/Element/toggleAttribute
+tags:
+  - API
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.toggleAttribute
+translation_of: Web/API/Element/toggleAttribute
+---
+{{APIRef("DOM")}}
+
+**`toggleAttribute()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素に対して論理属性をトグル切り替えします（存在する場合は取り除き、存在しない場合は追加します）。
+
+## 構文
+
+```js
+toggleAttribute(name);
+toggleAttribute(name, force);
+```
+
+### 引数
+
+- `name`
+  - : {{domxref("DOMString")}} で、トグル切り替えしたい属性の名前を指定します。 HTML 文書内の HTML 要素に対して `toggleAttribute()` が呼び出されるとばれると、属性名は自動的に全て小文字に変換されます。
+- `force` {{optional_inline}}
+  - : 論理値で、以下の効果があります。
+    - 指定されなかった場合、 `toggleAttribute` メソッドは `name` という名前の属性を「トグル切り替え」します。 — 存在すれば取り除き、存在しなければ追加します。
+    - true であった場合、 `toggleAttribute` メソッドは、 `name` という名前の属性を追加します。
+    - false であった場合、 `toggleAttribute` メソッドは `name` という名前の属性を取り除きます。
+
+### 返値
+
+**`name`** という属性が存在する状態になれば `true`、そうでなければ `false` となります。
+
+### 例外
+
+- `InvalidCharacterError` {{domxref("DOMException")}}
+  - : 指定された属性 `name` に、属性名として無効な文字が 1 文字以上含まれています。
+
+## 例
+
+次の例では、 `toggleAttribute()` を使って {{HTMLElement("input")}} の `disabled` 属性をトグル切り替えしています。
+
+### HTML
+
+```html
+<input value="text">
+<button>toggleAttribute("disabled")</button>
+```
+
+### JavaScript
+
+```js
+var button = document.querySelector("button");
+var input = document.querySelector("input");
+
+button.addEventListener("click", function(){
+  input.toggleAttribute("disabled");
+});
+```
+
+### 結果
+
+{{ EmbedLiveSample('Example', '300', '50') }}
+
+{{DOMAttributeMethods}}
+
+## ポリフィル
+
+```js
+if (!Element.prototype.toggleAttribute) {
+  Element.prototype.toggleAttribute = function(name, force) {
+    if(force !== void 0) force = !!force
+
+    if (this.hasAttribute(name)) {
+      if (force) return true;
+
+      this.removeAttribute(name);
+      return false;
+    }
+    if (force === false) return false;
+
+    this.setAttribute(name, "");
+    return true;
+  };
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 140737859f93a585088c03ad123faa3365380389 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 13:55:39 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/wakelocksentinel/release/index.md | 58 ++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 files/ja/web/api/wakelocksentinel/release/index.md

diff --git a/files/ja/web/api/wakelocksentinel/release/index.md b/files/ja/web/api/wakelocksentinel/release/index.md
new file mode 100644
index 0000000000..453d186d75
--- /dev/null
+++ b/files/ja/web/api/wakelocksentinel/release/index.md
@@ -0,0 +1,58 @@
+---
+title: WakeLockSentinel.release()
+slug: Web/API/WakeLockSentinel/release
+tags:
+  - API
+  - Method
+  - リファレンス
+  - 画面起動ロック API
+  - Wake Lock
+  - WakeLockSentinel
+  - screen
+browser-compat: api.WakeLockSentinel.release
+translation_of: Web/API/WakeLockSentinel/release
+---
+{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`release()`** は {{domxref("WakeLockSentinel")}} インターフェイスのメソッドで、 {{domxref("WakeLockSentinel")}} を返し、この見張り (sentinel) の解放に成功したら解決する {{jsxref("Promise")}} を返します。
+
+## 構文
+
+```js
+WakeLockSentinel.release().then(...);
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+`undefined` で解決する {{jsxref("Promise")}} を返します。
+
+### 例外
+
+例外は発生しません。起動ロックが解放されたかどうかを確認するには {{domxref("WakeLockSentinel/release_event", "release")}} イベントを待ち受けしてください。
+
+## 例
+
+この例では、ユーザーがボタンをクリックすると {{domxref("WakeLockSentinel")}} が解放されます。
+
+```js
+wakeLockOffButton.addEventListener('click', () => {
+  WakeLockSentinel.release();
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef("WakeLockSentinel")}}
+- {{DOMxRef("WakeLock.request", "navigator.wakeLock.request()")}}
-- 
cgit v1.2.3-54-g00ecf


From c30a2d386a71872600fff2441df9ff25deb505c5 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 14:27:32 +0900
Subject: Update index.md

---
 files/ja/web/api/wakelocksentinel/release/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/wakelocksentinel/release/index.md b/files/ja/web/api/wakelocksentinel/release/index.md
index 453d186d75..4f7024cd5f 100644
--- a/files/ja/web/api/wakelocksentinel/release/index.md
+++ b/files/ja/web/api/wakelocksentinel/release/index.md
@@ -6,9 +6,9 @@ tags:
   - Method
   - リファレンス
   - 画面起動ロック API
-  - Wake Lock
+  - 起動ロック
   - WakeLockSentinel
-  - screen
+  - 画面
 browser-compat: api.WakeLockSentinel.release
 translation_of: Web/API/WakeLockSentinel/release
 ---
-- 
cgit v1.2.3-54-g00ecf


From 2244ecb9c0d0be4818bb4683ec1bdd0506805370 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 16:49:03 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/wakelocksentinel/index.md | 89 ++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 files/ja/web/api/wakelocksentinel/index.md

diff --git a/files/ja/web/api/wakelocksentinel/index.md b/files/ja/web/api/wakelocksentinel/index.md
new file mode 100644
index 0000000000..84641484eb
--- /dev/null
+++ b/files/ja/web/api/wakelocksentinel/index.md
@@ -0,0 +1,89 @@
+---
+title: WakeLockSentinel
+slug: Web/API/WakeLockSentinel
+tags:
+  - API
+  - インターフェイス
+  - リファレンス
+  - 画面起動ロック API
+  - 起動ロック
+  - 画面
+browser-compat: api.WakeLockSentinel
+translation_of: Web/API/WakeLockSentinel
+---
+{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`WakeLockSentinel`** は[画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) のインターフェイスで、基礎となるプラットフォームの起動ロックへのハンドルを提供し、手動で解放および再取得することができます。起動ロックを表す {{jsxref('Object')}} は {{domxref('WakeLock.request()','navigator.wakelock.request()')}} メソッドを介して返されます。
+
+取得した `WakeLockSentinel` は {{domxref('WakeLockSentinel.release','release()')}} メソッドによって手動で解放するか、プラットフォームの起動ロックによって自動的に解放することが可能です。これは、文書が非アクティブになったり、見えなくなったりした場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。与えられた起動ロック種別のすべての `WakeLockSentinel` インスタンスを解放すると、基盤となるプラットフォームの起動ロックが解放されます。
+
+{{InheritanceDiagram}}
+
+## プロパティ
+
+_このインターフェイスは以下のプロパティを提供しています。_
+
+- {{domxref("WakeLockSentinel.released", "released")}} {{ReadOnlyInline}}
+  - : 論理値で、 `WakeLockSentinel` が解放されたかどうかを示します。
+- {{domxref("WakeLockSentinel.type", "type")}} {{ReadOnlyInline}}
+
+  - : 文字列で、取得した現在の `WakeLockSentinel` の種別を示します。
+    返値は次の通りです。
+
+    - `'screen'`: 画面の起動ロックです。端末の画面が暗くなったりロックされたりすることを防ぎます。
+
+## イベント
+
+- {{domxref("WakeLockSentinel.release_event", "release")}}
+  - : {{domxref('WakeLockSentinel.release','release()')}} メソッドが呼び出されるか、起動ロックがユーザーエージェントによって解放されると発行されます。
+
+## メソッド
+
+- {{domxref('WakeLockSentinel.release()', 'release()')}}
+  - : `WakeLockSentinel` の解放を行い、解放に成功したら解決する {{jsxref("Promise")}} を返します。
+
+## 例
+
+この例では、 `WakeLockSentinel` を要求する非同期関数を作成します。取得した後は、適切な UI への反映を行うために使用することができる `release` イベントを待ちます。見張り (sentinel) は適切な操作で取得したり解放したりすることができます。
+
+```js
+// 起動ロックの参照を作成
+let wakeLock = null;
+
+// 起動ロックを要求するための非同期関数を作成
+const requestWakeLock = async () => {
+  try {
+    wakeLock = await navigator.wakeLock.request('screen');
+
+    // release イベントを待ち受け
+    wakeLock.addEventListener('release', () => {
+      // 起動ロックが解放されたら、それに合わせて UI を変更する
+    });
+
+  } catch (err) {
+    // 起動ロックに失敗した場合 - ふつうはバッテリーなどシステム関連
+
+  }
+}
+
+wakeLockOnButton.addEventListener('click', () => {
+  requestWakeLock();
+})
+
+wakeLockOffButton.addEventListener('click', () => {
+  if (wakeLock !== null) {
+    wakeLock.release()
+      .then(() => {
+        wakeLock = null;
+      })
+  }
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 60d85858add949114befe781a52d32867ca350be Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 17:25:02 +0900
Subject: リンク先の見出しを更新
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/navigator/wakelock/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/navigator/wakelock/index.md b/files/ja/web/api/navigator/wakelock/index.md
index 4385312dea..560d04b3ea 100644
--- a/files/ja/web/api/navigator/wakelock/index.md
+++ b/files/ja/web/api/navigator/wakelock/index.md
@@ -4,7 +4,7 @@ slug: Web/API/Navigator/wakeLock
 tags:
   - API
   - リファレンス
-  - Screen Wake Lock API
+  - 画面起動ロック API
 browser-compat: api.Navigator.wakeLock
 translation_of: Web/API/Navigator/wakeLock
 ---
@@ -29,5 +29,5 @@ const wakeLock = navigator.wakeLock;
 ## 関連情報
 
 - {{DOMxRef("WakeLock.request","WakeLock.request()")}}
-- [Screen Wake Lock API](/en-US/docs/Web/API/Screen_Wake_Lock_API)
+- [画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API)
 - [Blog post - Stay awake with the Screen Wake Lock API](https://web.dev/wakelock/)
-- 
cgit v1.2.3-54-g00ecf


From 110df40cbfe901169b9ac7b1da1e29be198bdfd7 Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Fri, 11 Mar 2022 17:19:22 +0900
Subject: APIの後に半角空白を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index 32b72d0996..a856722917 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -14,7 +14,7 @@ tags:
 translation_of: Web/Guide/User_input_methods
 ---
 <div class="summary">
-<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>などがあります。</span></p>
+<p><span class="seoSummary">現代のウェブのユーザー入力は、単純なマウスやキーボードだけではありません。この記事では、ユーザー入力を管理し、オープンなウェブアプリに制御を実装するための推奨事項を、FAQ、実例、および基礎となる技術について、より詳細な情報を必要とする人のための詳細な情報へのリンクとともに提供します。関連する API とイベントには、<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a>、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API</a>、<a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a>、<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> などがあります。</span></p>
 </div>
 
 <h2 id="User_input_and_controls_workflow" name="User_input_and_controls_workflow">ユーザー入力とコントロールのワークフロー</h2>
@@ -32,7 +32,7 @@ translation_of: Web/Guide/User_input_methods
 <ul>
  <li>デバイスの中にはタッチスクリーンディスプレイを提供するものがあります。そのウェブプラットフォームは、タッチを基にしたユーザーインターフェースで指の動きを解釈するための<a href="/ja/docs/Web/API/Touch_events">タッチイベント</a>を提供します。</li>
  <li>ポインターを操作する方法としてマウスやタッチパッドを提供しているデバイスの場合、<a href="/ja/docs/Web/API/Pointer_Lock_API">Pointer Lock API</a> が一人称視点の 3D ゲームの実装や、他のアプリがポイントを合わせているデバイスの全ての制御を要求するのに役立ちます。そして <a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a> は、あなたのアプリをフルスクリーンモードで表示するのに役立ちます。</li>
- <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a>はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
+ <li><a href="/ja/docs/Web/Guide/HTML/Editable_content">コンテンツが編集可能な要素（contentEditable など）</a>のような機能を使うことで、速いリッチテキストエディターを実装することができ、そして<a href="/ja/docs/Web/API/HTML_Drag_and_Drop_API">ドラッグ＆ドロップ API</a> はユーザーがあなたのアプリ内に要素を移動することを可能にします。画面の向きがあなたのアプリで問題である時、<a href="/ja/docs/Web/API/CSS_Object_Model/Managing_screen_orientation">Screen Orientation API </a>を通して、画面の向きの状態を参照でき、またその他のアクションを実行できます。
  <li>キーボードのアクセシビリティが適切か常に気に掛ける必要があります。多くのユーザーはキーボードのみを使いウェブサイトやアプリを操作します。ですので、あなたのシステムの機能性からそれを除外することは良くない考えです。</li>
 </ul>
 
-- 
cgit v1.2.3-54-g00ecf


From eaf4b3a1cebea97822f0b942c03f03e7e0628bf5 Mon Sep 17 00:00:00 2001
From: atyamash <atyamash@yahoo-corp.jp>
Date: Wed, 9 Mar 2022 19:45:43 +0900
Subject: user_input_methods のキーボードの和訳追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/guide/user_input_methods/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/guide/user_input_methods/index.html b/files/ja/web/guide/user_input_methods/index.html
index a856722917..30989d253f 100644
--- a/files/ja/web/guide/user_input_methods/index.html
+++ b/files/ja/web/guide/user_input_methods/index.html
@@ -38,19 +38,19 @@ translation_of: Web/Guide/User_input_methods
 
 <p>以下は推奨事項一式であり、オープンなウェブアプリでそのようなツールを利用するためのベストプラクティスです。</p>
 
-<h3 id="Decide_what_input_mechanism_you’re_using">Decide what input mechanism you’re using</h3>
+<h3 id="Decide_what_input_mechanism_you’re_using">使用する入力の仕組みを決める</h3>
 
 <h4 id="Keyboard" name="Keyboard">キーボード</h4>
 
-<p>Keyboard input can be controlled by your app. For example if you want to add controls when any key gets pressed, you need to add an event listener on the window object:</p>
+<p>キーボード入力はあなたのアプリによって制御できます。例えば、何らかのキーが押された時に制御を追加したい場合、ウィンドウオブジェクトにイベントリスナーを追加する必要があります。</p>
 
 <pre class="brush: js notranslate">window.addEventListener("keydown", handleKeyDown, true);
 window.addEventListener("keyup", handleKeyUp, true);</pre>
 
-<p>where <code>handleKeyDown</code> and <code>handleKeyUp</code> are the functions implementing the controls about the <code>keydown</code> and <code>keyup</code> events.</p>
+<p><code>handleKeyDown</code> と <code>handleKeyUp</code> は、<code>keydown</code> と <code>keyup</code> イベントについての制御を実装する関数です。</p>
 
 <div class="note">
-<p><strong>注</strong>: Have a look at the <a href="/ja/docs/Web/Reference/Events">Events reference</a> and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.</p>
+<p><strong>注</strong>: キーボードイベントについて、より知りたい人は<a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a> と {{domxref("KeyboardEvent")}} ガイドをご確認ください。</p>
 </div>
 
 <h4 id="Mouse" name="Mouse">マウス</h4>
-- 
cgit v1.2.3-54-g00ecf


From 72682e1b971ccc935a318a232c68474a7c24a5a2 Mon Sep 17 00:00:00 2001
From: graycat27 <64903817+graycat27@users.noreply.github.com>
Date: Wed, 2 Mar 2022 22:54:08 +0900
Subject: fix missed letter

---
 files/ja/web/css/--_star_/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html
index 1b8bcff3d6..0003863aff 100644
--- a/files/ja/web/css/--_star_/index.html
+++ b/files/ja/web/css/--_star_/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/--*
 ---
 {{CSSRef}}
 
-`--` の接頭辞が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。
+接頭辞`--`が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。
 
 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。
 
@@ -36,7 +36,7 @@ translation_of: Web/CSS/--*
 
 ## 例
 
-### HTM
+### HTML
 
 ```html
 <p id="firstParagraph">この段落は青色の背景で黄色のテキストとなります。</p>
-- 
cgit v1.2.3-54-g00ecf


From adbd42a4e466e24bc462955b954224ae9961911f Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:10:56 +0900
Subject: Update files/ja/web/css/--_star_/index.html

---
 files/ja/web/css/--_star_/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/css/--_star_/index.html b/files/ja/web/css/--_star_/index.html
index 0003863aff..35e6f15e2b 100644
--- a/files/ja/web/css/--_star_/index.html
+++ b/files/ja/web/css/--_star_/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/--*
 ---
 {{CSSRef}}
 
-接頭辞`--`が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。
+接頭辞 `--` が付いたプロパティ名、例えば `--example-name` は、*カスタムプロパティ*を表し、 {{cssxref("var()")}} 関数を用いて他の宣言の中で使用することができる値を持ちます。
 
 カスタムプロパティは宣言された要素のスコープになり、カスケードに関連します。そのようなカスタムプロパティの値は、カスケードのアルゴリズムによって決められた宣言から取られます。
 
-- 
cgit v1.2.3-54-g00ecf


From 33100df5d2ca3929ac971161fe5ec6d55bacf382 Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sat, 19 Feb 2022 16:56:20 +0900
Subject: cookie storeと関連ページを翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/change_event/index.md | 51 ++++++++++++
 files/ja/web/api/cookiestore/delete/index.md       | 66 +++++++++++++++
 files/ja/web/api/cookiestore/get/index.md          | 93 ++++++++++++++++++++++
 files/ja/web/api/cookiestore/getall/index.md       | 66 +++++++++++++++
 files/ja/web/api/cookiestore/index.md              | 63 +++++++++++++++
 files/ja/web/api/cookiestore/set/index.md          | 89 +++++++++++++++++++++
 6 files changed, 428 insertions(+)
 create mode 100644 files/ja/web/api/cookiestore/change_event/index.md
 create mode 100644 files/ja/web/api/cookiestore/delete/index.md
 create mode 100644 files/ja/web/api/cookiestore/get/index.md
 create mode 100644 files/ja/web/api/cookiestore/getall/index.md
 create mode 100644 files/ja/web/api/cookiestore/index.md
 create mode 100644 files/ja/web/api/cookiestore/set/index.md

diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md
new file mode 100644
index 0000000000..f28ed2ba69
--- /dev/null
+++ b/files/ja/web/api/cookiestore/change_event/index.md
@@ -0,0 +1,51 @@
+---
+title: 'CookieStore: change event'
+slug: Web/API/CookieStore/change_event
+tags:
+  - API
+  - Reference
+  - Event
+  - change
+  - onchange
+  - CookieStore
+browser-compat: api.CookieStore.change_event
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+任意のCookieに変更が加えられると、 {{domxref("CookieStore")}} オブジェクトで `change` イベントが発火します。
+
+## 構文
+
+イベント名は {{domxref("EventTarget.addEventListener", "addEventListener()")}} などのメソッドで使用したり、イベントハンドラープロパティで設定されます。
+
+```js
+cookieStore.addEventListener('change', event => { })
+
+cookieStore.onchange = event => { }
+```
+
+## 例
+
+Cookieが変更されたときに通知を受けるには、以下のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `cookieStore` インスタンスにハンドラを追加することが可能です。
+
+```js
+cookieStore.addEventListener('change', function(event) {
+  console.log('1 change event');
+});
+```
+
+あるいは、 `CookieStore.onchange` イベントハンドラープロパティを使用して、 `change` イベントのハンドラを定義することもできます。
+
+```js
+cookieStore.onchange = function(event) {
+    console.log('1 change event');
+};
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md
new file mode 100644
index 0000000000..9caf027501
--- /dev/null
+++ b/files/ja/web/api/cookiestore/delete/index.md
@@ -0,0 +1,66 @@
+---
+title: CookieStore.delete()
+slug: Web/API/CookieStore/delete
+tags:
+  - API
+  - Method
+  - Reference
+  - delete()
+  - CookieStore
+browser-compat: api.CookieStore.delete
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+domxref("CookieStore")}} インターフェースの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することでCookieを失効させます。
+
+## 構文
+
+```js
+var promise = cookieStore.delete(name);
+var promise = cookieStore.delete(options);
+```
+
+### 引数
+
+このメソッドは、以下のいずれかが必要です。
+
+- `name`
+  - : Cookie の名前が入っている {{domxref("USVString")}} です。
+- オプション
+
+  - : オブジェクトは次のものを含みます。
+
+    - `name`
+      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+    - `url`{{Optional_Inline}}
+      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+    - `path`{{Optional_Inline}}
+      - : パスを含む {{domxref("USVString")}} です。
+
+> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
+
+### 返値
+
+削除が完了すると {{jsxref("Undefined")}} に解決される {{jsxref("Promise")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 与えられた `name` や `options` で表される Cookie の削除に失敗した場合にスローされます。
+
+## 例
+
+この例では、`delete()` メソッドに名前を渡すことで、 Cookie を削除しています。
+
+```js
+let result = cookieStore.delete('cookie1');
+console.log(result);
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
new file mode 100644
index 0000000000..cbefeb0b52
--- /dev/null
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -0,0 +1,93 @@
+---
+title: CookieStore.get()
+slug: Web/API/CookieStore/get
+tags:
+  - API
+  - Method
+  - Reference
+  - get()
+  - CookieStore
+browser-compat: api.CookieStore.get
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ一つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
+
+## 構文
+
+```js
+var cookie = CookieStore.get(name);
+var cookie = CookieStore.get(options);
+```
+
+### 引数
+
+このメソッドは、以下のいずれかが必要です。
+
+- `name`
+  - : Cookie の名前が入っている {{domxref("USVString")}} です。
+- オプション
+
+  - : オブジェクトは次のものを含みます。
+
+    - `name`
+      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+    - `url`
+      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+
+> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
+
+### 返値
+
+与えられた名前またはオプションに一致する最初の Cookie を含むオブジェクトに解決される {{jsxref("Promise")}} です。このオブジェクトは以下のプロパティを含んでいます。
+
+- `name`
+  - : Cookie の名前を含む {{domxref("USVString")}} です。
+- `value`
+  - : Cookie の値を含む {{domxref("USVString")}} です。
+- `domain`
+  - : Cookie のドメインを含む {{domxref("USVString")}} です。
+- `path`
+  - : Cookie のパスを含む {{domxref("USVString")}} です。
+- `expires`
+  - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。
+- `secure`
+  - : Cookie を安全なコンテキストでのみ使用するかどうかを示す {{jsxref("boolean")}} です。
+- `sameSite`
+
+  - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。
+
+    - `"strict"`
+      - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません
+    - `"lax"`
+      - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
+    - `"none"`
+      - : クッキーは、すべてのコンテキストで送信されます。
+
+    > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。
+
+## 例
+
+この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は一つの Cookie の詳細を含むオブジェクトになります。
+
+```js
+let cookie = cookieStore.get('cookie1');
+if (cookie) {
+    console.log(cookie);
+} else {
+    console.log('Cookie not found');
+}
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/getall/index.md b/files/ja/web/api/cookiestore/getall/index.md
new file mode 100644
index 0000000000..d72ee9315c
--- /dev/null
+++ b/files/ja/web/api/cookiestore/getall/index.md
@@ -0,0 +1,66 @@
+---
+title: CookieStore.getAll()
+slug: Web/API/CookieStore/getAll
+tags:
+  - API
+  - Method
+  - Reference
+  - getAll()
+  - CookieStore
+browser-compat: api.CookieStore.getAll
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。パラメータを何も渡さなければ、現在のコンテキストのすべての Cookie を返します。
+
+## 構文
+
+```js
+var list = cookieStore.getAll(name);
+var list = cookieStore.getAll(options);
+```
+
+### 引数
+
+- `name`{{Optional_Inline}}
+  - : Cookie の名前が入っている {{domxref("USVString")}} です。
+- `options`{{Optional_Inline}}
+
+  - : An object containing:
+
+    - `name`
+      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+    - `url`
+      - : Cookie の URL が入っている {{domxref("USVString")}} です。
+
+> **Note:** `url` オプションは、特定の URL をスコープとした Cookie の変更を可能にします。サービスワーカーは、自分のスコープ下にある任意の URL に送信される Cookie を取得できます。ドキュメントからは現在の URL の Cookie しか取得できないので、ドキュメントコンテキストで有効な URL はドキュメントの URL のみとなります。
+
+### 返値
+
+与えられた名前またはオプションの Cookie のリストに解決される {{jsxref("Promise")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 与えられた `name` や `options` で表される Cookie の取得に失敗した場合にスローされます。
+
+## 例
+
+この例では、引数無しで `getAll()` を使用しています。このコンテキストのすべての Cookie をオブジェクトの配列として返します。
+
+```js
+let cookies = cookieStore.getAll();
+if (cookies) {
+  console.log(cookies);
+} else {
+  console.log('Cookie not found');
+}
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
new file mode 100644
index 0000000000..40d6a5c589
--- /dev/null
+++ b/files/ja/web/api/cookiestore/index.md
@@ -0,0 +1,63 @@
+---
+title: CookieStore
+slug: Web/API/CookieStore
+tags:
+  - API
+  - Interface
+  - Reference
+  - CookieStore
+browser-compat: api.CookieStore
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+{{domxref('Cookie Store API')}} のインターフェイスである **`CookieStore`** は、ページまたはサービスワーカーから非同期にCookieを取得、設定するためのメソッドを提供します。
+
+`CookieStore` は {{domxref("Window")}} or {{domxref("ServiceWorkerGlobalScope")}} コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクタはありません。
+
+{{InheritanceDiagram}}
+
+## メソッド
+
+- {{domxref("CookieStore.delete()")}}
+  - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つCookieを削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
+- {{domxref("CookieStore.get()")}}
+  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで一つのCookieを取得します。一つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
+- {{domxref("CookieStore.getAll()")}}
+  - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookieのリストに解決される {{jsxref("Promise")}} を返します。
+- {{domxref("CookieStore.set()")}}
+  - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトをCookieに設定し、Cookieが設定されると解決される {{jsxref("Promise")}} を返します。
+
+## イベント
+
+- {{domxref("CookieStore.change_event")}}
+  - : `change` イベントは、任意のCookieに変更が加えられたときに発生します。
+
+## 例
+
+この例では、Cookieを設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。
+
+```js
+const day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+  name: "cookie1",
+  value: "cookie1-value",
+  expires: Date.now() + day,
+  domain: "example.com"
+})
+.then(
+  function() {
+    console.log("It worked!");
+  },
+  function(reason) {
+    console.error("It failed: ", reason);
+  }
+);
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md
new file mode 100644
index 0000000000..8fa58a7303
--- /dev/null
+++ b/files/ja/web/api/cookiestore/set/index.md
@@ -0,0 +1,89 @@
+---
+title: CookieStore.set()
+slug: Web/API/CookieStore/set
+tags:
+  - API
+  - Method
+  - Reference
+  - set()
+  - CookieStore
+browser-compat: api.CookieStore.set
+---
+{{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
+
+{{domxref("CookieStore")}} インターフェイスの **`getAll()`** メソッドは、渡された名前またはオプションに一致する Cookie のリストを返します。引数を何も渡さなければ、現在のコンテキストのすべての Cookie を返します。
+
+## 構文
+
+```js
+var promise = cookieStore.set(name,value);
+var promise = cookieStore.set(options);
+```
+
+### 引数
+
+このメソッドは、以下のいずれかが必要です。
+
+- `name`
+  - : Cookie の名前が入っている {{domxref("USVString")}} です。
+- `value`
+  - : Cookie の値が入っている {{domxref("USVString")}} です。
+- オプション
+
+  - : オブジェクトは次のものを含みます。
+
+    - `name`
+      - : Cookie の名前が入っている {{domxref("USVString")}} です。
+    - `value`
+      - : Cookie の値が入っている {{domxref("USVString")}} です。
+    - `expires`{{Optional_Inline}}
+      - : Cookie の有効期限を含む {{domxref("DOMTimeStamp")}} です。
+    - `domain`{{Optional_Inline}}
+      - : Cookie のドメインを含む {{domxref("USVString")}} です。
+    - `path`{{Optional_Inline}}
+      - : Cookie のパスを含む {{domxref("USVString")}} です。
+    - `sameSite`{{Optional_Inline}}
+
+      - : 以下の [SameSite](/ja/docs/Web/HTTP/Headers/Set-Cookie/SameSite) のいずれかの値です。
+
+        - `"strict"`
+          - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません
+        - `"lax"`
+          - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
+        - `"none"`
+          - : クッキーは、すべてのコンテキストで送信されます。
+
+        > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
+
+### 返値
+
+Cookie の設定が完了すると {{jsxref("Undefined")}} に解決される {{jsxref("Promise")}} です。
+
+### 例外
+
+- {{jsxref("TypeError")}}
+  - : 与えられた値での Cookie の設定に失敗した場合にスローされます。
+- {{domxref("DOMException")}} `SecurityError`
+  - : オリジンがURLに {{glossary("serialize")}} されない場合にスローされます。
+
+## 例
+
+次の例では `name`、`value`、`expires`、`domain` を持つオブジェクトを渡して Cookie を設定します。
+
+```js
+const day = 24 * 60 * 60 * 1000;
+cookieStore.set({
+  name: "cookie1",
+  value: "cookie1-value",
+  expires: Date.now() + day,
+  domain: "example.com"
+});
+```
+
+## 仕様
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 885fc19d39b08c2218e51133d47808e567ac3192 Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sun, 20 Feb 2022 18:43:53 +0900
Subject: 空白の過不足を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/change_event/index.md | 4 ++--
 files/ja/web/api/cookiestore/delete/index.md       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md
index f28ed2ba69..4596455c67 100644
--- a/files/ja/web/api/cookiestore/change_event/index.md
+++ b/files/ja/web/api/cookiestore/change_event/index.md
@@ -12,7 +12,7 @@ browser-compat: api.CookieStore.change_event
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-任意のCookieに変更が加えられると、 {{domxref("CookieStore")}} オブジェクトで `change` イベントが発火します。
+任意の Cookie に変更が加えられると、{{domxref("CookieStore")}} オブジェクトで `change` イベントが発火します。
 
 ## 構文
 
@@ -34,7 +34,7 @@ cookieStore.addEventListener('change', function(event) {
 });
 ```
 
-あるいは、 `CookieStore.onchange` イベントハンドラープロパティを使用して、 `change` イベントのハンドラを定義することもできます。
+あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラを定義することもできます。
 
 ```js
 cookieStore.onchange = function(event) {
diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md
index 9caf027501..ef00c4a32f 100644
--- a/files/ja/web/api/cookiestore/delete/index.md
+++ b/files/ja/web/api/cookiestore/delete/index.md
@@ -11,7 +11,7 @@ browser-compat: api.CookieStore.delete
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-domxref("CookieStore")}} インターフェースの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することでCookieを失効させます。
+{{domxref("CookieStore")}} インターフェイスの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することでCookieを失効させます。
 
 ## 構文
 
@@ -50,7 +50,7 @@ var promise = cookieStore.delete(options);
 
 ## 例
 
-この例では、`delete()` メソッドに名前を渡すことで、 Cookie を削除しています。
+この例では、`delete()` メソッドに名前を渡すことで、Cookie を削除しています。
 
 ```js
 let result = cookieStore.delete('cookie1');
-- 
cgit v1.2.3-54-g00ecf


From a96f7b08aee032f0010e389663c5732b84949e9a Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Mon, 21 Feb 2022 23:30:29 +0900
Subject: 文言の微修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/change_event/index.md | 4 ++--
 files/ja/web/api/cookiestore/get/index.md          | 6 +++---
 files/ja/web/api/cookiestore/index.md              | 2 +-
 files/ja/web/api/cookiestore/set/index.md          | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md
index 4596455c67..22124ad956 100644
--- a/files/ja/web/api/cookiestore/change_event/index.md
+++ b/files/ja/web/api/cookiestore/change_event/index.md
@@ -26,7 +26,7 @@ cookieStore.onchange = event => { }
 
 ## 例
 
-Cookieが変更されたときに通知を受けるには、以下のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `cookieStore` インスタンスにハンドラを追加することが可能です。
+Cookie が変更されたときに通知を受けるには、以下のように {{domxref("EventTarget.addEventListener", "addEventListener()")}} を使って `cookieStore` インスタンスにハンドラを追加可能です。
 
 ```js
 cookieStore.addEventListener('change', function(event) {
@@ -34,7 +34,7 @@ cookieStore.addEventListener('change', function(event) {
 });
 ```
 
-あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラを定義することもできます。
+あるいは、`CookieStore.onchange` イベントハンドラープロパティを使用して、`change` イベントのハンドラを定義できます。
 
 ```js
 cookieStore.onchange = function(event) {
diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
index cbefeb0b52..5ca96ed26a 100644
--- a/files/ja/web/api/cookiestore/get/index.md
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -11,7 +11,7 @@ browser-compat: api.CookieStore.get
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ一つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
+{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ1つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
 
 ## 構文
 
@@ -62,7 +62,7 @@ var cookie = CookieStore.get(options);
     - `"lax"`
       - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
     - `"none"`
-      - : クッキーは、すべてのコンテキストで送信されます。
+      - : Cookie は、すべてのコンテキストで送信されます。
 
     > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
 
@@ -73,7 +73,7 @@ var cookie = CookieStore.get(options);
 
 ## 例
 
-この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は一つの Cookie の詳細を含むオブジェクトになります。
+この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は1つの Cookie の詳細を含むオブジェクトになります。
 
 ```js
 let cookie = cookieStore.get('cookie1');
diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index 40d6a5c589..2ec1548cd3 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -21,7 +21,7 @@ browser-compat: api.CookieStore
 - {{domxref("CookieStore.delete()")}}
   - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つCookieを削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
 - {{domxref("CookieStore.get()")}}
-  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで一つのCookieを取得します。一つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
+  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで1つのCookieを取得します。1つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.getAll()")}}
   - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookieのリストに解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.set()")}}
diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md
index 8fa58a7303..b375b088e0 100644
--- a/files/ja/web/api/cookiestore/set/index.md
+++ b/files/ja/web/api/cookiestore/set/index.md
@@ -49,9 +49,9 @@ var promise = cookieStore.set(options);
         - `"strict"`
           - : Cookie は、ファーストパーティのコンテキストでのみ送信され、サードパーティのウェブサイトによるリクエストと一緒に送信されることはありません
         - `"lax"`
-          - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されませんが、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
+          - : Cookie は、通常のクロスサイト・サブクエスト（例えば、画像やフレームをサードパーティのサイトにロードするため）には送信されません。しかし、ユーザーが元のサイト内を移動しているとき（すなわち、リンクをたどっているとき）には送信されます。
         - `"none"`
-          - : クッキーは、すべてのコンテキストで送信されます。
+          - : Cookie は、すべてのコンテキストで送信されます。
 
         > **Note:** SameSite cookies の詳細については、 [SameSite cookies explained](https://web.dev/samesite-cookies-explained/) をご覧ください。
 
-- 
cgit v1.2.3-54-g00ecf


From e58841cda527eabdd6bbc36007e75bb7b846d89a Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sat, 12 Mar 2022 13:18:20 +0900
Subject: Update files/ja/web/api/cookiestore/get/index.md

Co-authored-by: Masahiro FUJIMOTO <mfujimot@gmail.com>
---
 files/ja/web/api/cookiestore/get/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
index 5ca96ed26a..bdcc07da9a 100644
--- a/files/ja/web/api/cookiestore/get/index.md
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -11,7 +11,7 @@ browser-compat: api.CookieStore.get
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ1つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
+{{Domxref("CookieStore")}} インターフェイスの **`get()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ 1 つの Cookie を返します（下記参照）。このメソッドは渡されたパラメータに最初にマッチする Cookie を返します。
 
 ## 構文
 
-- 
cgit v1.2.3-54-g00ecf


From 2a56cc59217fd5a670c0585179bd2bf33f9430ed Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sat, 12 Mar 2022 13:45:54 +0900
Subject: 数字の前後に空白を入れる
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/get/index.md | 2 +-
 files/ja/web/api/cookiestore/index.md     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
index bdcc07da9a..2f6f6dbb9e 100644
--- a/files/ja/web/api/cookiestore/get/index.md
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -73,7 +73,7 @@ var cookie = CookieStore.get(options);
 
 ## 例
 
-この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は1つの Cookie の詳細を含むオブジェクトになります。
+この例では、"cookie1" という名前の Cookie を返します。もし Cookie が見つかれば、プロミスの結果は 1 つの Cookie の詳細を含むオブジェクトになります。
 
 ```js
 let cookie = cookieStore.get('cookie1');
diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index 2ec1548cd3..c3a723aa6e 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -21,7 +21,7 @@ browser-compat: api.CookieStore
 - {{domxref("CookieStore.delete()")}}
   - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つCookieを削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
 - {{domxref("CookieStore.get()")}}
-  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで1つのCookieを取得します。1つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
+  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つのCookieを取得します。1 つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.getAll()")}}
   - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookieのリストに解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.set()")}}
-- 
cgit v1.2.3-54-g00ecf


From 53b415c8dc4653dacc9208ed5700f328dfde99de Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sat, 12 Mar 2022 13:57:27 +0900
Subject: 単語の前後に空白を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/delete/index.md |  2 +-
 files/ja/web/api/cookiestore/index.md        | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md
index ef00c4a32f..f876dfdd1e 100644
--- a/files/ja/web/api/cookiestore/delete/index.md
+++ b/files/ja/web/api/cookiestore/delete/index.md
@@ -11,7 +11,7 @@ browser-compat: api.CookieStore.delete
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-{{domxref("CookieStore")}} インターフェイスの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することでCookieを失効させます。
+{{domxref("CookieStore")}} インターフェイスの **`delete()`** メソッドは、与えられた名前またはオプションオブジェクトを持つ Cookie を削除します（下記参照）。`delete()` メソッドは日付を過去のものに変更することで Cookie を失効させます。
 
 ## 構文
 
diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index c3a723aa6e..e46e187159 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -10,7 +10,7 @@ browser-compat: api.CookieStore
 ---
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}
 
-{{domxref('Cookie Store API')}} のインターフェイスである **`CookieStore`** は、ページまたはサービスワーカーから非同期にCookieを取得、設定するためのメソッドを提供します。
+{{domxref('Cookie Store API')}} のインターフェイスである **`CookieStore`** は、ページまたはサービスワーカーから非同期に Cookie を取得、設定するためのメソッドを提供します。
 
 `CookieStore` は {{domxref("Window")}} or {{domxref("ServiceWorkerGlobalScope")}} コンテキスト内のグローバスコープの属性を介してアクセスされます。そのため、コンストラクタはありません。
 
@@ -19,22 +19,22 @@ browser-compat: api.CookieStore
 ## メソッド
 
 - {{domxref("CookieStore.delete()")}}
-  - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つCookieを削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
+  - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
 - {{domxref("CookieStore.get()")}}
-  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つのCookieを取得します。1 つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
+  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.getAll()")}}
-  - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookieのリストに解決される {{jsxref("Promise")}} を返します。
+  - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookie のリストに解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.set()")}}
-  - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトをCookieに設定し、Cookieが設定されると解決される {{jsxref("Promise")}} を返します。
+  - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される {{jsxref("Promise")}} を返します。
 
 ## イベント
 
 - {{domxref("CookieStore.change_event")}}
-  - : `change` イベントは、任意のCookieに変更が加えられたときに発生します。
+  - : `change` イベントは、任意の Cookie に変更が加えられたときに発生します。
 
 ## 例
 
-この例では、Cookieを設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。
+この例では、Cookie を設定し、操作が成功したか失敗したかのフィードバックをコンソールに書き込んでいます。
 
 ```js
 const day = 24 * 60 * 60 * 1000;
-- 
cgit v1.2.3-54-g00ecf


From 1651ef597c75e45f8e7d09df0f23d8b4d488449d Mon Sep 17 00:00:00 2001
From: mongolyy <mongolyy@gmail.com>
Date: Sat, 12 Mar 2022 14:25:22 +0900
Subject: 単語の前後に空白を追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/cookiestore/index.md     | 4 ++--
 files/ja/web/api/cookiestore/set/index.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index e46e187159..45ab80f27b 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -21,9 +21,9 @@ browser-compat: api.CookieStore
 - {{domxref("CookieStore.delete()")}}
   - : `delete()` メソッドは与えられた名前またはオプションオブジェクトを持つ Cookie を削除します。削除が完了すると解決される {{jsxref("Promise")}} が返されます。
 - {{domxref("CookieStore.get()")}}
-  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つのCookieの詳細に解決される {{jsxref("Promise")}} を返します。
+  - : `get()` メソッドは与えられた名前またはオプションオブジェクトで 1 つの Cookie を取得します。1 つの Cookie の詳細に解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.getAll()")}}
-  - : `getAll()` メソッドはマッチするすべてのCookieを取得します。Cookie のリストに解決される {{jsxref("Promise")}} を返します。
+  - : `getAll()` メソッドはマッチするすべての Cookie を取得します。Cookie のリストに解決される {{jsxref("Promise")}} を返します。
 - {{domxref("CookieStore.set()")}}
   - : `set()` メソッドは与えられた名前と値またはオプションオブジェクトを Cookie に設定し、Cookie が設定されると解決される {{jsxref("Promise")}} を返します。
 
diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md
index b375b088e0..bd407b31da 100644
--- a/files/ja/web/api/cookiestore/set/index.md
+++ b/files/ja/web/api/cookiestore/set/index.md
@@ -64,7 +64,7 @@ Cookie の設定が完了すると {{jsxref("Undefined")}} に解決される {{
 - {{jsxref("TypeError")}}
   - : 与えられた値での Cookie の設定に失敗した場合にスローされます。
 - {{domxref("DOMException")}} `SecurityError`
-  - : オリジンがURLに {{glossary("serialize")}} されない場合にスローされます。
+  - : オリジンが URL に {{glossary("serialize")}} されない場合にスローされます。
 
 ## 例
 
-- 
cgit v1.2.3-54-g00ecf


From a90e3d62a228cafd3eb9790cb778c23e4649a2c4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:18:24 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/change_event/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/change_event/index.md b/files/ja/web/api/cookiestore/change_event/index.md
index 22124ad956..4d497e64cd 100644
--- a/files/ja/web/api/cookiestore/change_event/index.md
+++ b/files/ja/web/api/cookiestore/change_event/index.md
@@ -42,7 +42,7 @@ cookieStore.onchange = function(event) {
 };
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From 7677b331868870c5eeba1d0b1e22e6dd91c7bd8b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:19:03 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/delete/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/delete/index.md b/files/ja/web/api/cookiestore/delete/index.md
index f876dfdd1e..a8a47cc20d 100644
--- a/files/ja/web/api/cookiestore/delete/index.md
+++ b/files/ja/web/api/cookiestore/delete/index.md
@@ -57,7 +57,7 @@ let result = cookieStore.delete('cookie1');
 console.log(result);
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From 401091638c2c9e1d4e55ec3c48aeecff09cd638b Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:20:09 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/get/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/get/index.md b/files/ja/web/api/cookiestore/get/index.md
index 2f6f6dbb9e..0048bd09dc 100644
--- a/files/ja/web/api/cookiestore/get/index.md
+++ b/files/ja/web/api/cookiestore/get/index.md
@@ -84,7 +84,7 @@ if (cookie) {
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From 4041575ba8a09ff37c0fc2ec59bc51b2cc617b11 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:20:51 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/set/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/set/index.md b/files/ja/web/api/cookiestore/set/index.md
index bd407b31da..29c76a568c 100644
--- a/files/ja/web/api/cookiestore/set/index.md
+++ b/files/ja/web/api/cookiestore/set/index.md
@@ -80,7 +80,7 @@ cookieStore.set({
 });
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From 75a0061a82a23c221fe29d1565e0d9aecd059167 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:21:41 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/getall/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/getall/index.md b/files/ja/web/api/cookiestore/getall/index.md
index d72ee9315c..611181a105 100644
--- a/files/ja/web/api/cookiestore/getall/index.md
+++ b/files/ja/web/api/cookiestore/getall/index.md
@@ -57,7 +57,7 @@ if (cookies) {
 }
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From a8532b653d4592208ca330e29e79b036777fcc79 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 12 Mar 2022 21:31:36 +0900
Subject: Update index.md

---
 files/ja/web/api/cookiestore/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/cookiestore/index.md b/files/ja/web/api/cookiestore/index.md
index 45ab80f27b..ff096259a5 100644
--- a/files/ja/web/api/cookiestore/index.md
+++ b/files/ja/web/api/cookiestore/index.md
@@ -54,7 +54,7 @@ cookieStore.set({
 );
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
-- 
cgit v1.2.3-54-g00ecf


From d26aa86c3807d9068a985f505573b4a1a2d5af68 Mon Sep 17 00:00:00 2001
From: takaram <takaram71@gmail.com>
Date: Sat, 12 Mar 2022 16:32:27 +0900
Subject: Fix typo

---
 files/ja/web/javascript/reference/strict_mode/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ja/web/javascript/reference/strict_mode/index.md b/files/ja/web/javascript/reference/strict_mode/index.md
index b2fb61e0f6..a3de03d9ba 100644
--- a/files/ja/web/javascript/reference/strict_mode/index.md
+++ b/files/ja/web/javascript/reference/strict_mode/index.md
@@ -119,7 +119,7 @@ fixed.newProp = 'ohai'; // TypeError が発生します
 delete Object.prototype; // TypeError が発生します
 ```
 
-第四に、厳格モードでは、関数の引数名が一意であることが要求されます。通常のコードでは、引数の名前が重複していると、同じ名前の前の引数が見えなくなります。こうした前の引数は `arguments[i]` を通せば利用可能なので、完全にアクセスできないわけではありません。しかし、この隠蔽はほとんど意味がなく、おそらく望ましくないものです（例えば、タイプミスを隠してしまうかもしれません）。したがって、厳密モードでは引数名が超空すると構文エラーになります。
+第四に、厳格モードでは、関数の引数名が一意であることが要求されます。通常のコードでは、引数の名前が重複していると、同じ名前の前の引数が見えなくなります。こうした前の引数は `arguments[i]` を通せば利用可能なので、完全にアクセスできないわけではありません。しかし、この隠蔽はほとんど意味がなく、おそらく望ましくないものです（例えば、タイプミスを隠してしまうかもしれません）。したがって、厳格モードでは引数名が重複すると構文エラーになります。
 
 ```js
 function sum(a, a, c) { // !!! 構文エラー
@@ -128,7 +128,7 @@ function sum(a, a, c) { // !!! 構文エラー
 }
 ```
 
-第五に、ECMAScript 5 の厳格モードでは、[`0` を先頭とした 8 進数表記や 8 進数エスケープシーケンスを禁止](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal)します。厳格モード以外では、 `0644` のような `0` で始まる数値は、すべての桁が 8 より小さい場合、 8 進数 (`0644 === 420`) として解釈されます。 8 進数のエスケープシーケンス、例えば `"\45"` は `"%"` と等しいものですが、文字を 8 進数の拡張 ASCII 文字コード番号で表現するために使用されます。厳密モードでは、これは構文エラーになります。 ECMAScript 2015 では、数値の前に "`0o`" を付けることで 8 進数のリテラルに対応しています。
+第五に、ECMAScript 5 の厳格モードでは、[`0` を先頭とした 8 進数表記や 8 進数エスケープシーケンスを禁止](/ja/docs/Web/JavaScript/Reference/Errors/Deprecated_octal)します。厳格モード以外では、 `0644` のような `0` で始まる数値は、すべての桁が 8 より小さい場合、 8 進数 (`0644 === 420`) として解釈されます。 8 進数のエスケープシーケンス、例えば `"\45"` は `"%"` と等しいものですが、文字を 8 進数の拡張 ASCII 文字コード番号で表現するために使用されます。厳格モードでは、これは構文エラーになります。 ECMAScript 2015 では、数値の前に "`0o`" を付けることで 8 進数のリテラルに対応しています。
 
 ```js
 var a = 0o10; // ES2015: 8 進数
-- 
cgit v1.2.3-54-g00ecf


From 8de27f8943d921a6cc21bec34e66cf98a191f146 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Sat, 12 Mar 2022 19:57:10 +0100
Subject: Change variable name to "para" to match en-US (#4514)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update index.md

Correction nom variable exercice Compte à rebours

* Remaining para fixes, embedlivesample implicit arg

Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com>
---
 .../building_blocks/looping_code/index.md          | 52 +++++++++++-----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md
index 29282f7177..db4470f17c 100644
--- a/files/fr/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md
@@ -145,7 +145,7 @@ Regardons maintenant un exemple qui illustre parfaitement en quoi les boucles so
 </html>
 ```
 
-{{ EmbedLiveSample('Exemple', '100%', 400) }}
+{{EmbedLiveSample('', '100%', 400)}}
 
 #### Principe de boucle
 
@@ -197,13 +197,13 @@ Regardons maintenant un vrai exemple, afin de visualiser leurs actions plus clai
 ```js
 const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
 let info = "Mes chat s'appellent ";
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 
 for (let i = 0; i < chats.length; i++) {
   info += chats[i] + ', ';
 }
 
-paragraphe.textContent = info;
+para.textContent = info;
 ```
 
 ### Sortie
@@ -224,13 +224,13 @@ Cela nous donne la sortie suivante :
     <script>
     const chats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
     let info = "Mes chats s'appellent ";
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
 
     for (let i = 0; i < chats.length; i++) {
       info += chats[i] + ', ';
     }
 
-    paragraphe.textContent = info;
+    para.textContent = info;
 
     </script>
 
@@ -238,7 +238,7 @@ Cela nous donne la sortie suivante :
 </html>
 ```
 
-{{ EmbedLiveSample('Sortie', '100%', 60) }}
+{{EmbedLiveSample('', '100%', 60)}}
 
 > **Note :** Vous pouvez trouver aussi cet [exemple de code sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) (et [le voir tourner en live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html)).
 
@@ -298,7 +298,7 @@ Maintenant sur le JavaScript :
 
 ```js
 const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-const paragraphe = document.querySelector('p');
+const para = document.querySelector('p');
 const input = document.querySelector('input');
 const bouton = document.querySelector('button');
 
@@ -309,10 +309,10 @@ bouton.addEventListener('click', function() {
   for (let i = 0; i < contacts.length; i++) {
     let splitContact = contacts[i].split(':');
     if (splitContact[0] === searchName) {
-      paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
       break;
     } else {
-      paragraphe.textContent = 'Contact not found.';
+      para.textContent = 'Contact not found.';
     }
   }
 });
@@ -337,7 +337,7 @@ bouton.addEventListener('click', function() {
 
     <script>
     const contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
@@ -348,10 +348,10 @@ bouton.addEventListener('click', function() {
       for (let i = 0; i < contacts.length; i++) {
         let splitContact = contacts[i].split(':');
         if (splitContact[0] === searchName) {
-          paragraphe.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+          para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
           break;
         } else {
-          paragraphe.textContent = 'Contact not found.';
+          para.textContent = 'Contact not found.';
         }
       }
     });
@@ -361,7 +361,7 @@ bouton.addEventListener('click', function() {
 </html>
 ```
 
-{{ EmbedLiveSample('Résultat', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 1.  Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points.
 2.  Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats.
@@ -391,7 +391,7 @@ for (let i = 1; i <= num; i++) {
     continue;
   }
 
-  paragraphe.textContent += i + ' ';
+  para.textContent += i + ' ';
 }
 ```
 
@@ -413,12 +413,12 @@ Ici la sortie :
   <p>Output: </p>
 
     <script>
-    const paragraphe = document.querySelector('p');
+    const para = document.querySelector('p');
     const input = document.querySelector('input');
     const bouton = document.querySelector('button');
 
     bouton.addEventListener('click', function() {
-      paragraphe.textContent = 'Output: ';
+      para.textContent = 'Output: ';
       let num = input.value;
       input.value = '';
       input.focus();
@@ -428,7 +428,7 @@ Ici la sortie :
           continue;
         }
 
-        paragraphe.textContent += i + ' ';
+        para.textContent += i + ' ';
       }
     });
     </script>
@@ -437,7 +437,7 @@ Ici la sortie :
 </html>
 ```
 
-{{ EmbedLiveSample('Passer_des_itérations_avec_continue', '100%', 100) }}
+{{EmbedLiveSample('', '100%', 100)}}
 
 1.  Dans ce cas, l'entrée doit être un nombre (`num`). La boucle `for` est dotée d'un compteur commençant à 1 (car nous ne sommes pas intéressés par 0 dans ce cas), une condition de sortie indiquant que la boucle s'arrêtera lorsque le compteur deviendra plus grand que l'entrée `num`, et un itérateur ajoutera 1 au compteur à chaque fois.
 2.  À l'intérieur de la boucle, nous trouvons la racine carrée de chaque nombre en utilisant [Math.sqrt(i)](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt0, puis vérifions si la racine carrée est un entier en vérifiant si elle est identique à elle-même lorsqu'elle a été arrondie à l'entier le plus proche (ceci est ce que [Math.floor()](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor) fait au nombre auquel il est passé).
@@ -521,11 +521,11 @@ Dans cet exercice, nous vous proposons d'écrire un compte à rebours de lanceme
 - Créer une boucle de 10 jusqu'à 0. Nous vous avons fourni un initialiseur — `let i = 10;`
 - Pour chaque itération, créer un nouveau paragraphe à ajouter dans la balise de sortie `<div>` que nous avons selectionnée en utilisant : `const output = document.querySelector('.output');` En commentaire, nous vous avons fourni trois lignes de code qui doivent être utilisées quelque part à l'intérieur de la boucle :
 
-  - `const paragraphe = document.createElement('p');` — crée un nouveau paragraphe.
+  - `const para = document.createElement('p');` — crée un nouveau paragraphe.
   - `output.appendChild(para);` — ajoute le paragraphe à la sortie `<div>`.
-  - `paragraphe.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
+  - `para.textContent =` — Rend le texte à l'intérieur du paragraphe identique à ce que vous avez entré du côté droit du signe égal.
 
-- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `paragraphe.textContent = )`
+- Chaque nombre de l'itération nécessite un texte différent dans le paragraphe de cette itération (vous aurez besoin d'une expression conditionnelle et plusieurs lignes du type : `para.textContent = )`
 
   - Si le nombre est 10, écrire "Countdown 10" dans le paragraphe.
   - Si le nombre est 0, écrire "Blast off!" dans le paragraphe.
@@ -548,8 +548,8 @@ output.innerHTML = '';
 
 // let i = 10;
 
-// const paragraphe = document.createElement('p');
-// paragraphe.textContent = ;
+// const para = document.createElement('p');
+// para.textContent = ;
 // output.appendChild(para);
 </textarea>
 
@@ -637,9 +637,9 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample('Apprentissage_actif_Lancer_le_compte_à_rebours', '100%', 780) }}
+{{EmbedLiveSample('', '100%', 780)}}
 
-## Apprentissage actif : remplir une liste d'invités.
+## Apprentissage actif : remplir une liste d'invités
 
 Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée dans un tableau et de la mettre sur une liste d'invités. Mais cela n'est pas si simple — nous ne voulons pas laisser entrer Phil et Lola parce que ce sont des goinfres et qu'ils sont mal élevés, et ils mangent toujours toute la nourriture ! Nous avons deux listes, une pour les invités admis, une pour ceux que l'on refuse.
 
@@ -792,7 +792,7 @@ textarea.onkeyup = function(){
 };
 ```
 
-{{ EmbedLiveSample("Apprentissage_actif_remplir_une_liste_d'invités.", '100%', 580) }}
+{{EmbedLiveSample("", '100%', 580)}}
 
 ## Quel type de boucle utiliser ?
 
-- 
cgit v1.2.3-54-g00ecf


From 6cfe2f056f5edfe4c5ce658f3f81ef6d21667132 Mon Sep 17 00:00:00 2001
From: Bora Lee <learnerbr@gmail.com>
Date: Mon, 14 Mar 2022 10:52:49 +0900
Subject: Update index.js (#4596)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 반환값의 타입이 문자열임을 명시해줌
---
 .../web/javascript/reference/global_objects/number/tofixed/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html
index cf383f2265..28ffe38198 100644
--- a/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html
+++ b/files/ko/web/javascript/reference/global_objects/number/tofixed/index.html
@@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
 ---
 <div>{{JSRef}}</div>
 
-<p><code><strong>toFixed()</strong></code> 메서드는 숫자를 고정 소수점 표기법으로 표기해 반환합니다.</p>
+<p><code><strong>toFixed()</strong></code> 메서드는 숫자를 고정 소수점 표기법(fixed-point notation)으로 표시합니다.</p>
 
 <div>{{EmbedInteractiveExample("pages/js/number-tofixed.html")}}</div>
 
@@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/Number/toFixed
 
 <h3 id="반환_값">반환 값</h3>
 
-<p>고정 소수점 표기법을 사용하여 나타낸 수.</p>
+<p>고정 소수점 표기법을 사용하여 나타낸 수를 문자열로 바꾼 값.</p>
 
 <h3 id="예외">예외</h3>
 
-- 
cgit v1.2.3-54-g00ecf


From 5b885924cc8a2172c4352a16ab56b1cf124cdf40 Mon Sep 17 00:00:00 2001
From: snxx <snmgreenx@gmail.com>
Date: Mon, 14 Mar 2022 17:13:46 +0500
Subject: (ru) Fix typo at <time> element page (#4285)

Co-authored-by: Sasha Sushko <sushko@outlook.com>
---
 files/ru/web/html/element/time/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/web/html/element/time/index.html b/files/ru/web/html/element/time/index.html
index ea75d25454..3f463a4b99 100644
--- a/files/ru/web/html/element/time/index.html
+++ b/files/ru/web/html/element/time/index.html
@@ -3,7 +3,7 @@ title: <time>
 slug: Web/HTML/Element/time
 translation_of: Web/HTML/Element/time
 ---
-<p><strong>Элемент HTML</strong> <strong><code>&lt;time&gt;</code></strong> используется для представления либо времени в 24-рехчасовом формате, либо точной даты по <a class="external" href="http://ru.wikipedia.org/wiki/%D0%93%D1%80%D0%B8%D0%B3%D0%BE%D1%80%D0%B8%D0%B0%D0%BD%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C">Григорианскому календарю</a> (с опциональным указанием времени и часового пояса).</p>
+<p><strong>Элемент HTML</strong> <strong><code>&lt;time&gt;</code></strong> используется для представления либо времени в 24-часовом формате, либо точной даты по <a class="external" href="http://ru.wikipedia.org/wiki/%D0%93%D1%80%D0%B8%D0%B3%D0%BE%D1%80%D0%B8%D0%B0%D0%BD%D1%81%D0%BA%D0%B8%D0%B9_%D0%BA%D0%B0%D0%BB%D0%B5%D0%BD%D0%B4%D0%B0%D1%80%D1%8C">Григорианскому календарю</a> (с опциональным указанием времени и часового пояса).</p>
 
 <p>Этот элемент предназначен для представления дат и времени в машиночитаемом формате. Это облегчает клиентским приложениям добавление событий в календарь пользователя. </p>
 
-- 
cgit v1.2.3-54-g00ecf


From 3e1261e040b33b91e7a253acf9cf6afd8ef7c018 Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Mon, 14 Mar 2022 13:36:23 +0100
Subject: Fixes 4586 - minor fixes for <em> page (#4592)

* Minor fixes for <em>

* Missed punctuation fix
---
 files/fr/web/html/element/em/index.md | 32 +++++++++++++-------------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/files/fr/web/html/element/em/index.md b/files/fr/web/html/element/em/index.md
index 07cc7b951e..5236686553 100644
--- a/files/fr/web/html/element/em/index.md
+++ b/files/fr/web/html/element/em/index.md
@@ -1,18 +1,12 @@
 ---
 title: '<em> : l''élément d''emphase'
 slug: Web/HTML/Element/em
-tags:
-  - Element
-  - HTML
-  - HTML text-level semantics
-  - Reference
-  - Web
 translation_of: Web/HTML/Element/em
 browser-compat: html.elements.em
 ---
 {{HTMLRef}}
 
-L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.
+L'élément [HTML](/fr/docs/Web/HTML) **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.
 
 {{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
 
@@ -25,13 +19,13 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte
         >
       </th>
       <td>
-        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
           >Contenu de flux</a
         >,
-        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé"
           >contenu phrasé</a
         >,
-        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible"
           >contenu tangible</a
         >.
       </td>
@@ -39,7 +33,7 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte
     <tr>
       <th scope="row">Contenu autorisé</th>
       <td>
-        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé"
           >Contenu phrasé</a
         >.
       </td>
@@ -55,7 +49,7 @@ L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte
       <th scope="row">Parents autorisés</th>
       <td>
         Tout élément qui accepte du
-        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phrasé"
           >contenu phrasé</a
         >.
       </td>
@@ -95,19 +89,19 @@ Comme tous les éléments HTML, cet élément prend en charge [les attributs uni
 
 L'élément `<em>` est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.
 
-Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite) ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure.
+Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique&nbsp;; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite)&nbsp;; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure.
 
-### \<i> ou \<em> ?
+### `<i>` ou `<em>`&nbsp;?
 
-Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?
+Lorsqu'on débute en développement web, on peut être dérouté de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence&nbsp;? Laquelle doit-on utiliser&nbsp;?
 
-Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`).
+Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`.)
 
 Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.
 
-Un exemple pour `<em>` pourrait être : « _Faites_-le déjà ! », ou : « Nous _devions_ faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.
+Un exemple pour `<em>` pourrait être&nbsp;: «&nbsp;_Faites_-le déjà&nbsp;!&nbsp;», ou&nbsp;: «&nbsp;Nous _devions_ faire quelque chose à ce sujet&nbsp;». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.
 
-Un exemple pour `<i>` pourrait être : « Le _Queen Mary_ a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé _Queen Mary_. Un autre exemple de `<i>` pourrait être : « Le mot _the_ est un article ».
+Un exemple pour `<i>` pourrait être&nbsp;: «&nbsp;Le <i lang="en">Queen Mary</i> a pris la mer la nuit dernière&nbsp;». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot «&nbsp;Queen Mary&nbsp;». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé <i lang="en">Queen Mary</i>. Un autre exemple de `<i>` pourrait être&nbsp;: «&nbsp;Le mot <i lang="en">the</i> est un article&nbsp;».
 
 ## Exemple
 
@@ -122,7 +116,7 @@ L'élément `<em>` est souvent utilisé pour indiquer un contraste, implicite ou
 
 ### Résultat
 
-{{EmbedLiveSample("Exemple", "", 100)}}
+{{EmbedLiveSample("")}}
 
 ## Spécifications
 
-- 
cgit v1.2.3-54-g00ecf


From 4ac0336ba327e194ddf8c9599e49ccbba6f24246 Mon Sep 17 00:00:00 2001
From: Hiroki Shimizu <elsewhere2424@gmail.com>
Date: Sun, 13 Mar 2022 04:26:52 +0900
Subject: Fix typo

---
 files/ja/web/api/element/error_event/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ja/web/api/element/error_event/index.html b/files/ja/web/api/element/error_event/index.html
index c5e0ddc136..b058a7a822 100644
--- a/files/ja/web/api/element/error_event/index.html
+++ b/files/ja/web/api/element/error_event/index.html
@@ -43,7 +43,7 @@ translation_of: Web/API/Element/error_event
  </tbody>
 </table>
 
-<p>イベントオブジェ久は、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p>
+<p>イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は {{domxref("UIEvent")}} のインスタンスとなり、それ以外の場合は {{domxref("Event")}} となります。</p>
 
 <h2 id="Examples" name="Examples">例</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From e57c41545cabbb0912dd13d9db8eaaadd1612f6c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 4 Mar 2022 22:10:21 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/stylepropertymapreadonly/has/index.md  | 55 ++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/has/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/has/index.md b/files/ja/web/api/stylepropertymapreadonly/has/index.md
new file mode 100644
index 0000000000..1014a7671a
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/has/index.md
@@ -0,0 +1,55 @@
+---
+title: StylePropertyMapReadOnly.has()
+slug: Web/API/StylePropertyMapReadOnly/has
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - has()
+browser-compat: api.StylePropertyMapReadOnly.has
+translation_of: Web/API/StylePropertyMapReadOnly/has
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`has()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティが `StylePropertyMapReadOnly` オブジェクトにあるかどうかを示します。
+
+## 構文
+
+```js
+var boolean = StylePropertyMapReadOnly.has(property)
+```
+
+### 引数
+
+- property
+  - : プロパティの名前です。
+
+### 返値
+
+論理値です。
+
+## 例
+
+ここでは、 `has()` メソッドを使用して、 padding-top プロパティが button 要素の style 属性に存在するかどうかを確認します。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('.example');
+
+// style 属性内のものを attributeStyleMap および has() で検索
+const hasPadTop = buttonEl.attributeStyleMap.has('padding-top);
+
+console.log(hasPadTop); // padding-top が style 属性にあれば true を記録
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 44c0e38061a17cc1a45c44b35d90798a37aa68fe Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Fri, 4 Mar 2022 22:02:16 +0900
Subject: 2022/02/18 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/stylepropertymapreadonly/keys/index.md | 56 ++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/keys/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/keys/index.md b/files/ja/web/api/stylepropertymapreadonly/keys/index.md
new file mode 100644
index 0000000000..d771251f8d
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/keys/index.md
@@ -0,0 +1,56 @@
+---
+title: StylePropertyMapReadOnly.keys()
+slug: Web/API/StylePropertyMapReadOnly/keys
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - keys()
+browser-compat: api.StylePropertyMapReadOnly.keys
+translation_of: Web/API/StylePropertyMapReadOnly/keys
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.keys()`** メソッドは、 `StylePropertyMapReadOnly` の各項目のキーを含む新しい*配列反復子*を返します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.keys()
+```
+
+### 引数
+
+なし。
+
+### 返値
+
+新しい {{jsxref("Array")}} です。
+
+## 例
+
+この例では、 `keys()` メソッドを使用して {{domxref('Element.computedStyleMap()')}} の中にあるプロパティにアクセスすることができます。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('button');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// keys はプロパティの反復可能なリストを返す
+const props = allComputedStyles.keys();
+console.log(props.next().value); // align-content を返す
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From cd1b99cec7e42de187e103f12ef181423911533d Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 11:20:42 +0900
Subject: 2022/02/09 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/stylepropertymapreadonly/foreach/index.md  | 71 ++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/foreach/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/foreach/index.md b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md
new file mode 100644
index 0000000000..24ea2289e0
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/foreach/index.md
@@ -0,0 +1,71 @@
+---
+title: StylePropertyMapReadOnly.forEach()
+slug: Web/API/StylePropertyMapReadOnly/forEach
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - forEach()
+browser-compat: api.StylePropertyMapReadOnly.forEach
+translation_of: Web/API/StylePropertyMapReadOnly/forEach
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`StylePropertyMapReadOnly.forEach()`** メソッドは、指定された関数を {{domxref('StylePropertyMapReadOnly')}} のそれぞれの要素に対して 1 回ずつ呼び出します。
+
+## 構文
+
+```js
+StylePropertyMapReadOnly.forEach(function callback(currentValue[, index[, array]]) {
+    //コード
+}[, thisArg]);
+```
+
+### 引数
+
+- `callback`
+
+  - : それぞれの要素に対して呼び出す関数であり、 3 つの引数を取ります。
+
+    - `currentValue`
+      - : 処理しようとしている現在の要素の値です。
+    - `index`{{optional_inline}}
+      - : 処理しようとしている現在の要素の位置です。
+    - `array`{{optional_inline}}
+      - : `forEach()` が呼び出された StylePropertyMapReadOnly です。
+
+- `thisArg` {{Optional_inline}}
+  - : `callback` を実行するときに **`this`** として使用する値（すなわち、 `Object` への参照）です。
+
+### 返値
+
+{{jsxref("undefined")}} です。
+
+## 例
+
+こちらは、 `forEach()` を {{domxref('Element.computedStyleMap()')}} の結果に対して使用する例です。
+
+```js
+// button 要素を取得
+const buttonEl = document.querySelector('.example');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// forEach ですべてのプロパティ/値の組に対してコードを実行することができます
+allComputedStyles.forEach((elem, index, arr) => {
+  // code to run for each pair
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 22bf479c85aeeadcb60bca084bf6bb822d78a25c Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 12:00:09 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/stylepropertymapreadonly/get/index.md  | 101 +++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/get/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/get/index.md b/files/ja/web/api/stylepropertymapreadonly/get/index.md
new file mode 100644
index 0000000000..c3c45925c1
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/get/index.md
@@ -0,0 +1,101 @@
+---
+title: StylePropertyMapReadOnly.get()
+slug: Web/API/StylePropertyMapReadOnly/get
+tags:
+  - API
+  - CSS Typed Object Model API
+  - 実験的
+  - Houdini
+  - メソッド
+  - リファレンス
+  - get()
+browser-compat: api.StylePropertyMapReadOnly.get
+translation_of: Web/API/StylePropertyMapReadOnly/get
+---
+{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}
+
+**`get()`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスのメソッドで、指定されたプロパティの最初の値を {{domxref("CSSStyleValue")}} で返します。
+
+## 構文
+
+```js
+var declarationBlock = StylePropertyMapReadOnly.get(property)
+```
+
+### 引数
+
+- property
+  - : 値を取得するプロパティの名前です。
+
+### 返値
+
+{{domxref("CSSStyleValue")}} オブジェクトです。
+
+## 例
+
+少しだけ、プロパティと値を取得してみましょう。まず、 HTML の段落の中にリンクを作成し、 JavaScript で入力する定義リストを追加しましょう。
+
+```html
+<p>
+   <a href="https://example.com">リンク</a>
+</p>
+<dl id="results"></dl>
+```
+
+カスタムプロパティや継承可能なプロパティなど、ちょっとした CSS を追加しています。
+
+```css
+p {
+  font-weight: bold;
+}
+a {
+   --color: red;
+   color: var(--color);
+}
+```
+
+Element インターフェイスの [`computedStyleMap()`](/ja/docs/Web/API/Element/computedStyleMap) を使用して、 _StylePropertyMapReadOnly_ オブジェクトを返します。興味のあるプロパティの配列を作成し、 StylePropertyMapReadOnly の `get()` メソッドを使用してそれらの値のみを取得します。
+
+```js
+// 要素を取得
+const myElement = document.querySelector('a');
+
+// すべての計算済みスタイルを `computedStyleMap` で受け取る
+const styleMap = myElement.computedStyleMap();
+
+// 入力する <dl> を取得
+const stylesList = document.querySelector('#results');
+
+// 関心のあるプロパティのリスト
+const ofInterest = ['font-weight', 'border-left-color', 'color', '--color'];
+
+// 関心のあるプロパティを反復処理
+for ( let i = 0; i < ofInterest.length; i++ ) {
+
+  // プロパティ
+  const cssProperty = document.createElement('dt');
+  cssProperty.innerText = ofInterest[i];
+  stylesList.appendChild(cssProperty);
+
+  // 値
+  const cssValue = document.createElement('dd');
+  // use get() to find the value
+  cssValue.innerText = styleMap.get(ofInterest[i]);
+  stylesList.appendChild(cssValue);
+}
+```
+
+{{EmbedLiveSample("Examples", 120, 300)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 型付きオブジェクトモデル API](/ja/docs/Web/Houdini/CSS_Typed_OM)
+- [Houdini の学習: CSS 型付きオブジェクトモデル](/ja/docs/Web/Houdini/learn/CSS_Typed_OM)
-- 
cgit v1.2.3-54-g00ecf


From 66d2ca5b37ae2a5a5def0f115358d51a565d0f04 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 20:53:03 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/api/stylepropertymapreadonly/size/index.md | 52 ++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 files/ja/web/api/stylepropertymapreadonly/size/index.md

diff --git a/files/ja/web/api/stylepropertymapreadonly/size/index.md b/files/ja/web/api/stylepropertymapreadonly/size/index.md
new file mode 100644
index 0000000000..e4d02780e3
--- /dev/null
+++ b/files/ja/web/api/stylepropertymapreadonly/size/index.md
@@ -0,0 +1,52 @@
+---
+title: StylePropertyMapReadOnly.size
+slug: Web/API/StylePropertyMapReadOnly/size
+tags:
+  - API
+  - CSS 型付きオブジェクトモデル API
+  - 実験的
+  - Houdini
+  - Property
+  - リファレンス
+  - StylePropertyMapReadOnly
+  - size
+browser-compat: api.StylePropertyMapReadOnly.size
+translation_of: Web/API/StylePropertyMapReadOnly/size
+---
+{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}}
+
+**`size`** は {{domxref("StylePropertyMapReadOnly")}} インターフェイスの読み取り専用プロパティで、 `StylePropertyMapReadOnly` オブジェクトの大きさを符号なし長整数で返します。
+
+## 構文
+
+```js
+var size = StylePropertyMapReadOnly.size
+```
+
+### 値
+
+符号なし長整数です。
+
+## 例
+
+ここでは size プロパティを使用して、この button 要素の {{domxref('Element.computedStyleMap()','computedStyleMap')}} に含まれる項目の数を返します。
+
+```js
+// 要素を取得
+const buttonEl = document.querySelector('button');
+
+// `computedStyleMap` ですべての計算済みスタイルが取得できます
+const allComputedStyles = buttonEl.computedStyleMap();
+
+// size を使用してマップ内にあるスタイルの数を取得します
+const amountStyles = allComputedStyles.size;
+console.log(amountStyles); // 338 と表示
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 36680245172de2752fab296f6f1bd1a8bfb052fa Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 21:57:42 +0900
Subject: CSS Typed Object Model API のリダイレクトを追加
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/ja/docs/Web/API/StylePropertyMapReadOnly などで使用しているため
---
 files/ja/_redirects.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 3bd3759ed7..d56f10128d 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3061,6 +3061,7 @@
 /ja/docs/Web/API/CSSMatrix	/ja/docs/Web/API/DOMMatrix
 /ja/docs/Web/API/CSSStyleSheet.insertRule	/ja/docs/Web/API/CSSStyleSheet/insertRule
 /ja/docs/Web/API/CSS_Painting_API/ガイド	/ja/docs/Web/API/CSS_Painting_API/Guide
+/ja/docs/Web/API/CSS_Typed_Object_Model_API	/ja/docs/Web/API/CSS_Object_Model#CSS_Typed_Object_Model
 /ja/docs/Web/API/CanvasRenderingContext2D.addHitRegion	/ja/docs/Web/API/CanvasRenderingContext2D/addHitRegion
 /ja/docs/Web/API/CanvasRenderingContext2D.clearHitRegions	/ja/docs/Web/API/CanvasRenderingContext2D/clearHitRegions
 /ja/docs/Web/API/CanvasRenderingContext2D.drawFocusIfNeeded	/ja/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded
-- 
cgit v1.2.3-54-g00ecf


From 53ffca5213ba390601bbeb641e035c53caed458a Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 22:51:33 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/element/requestpointerlock/index.md | 40 ++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 files/ja/web/api/element/requestpointerlock/index.md

diff --git a/files/ja/web/api/element/requestpointerlock/index.md b/files/ja/web/api/element/requestpointerlock/index.md
new file mode 100644
index 0000000000..908db13eb9
--- /dev/null
+++ b/files/ja/web/api/element/requestpointerlock/index.md
@@ -0,0 +1,40 @@
+---
+title: Element.requestPointerLock()
+slug: Web/API/Element/requestPointerLock
+tags:
+  - API
+  - DOM
+  - 実験的
+  - メソッド
+  - NeedsExample
+  - PointerEvent
+  - リファレンス
+  - mouse lock
+browser-compat: api.Element.requestPointerLock
+translation_of: Web/API/Element/requestPointerLock
+---
+{{ APIRef("DOM") }}{{ SeeCompatTable }}
+
+**`Element.requestPointerLock()`** メソッドで、ポインターをこの要素にロックすることを非同期にリクエストすることができます。
+
+リクエストが成功したか失敗したかを追跡するには、 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} および {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} イベントを {{domxref("Document")}} レベルで待ち受けする必要があります。
+
+## 構文
+
+```js
+instanceOfElement.requestPointerLock();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{ domxref("Document.pointerLockElement") }}
+- {{ domxref("Document.exitPointerLock()") }}
+- [ポインターロック](/ja/docs/Web/API/Pointer_Lock_API)
-- 
cgit v1.2.3-54-g00ecf


From 5b2684f66c792426ea84d8371e7e40dfcee2715e Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sat, 5 Mar 2022 23:50:17 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/replacechildren/index.md | 157 ++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 files/ja/web/api/element/replacechildren/index.md

diff --git a/files/ja/web/api/element/replacechildren/index.md b/files/ja/web/api/element/replacechildren/index.md
new file mode 100644
index 0000000000..75e0ceab80
--- /dev/null
+++ b/files/ja/web/api/element/replacechildren/index.md
@@ -0,0 +1,157 @@
+---
+title: Element.replaceChildren()
+slug: Web/API/Element/replaceChildren
+tags:
+  - API
+  - DOM
+  - メソッド
+  - Node
+  - Element
+  - リファレンス
+  - replaceChildren
+browser-compat: api.Element.replaceChildren
+translation_of: Web/API/Element/replaceChildren
+---
+{{APIRef("DOM")}}
+
+**`Element.replaceChildren()`** メソッドは、 {{domxref("Node")}} の既存の子ノードを、指定された新しい一連の子で置き換えます。 {{domxref("DOMString")}} または {{domxref("Node")}} オブジェクトを指定することができます。
+
+## 構文
+
+```js
+replaceChildren(...nodesOrDOMStrings)
+```
+
+### 引数
+
+- `nodesOrDOMStrings`
+  - : 一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトで、この `Element` の既存の子を置き換えるものです。置き換えるオブジェクトが指定されなかった場合は、 `Element` の子ノードは空になります。
+
+### 例外
+
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : [ノードツリーの制約](https://dom.spec.whatwg.org/#concept-node-tree)に違反したときに発生します。
+
+## 例
+
+### ノードを空にする
+
+`replaceChildren()` は、ノードからすべての子ノードを取り除くための非常に便利なメカニズムを提供します。引数を指定せずに、親ノードで呼び出すと実現できます。
+
+```js
+myNode.replaceChildren();
+```
+
+### 要素間でノードを移行
+
+`replaceChildren()` を使えば、冗長なループコードに頼ることなく、要素間で簡単にノードを転送することができます。例えば、パーティーの料理を選択するための簡単なアプリケーションがあるとします。この HTML は次のようなものになるでしょう。
+
+```html
+<h2>パーティーの食べ物リスト</h2>
+
+<main>
+  <div>
+    <label for="no">No thanks!</label>
+
+    <select id="no" multiple size="10">
+      <option>りんご</option>
+      <option>オレンジ</option>
+      <option>ぶどう</option>
+      <option>バナナ</option>
+      <option>キウイフルーツ</option>
+      <option>チョコレートクッキー</option>
+      <option>ピーナッツクッキー</option>
+      <option>チョコレートバー</option>
+      <option>ハムサンド</option>
+      <option>チーズサンド</option>
+      <option>ファラフェルサンド</option>
+      <option>アイスクリーム</option>
+      <option>ゼリー</option>
+      <option>人参スティックとフムス</option>
+      <option>マルゲリータピザ</option>
+      <option>ぺぱろーにぴざ</option>
+      <option>ビーガン野菜ピザ</option>
+    </select>
+  </div>
+
+  <div class="buttons">
+    <button id="to-yes">"Yes" へ移動 --&gt;</button>
+    <button id="to-no">&lt;-- "No" へ移動</button>
+  </div>
+
+  <div>
+    <label for="yes">Yes please!</label>
+
+    <select id="yes" multiple size="10">
+
+    </select>
+  </div>
+</main>
+```
+
+簡単な CSS を使って、 2 つの選択リストを並べ、その間にコントロールボタンを配置するのが理にかなっているでしょう。
+
+```css
+main {
+  display: flex;
+}
+
+div {
+  margin-right: 20px;
+}
+
+label, button {
+  display: block;
+}
+
+.buttons {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+select {
+  width: 200px;
+}
+```
+
+ここでやりたいことは、 "yes" ボタンが押されたときに "no" リストで選択されているオプションを "yes" リストに転送し、 "no" ボタンが押されたときに "yes" リストで選択されているオプションを "no" リストに転送することです。
+
+このイベントハンドラーは、転送したい選択済みのオプションを 1 つの定数に、転送先のリスト内の既存のオプションを別の定数にまとめます。そして、オプションを転送するリストに対して `replaceChildren()` を呼び出し、スプレッド演算子を用いて両方の定数に含まれるすべてのオプションを渡します。
+
+```js
+const noSelect = document.getElementById('no');
+const yesSelect = document.getElementById('yes');
+const noBtn = document.getElementById('to-no');
+const yesBtn = document.getElementById('to-yes');
+
+yesBtn.addEventListener('click', () => {
+  const selectedTransferOptions = document.querySelectorAll('#no option:checked');
+  const existingYesOptions = document.querySelectorAll('#yes option');
+  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
+});
+
+noBtn.addEventListener('click', () => {
+  const selectedTransferOptions = document.querySelectorAll('#yes option:checked');
+  const existingNoOptions = document.querySelectorAll('#no option');
+  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
+});
+```
+
+最終的な結果は次のようになります。
+
+{{EmbedLiveSample('Transferring_nodes_between_elements', '100%', '350')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.prepend()")}}
+- {{domxref("Element.append()")}}
+- {{domxref("NodeList")}}
-- 
cgit v1.2.3-54-g00ecf


From e47cf5a3030b9e252b14f3e74f9c8077db0128a7 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 01:17:34 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/createshadowroot/index.md | 43 +++++++++++++
 files/ja/web/api/element/getanimations/index.md    | 73 ++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 files/ja/web/api/element/createshadowroot/index.md
 create mode 100644 files/ja/web/api/element/getanimations/index.md

diff --git a/files/ja/web/api/element/createshadowroot/index.md b/files/ja/web/api/element/createshadowroot/index.md
new file mode 100644
index 0000000000..f0c4e5709f
--- /dev/null
+++ b/files/ja/web/api/element/createshadowroot/index.md
@@ -0,0 +1,43 @@
+---
+title: Element.createShadowRoot()
+slug: Web/API/Element/createShadowRoot
+tags:
+  - API
+  - Deprecated
+  - Element
+  - メソッド
+  - Non-standard
+  - リファレンス
+  - shadow dom
+browser-compat: api.Element.createShadowRoot
+---
+{{APIRef('Shadow DOM')}}{{non-standard_header}}{{deprecated_header}}
+
+Use `Element.createShadowRoot` to create an instance of [shadow DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM). When shadow DOM is
+created, it is always attached to an existing element. After the shadow DOM is created,
+the element that it is attached to is called the {{glossary("shadow root")}}.
+
+> **Note:** This method has been deprecated in favor of
+> {{DOMxRef("Element.attachShadow()","attachShadow()")}}.
+
+## 構文
+
+```js
+var shadowroot = element.createShadowRoot();
+```
+
+### 引数
+
+No parameters.
+
+### Result value
+
+Returns a {{DOMxRef("ShadowRoot")}}.
+
+## 仕様書
+
+This feature is no longer defined by any specifications.
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/element/getanimations/index.md b/files/ja/web/api/element/getanimations/index.md
new file mode 100644
index 0000000000..2ab0b9efe4
--- /dev/null
+++ b/files/ja/web/api/element/getanimations/index.md
@@ -0,0 +1,73 @@
+---
+title: Element.getAnimations()
+slug: Web/API/Element/getAnimations
+tags:
+  - API
+  - Animatable
+  - CSS
+  - CSS アニメーション
+  - CSS トランジション
+  - Element
+  - 実験的
+  - メソッド
+  - リファレンス
+  - トランジション
+  - ウェブアニメーション
+  - getAnimations
+  - waapi
+  - web animations api
+browser-compat: api.Element.getAnimations
+translation_of: Web/API/Element/getAnimations
+---
+{{ SeeCompatTable() }}{{APIRef("Web Animations")}}
+
+`getAnimations()` は {{domxref("Element")}} インターフェイスのメソッドで（`Animatable` ミックスインで指定されており）、この要素に影響を与える、あるいは将来的に影響を与える予定のすべての {{domxref("Animation")}} オブジェクトの配列を返します。オプションとして、子孫要素の {{domxref("Animation")}} オブジェクトも返すことができます。
+
+> **Note:** この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API)が含まれます。
+
+## 構文
+
+```js
+const animations = Element.getAnimations(options);
+```
+
+### 引数
+
+- `options {{optional_inline}}`
+
+  - : 以下のプロパティを含むオプションオブジェクトです。
+
+    - `subtree`
+      - : 論理値で、`true` の場合、 _Element_ の子孫をターゲットとしたアニメーションも返すようになります。これは、 _Element_ やその子孫に付けられた CSS [擬似要素](/ja/docs/Web/CSS/Pseudo-elements)をターゲットとするアニメーションを含みます。既定値は `false` です。
+
+### 返値
+
+{{domxref("Animation")}} オブジェクトの配列 ({{jsxref("Array")}}) で、それぞれが
+このメソッドが呼び出された {{domxref("Element")}}、または `{ subtree: true }` が指定されている場合は、その子孫の要素の 1 つを現在ターゲットにしているアニメーションです。
+
+## 例
+
+以下のコードでは、 `elem` とその子孫のすべてのアニメーションが終了するのを待ってから、文書からその要素を削除します。
+
+```js
+Promise.all(
+  elem.getAnimations({ subtree: true })
+    .map(animation => animation.finished)
+).then(() => elem.remove());
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアニメーション API](/ja/docs/Web/API/Web_Animations_API)
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)
+- [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)
+- {{domxref("Document.getAnimations()")}} - 文書内のすべてのアニメーションを読み取る
+- {{domxref("Animation")}}
-- 
cgit v1.2.3-54-g00ecf


From 23569e56e8b695f07b8a1692fdd460d6e16d8990 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 01:17:34 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/createshadowroot/index.md | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/files/ja/web/api/element/createshadowroot/index.md b/files/ja/web/api/element/createshadowroot/index.md
index f0c4e5709f..a18ac75a8e 100644
--- a/files/ja/web/api/element/createshadowroot/index.md
+++ b/files/ja/web/api/element/createshadowroot/index.md
@@ -6,19 +6,17 @@ tags:
   - Deprecated
   - Element
   - メソッド
-  - Non-standard
+  - 標準外
   - リファレンス
-  - shadow dom
+  - シャドウ DOM
 browser-compat: api.Element.createShadowRoot
+translation_of: Web/API/Element/createShadowRoot
 ---
 {{APIRef('Shadow DOM')}}{{non-standard_header}}{{deprecated_header}}
 
-Use `Element.createShadowRoot` to create an instance of [shadow DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM). When shadow DOM is
-created, it is always attached to an existing element. After the shadow DOM is created,
-the element that it is attached to is called the {{glossary("shadow root")}}.
+`Element.createShadowRoot` は[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のインスタンスを作成するために使用し案す。シャドウ DOM が作成されると、常に既存の要素に割り当てられます。シャドウ DOM が作成された後、それが割り当てられている要素を{{glossary("shadow root", "シャドウルート")}}と呼びます。
 
-> **Note:** This method has been deprecated in favor of
-> {{DOMxRef("Element.attachShadow()","attachShadow()")}}.
+> **Note:** このメソッドは非推奨となり、 {{DOMxRef("Element.attachShadow()","attachShadow()")}} に置き換えられました。
 
 ## 構文
 
@@ -28,15 +26,15 @@ var shadowroot = element.createShadowRoot();
 
 ### 引数
 
-No parameters.
+引数はありません。
 
-### Result value
+### 返値
 
-Returns a {{DOMxRef("ShadowRoot")}}.
+{{DOMxRef("ShadowRoot")}} を返します。
 
 ## 仕様書
 
-This feature is no longer defined by any specifications.
+この機能は仕様書で定義されなくなりました。
 
 ## ブラウザーの互換性
 
-- 
cgit v1.2.3-54-g00ecf


From e4d475264e0c1a876e5f2341aefbdd9d9446b9fd Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 12:50:15 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/screen_wake_lock_api/index.md | 137 +++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 files/ja/web/api/screen_wake_lock_api/index.md

diff --git a/files/ja/web/api/screen_wake_lock_api/index.md b/files/ja/web/api/screen_wake_lock_api/index.md
new file mode 100644
index 0000000000..306f50dc72
--- /dev/null
+++ b/files/ja/web/api/screen_wake_lock_api/index.md
@@ -0,0 +1,137 @@
+---
+title: 画面起動ロック API
+slug: Web/API/Screen_Wake_Lock_API
+tags:
+  - API
+  - 概要
+  - リファレンス
+  - 画面起動ロック API
+  - Wake Lock
+  - WakeLock
+  - screen
+---
+{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+画面起動ロック API は、アプリケーションの実行を継続する必要がある場合に、端末が画面を暗くしたり、ロックしたりするのを防ぐ方法を提供します。
+
+## 概念と用途
+
+ほとんどの端末は、ハードウェアの寿命を延ばすために、一定時間が経過すると画面をオフにすることが既定になっています。最近の端末は、バッテリーの消費電力を節約するためにこれを行っています。これは有益な機能ですが、アプリケーションによっては、使いやすくするために画面が起動したままの状態にする必要があるものもあります。
+
+画面起動ロック API は、画面の消灯、暗転、ロックを防止します。以前は電力を浪費する可能性がある方法でしか実現できないものでしたが、シンプルなプラットフォームベースの解決策を取ることができるようになりました。画面起動ロックを取得できるのは、表示されている（アクティブな）文書のみです。
+
+画面を表示したままにする用途はたくさんあります。電子書籍の閲覧、地図ナビゲーション、レシピの確認、聴衆へのプレゼンテーション、 QR/バーコードのスキャン、（画面を表示し続けるためのよく使う）触覚入力ではなく音声やジェスチャーコントロールを使用するアプリケーションなどです。
+
+{{DOMxRef("WakeLockSentinel")}} オブジェクトを取得するには、 {{domxref('WakeLock.request','navigator.wakeLock.request()')}} を呼び出します。これはプラットフォームが許可していれば解決する {{jsxref('Promise')}} ベースのメソッドです。リクエストが拒否される理由はいくつかあります。例えば、システム設定（省電力モードやバッテリー残量が少ない場合など）、文書がアクティブでない、または表示されていないなどです。
+
+基礎となるシステムの起動ロックには、見張り (sentinel) が割り当てられます。これは、バッテリーの残量が少なくなったり、文書がアクティブでなくなったり、または表示されなくなったりした場合などに、システムによって解放されます。また、 {{domxref('WakeLockSentinel.release()')}} メソッドを使用して手動で解除することもできます。見張りオブジェクトへの参照を保存しておくと、後で解放を制御したり、必要に応じてロックを再取得することができます。
+
+画面起動ロック API を使用して画面を表示したままにするのは、ユーザビリティを向上させる目的で行うべきです。インターフェイス上で画面ロックが有効になっているかどうかを表示したり、またはユーザーが望むならそれを無効にする方法を表示したりするのはいい考えです。
+
+## 画面起動ロック API のインターフェイス
+
+- {{domxref("WakeLock")}}
+  - : **`WakeLock`** インターフェイスは、アプリケーションが実行し続ける必要があるときに画面が暗くなるのを防いだり、ロックされたりするのを防止します。
+- {{domxref("WakeLockSentinel")}}
+  - : 基礎となるプラットフォームの起動ロックへのハンドルを提供し、参照されている場合は、手動で解放および再取得することができます。このオブジェクトのインスタンスを取得するには、 {{domxref('WakeLock.request')}} を呼び出してください。
+- {{domxref("Navigator.wakelock")}}
+  - : {{domxref("WakeLock")}} オブジェクトのインスタンスを返します。ここから他のすべての機能にアクセスできます。
+
+## 例
+
+### 機能検出
+
+このコードは、起動ロックに対応しているかどうかをチェックし、それに応じて UI を更新します。
+
+```js
+if ('wakeLock' in navigator) {
+  isSupported = true;
+  statusElem.textContent = '起動ロック API に対応しています。';
+} else {
+  wakeButton.disabled = true;
+  statusElem.textContent = 'このブラウザーは起動ロックに対応していません。';
+}
+```
+
+### 起動ロックの要求
+
+次の例は、 {{domxref('WakeLockSentinel')}} オブジェクトを要求する方法を示しています。{{domxref('WakeLock.request')}} メソッドは {{jsxref('Promise')}} ベースなので、非同期関数を作成し、 UI を更新して起動ロックが有効であることを反映させることができます。
+
+```js
+// 起動ロックの参照を作成
+let wakeLock = null;
+
+// 非同期関数を作成して起動ロックをリクエスト
+try {
+  wakeLock = await navigator.wakeLock.request('screen');
+  statusElem.textContent = '起動ロックが有効です。';
+} catch (err) {
+  // 起動ロックのリクエストに失敗。ふつうはバッテリーなどのシステム関連
+  statusElem.textContent = `${err.name}, ${err.message}`;
+}
+```
+
+### 起動ロックの解放
+
+以下の例は、以前取得した起動ロックを開放する方法を示しています。
+
+```js
+wakeLock.release()
+  .then(() => {
+    wakeLock = null;
+  });
+```
+
+### 起動ロック解放の表示
+
+この例では、何らかの方法で起動ロックが解放された場合（アクティブウィンドウやタブから移動した場合など）に UI を更新します。
+
+```js
+wakeLock.addEventListener('release', () => {
+  // 起動ロックが解放
+  statusElem.textContent = '起動ロックが解放されました';
+});
+```
+
+### 起動ロックの再取得
+
+以下のコードは、文書の可視性が変化し、起動ロックが解除された場合に、起動ロックを再取得するものです。
+
+```js
+document.addEventListener('visibilitychange', async () => {
+  if (wakeLock !== null && document.visibilityState === 'visible') {
+    wakeLock = await navigator.wakeLock.request('screen');
+  }
+});
+```
+
+### すべてをまとめる
+
+[GitHub にある完全なコードはこちら](https://github.com/mdn/dom-examples/tree/master/screen-wake-lock-api)にあります。[デモ](https://mdn.github.io/dom-examples/screen-wake-lock-api/)では、ボタンで起動ロックの取得と解除を行い、 UI を更新しています。また、何らかの理由で起動ロックが自動的に解除された場合も UI が更新されます。チェックボックスがあり、これをオンにすると、文書の表示状態が変化して再び表示されるようになった場合に、起動ロックを自動的に再取得することができます。
+
+### パフォーマンスの考慮事項
+
+- 常時画面を表示する必要があったアクティビティが終了した時点で、画面起動ロックを解除してください。例えば、 QR コードを使ってチケット情報を送信するチケット販売アプリでは、 QR コードを表示している間は（コードの読み取りを成功させるために）画面起動ロックを取得しても良いのですが、終わったら解除してください。プレゼンテーションアプリでは、プレゼンテーションがアクティブな間のみロックを保持し、プレゼンテーションの編集中はロックを保持しないようにしてください。
+- アプリが長時間ダウンロードを行う場合は、バックグラウンドフェッチの使用を検討してください。
+- アプリがリモートサーバーからデータを同期している場合は、バックグラウンド同期を使用することを検討してください。
+- アクティブな文書のみがスクリーン起動ロックを取得でき、文書が非アクティブになると、以前に取得したロックは自動的に解放されます。したがって、文書がアクティブになったら、必要に応じてスクリーン起動ロックを再取得するようにしてください（[visibilitychange](/ja/docs/Web/API/Document/visibilitychange_event) イベントを待ち受けます）。
+
+## 機能ポリシーの統合
+
+画面起動ロック API へのアクセスは、[機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)の {{HTTPHeader("Feature-Policy/screen-wake-lock","screen-wake-lock")}} ディレクティブによって制御されています。使用方法のリファレンスは[機能ポリシーの使用](/ja/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy)を参照してください。
+
+## 仕様書
+
+| 仕様書                                                   |
+| --------------------------------------------------------------- |
+| [Screen Wake Lock API](https://w3c.github.io/screen-wake-lock/) |
+
+## ブラウザーの互換性
+
+{{Compat("api.WakeLock")}}
+
+## 関連情報
+
+- [An introductory article on the Screen Wake Lock API](https://web.dev/wakelock/)
+- [A Screen Wake Lock API demo on glitch](https://wake-lock-demo.glitch.me/)
+- [機能ポリシー](/ja/docs/Web/HTTP/Feature_Policy)の {{HTTPHeader("Feature-Policy/screen-wake-lock","screen-wake-lock")}} ディレクティブ
-- 
cgit v1.2.3-54-g00ecf


From dc2e06c0e1274e5809173b7a0054b6fd5022bd69 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 16:02:25 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/api/wakelocksentinel/released/index.md  | 47 ++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 files/ja/web/api/wakelocksentinel/released/index.md

diff --git a/files/ja/web/api/wakelocksentinel/released/index.md b/files/ja/web/api/wakelocksentinel/released/index.md
new file mode 100644
index 0000000000..82542fc9f1
--- /dev/null
+++ b/files/ja/web/api/wakelocksentinel/released/index.md
@@ -0,0 +1,47 @@
+---
+title: WakeLockSentinel.released
+slug: Web/API/WakeLockSentinel/released
+tags:
+  - プロパティ
+  - 読み取り専用
+  - 画面起動ロック API
+  - WakeLockSentinel
+browser-compat: api.WakeLockSentinel.released
+translation_of: Web/API/WakeLockSentinel/released
+---
+{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`released`** は {{domxref("WakeLockSentinel")}} インターフェイスのプロパティで、 {{domxref("WakeLockSentinel")}} がまだ解放されていないかどうかを示す論理値を返します。
+
+## 構文
+
+```js
+var released = sentinel.released;
+```
+
+### 値
+
+論理値で、最初は `false` であり、 {{domxref("WakeLockSentinel")}} が解放され（{{domxref("WakeLockSentinel.release()")}} が呼び出されるか、または自動的にロックが解除され） {{domxref("WakeLockSentinel/release_event", "release")}} イベントが発行された後は `true` となって変化しない値です。
+
+## 例
+
+この例は、 **`released`** の値が {{domxref("WakeLockSentinel")}} のライフライクルの中でどのように変化するかを示します。
+
+```js
+const sentinel = await navigator.wakeLock.request('screen');
+console.log(sentinel.released);  // "false" と出力
+
+sentinel.onrelease = () => {
+  console.log(sentinel.released);  // "true" と出力
+};
+
+await sentinel.release();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 98dce175ed86c3bfca844fc649a89cedee1e2c97 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 16:21:33 +0900
Subject: 2020/10/16 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/wakelocksentinel/release_event/index.md    | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 files/ja/web/api/wakelocksentinel/release_event/index.md

diff --git a/files/ja/web/api/wakelocksentinel/release_event/index.md b/files/ja/web/api/wakelocksentinel/release_event/index.md
new file mode 100644
index 0000000000..7d6be9eccb
--- /dev/null
+++ b/files/ja/web/api/wakelocksentinel/release_event/index.md
@@ -0,0 +1,53 @@
+---
+title: 'WakeLockSentinel: release イベント'
+slug: Web/API/WakeLockSentinel/release_event
+tags:
+  - Event Handler
+  - プロパティ
+  - 画面 Wake Lock API
+  - 起動ロック
+  - WakeLockSentinel
+  - 画面
+  - 画面 wake lock
+browser-compat: api.WakeLockSentinel.release_event
+translation_of: Web/API/WakeLockSentinel/release_event
+---
+{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`release`** は {{domxref("WakeLockSentinel")}} インターフェイスのイベントで、この見張りオブジェクトのハンドルが解放されたときに発行されます。
+
+{{domxref("WakeLockSentinel")}} は `release()` メソッドにより手動で解放したり、プラットフォームの起動ロックにより自動的に解放されたりします。これは、文書がアクティブでなくなった場合や、見えなくなった場合、端末の電力が低下した場合、ユーザーが省電力モードをオンにした場合に発生する可能性があります。
+
+## 構文
+
+このイベント名を {{domxref("EventTarget.addEventListener", "addEventListener()")}} などで用いるか、イベントハンドラープロパティを設定するかしてください。
+
+```js
+addEventListener('release', event => { })
+
+onrelease = event => { }
+```
+
+## イベント型
+
+一般的な {{domxref("Event")}} です。
+
+## 例
+
+この例では、起動ロックが解放されたときに UI を更新します。
+
+```js
+wakeLock.addEventListener('release', () => {
+
+  // if wake lock is released alter the UI accordingly
+  statusElement.textContent = 'Wake Lock has been released';
+});
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From ed2e20fa98e77f266c62841ac0a23e0fe83e9257 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 17:04:25 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/wakelock/request/index.md | 78 ++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 files/ja/web/api/wakelock/request/index.md

diff --git a/files/ja/web/api/wakelock/request/index.md b/files/ja/web/api/wakelock/request/index.md
new file mode 100644
index 0000000000..c5fb43d0a2
--- /dev/null
+++ b/files/ja/web/api/wakelock/request/index.md
@@ -0,0 +1,78 @@
+---
+title: WakeLock.request()
+slug: Web/API/WakeLock/request
+tags:
+  - API
+  - Method
+  - リファレンス
+  - 画面起動ロック API
+  - WakeLock
+browser-compat: api.WakeLock.request
+translation_of: Web/API/WakeLock/request
+---
+{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`request()`** は {{domxref("WakeLock")}} インターフェイスのメソッドで、画面を暗くしたりロックしたりすることを制御することができる {{domxref("WakeLockSentinel")}} で解決するプロミス ({{jsxref("Promise")}}) を返します。
+
+## 構文
+
+```js
+var wakeLock = navigator.wakeLock.request(type);
+```
+
+### 引数
+
+- _type_
+
+  - : オプションは次の通りです。
+
+    - `'screen'`: 画面の起動ロックを要求します。端末の画面が暗くなったりロックされたりすることを防ぎます。
+
+### 返値
+
+{{domxref("WakeLockSentinel")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。
+
+### 例外
+
+- `NotAllowedError`
+
+  - : 起動ロックが利用できないときに発生します。原因は以下のようなものです。
+
+    - 文書が screen-wake-lock ポリシーにより、画面起動ロックを使用することができない。
+    - 文書が完全にアクティブではない。
+    - 文書が非表示になっている。
+    - {{Glossary("User Agent", "ユーザーエージェント")}}がプラットフォームの起動ロックを取得できない。
+
+## 例
+
+以下の非同期関数は、 {{domxref("WakeLockSentinel")}} オブジェクトを要求します。
+`request()` メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。
+
+```js
+const requestWakeLock = async () => {
+  try {
+
+    const wakeLock = await navigator.wakeLock.request('screen');
+
+  } catch (err) {
+    // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。
+
+    console.log(`${err.name}, ${err.message}`);
+  }
+}
+
+requestWakeLock();
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{DOMxRef("WakeLock")}}
+- {{DOMxRef("Navigator.wakeLock")}}
-- 
cgit v1.2.3-54-g00ecf


From 9574b0a7faee05be0dc5d836557bbe5390833a41 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 17:21:38 +0900
Subject: 2021/09/15 時点の英語版に基づき新規作成
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/wakelock/index.md | 43 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 files/ja/web/api/wakelock/index.md

diff --git a/files/ja/web/api/wakelock/index.md b/files/ja/web/api/wakelock/index.md
new file mode 100644
index 0000000000..6a7929ce07
--- /dev/null
+++ b/files/ja/web/api/wakelock/index.md
@@ -0,0 +1,43 @@
+---
+title: WakeLock
+slug: Web/API/WakeLock
+tags:
+  - インターフェイス
+  - リファレンス
+  - 画面起動ロック API
+  - 起動ロック
+  - 画面
+browser-compat: api.WakeLock
+translation_of: Web/API/WakeLock
+---
+{{securecontext_header}}{{DefaultAPISidebar("Screen Wake Lock API")}}
+
+**`WakeLock`** は[画面起動ロック API](/ja/docs/Web/API/Screen_Wake_Lock_API) のインターフェイスで、アプリケーションが動作し続ける必要があるときに、端末の画面が暗くなったりロックされたりすることを防ぐためのものです。
+
+システムの起動ロックはグローバルの {{domxref('Navigator.wakeLock')}} プロパティで公開されています。
+
+## メソッド
+
+- `{{domxref("WakeLock.request", "request")}}`
+  - : {{domxref("WakeLockSentinel")}} オブジェクトを要求し、 {{domxref("WakeLockSentinel")}} オブジェクトで解決する {{jsxref("Promise")}} を返します。
+
+## 例
+
+以下の非同期関数は、 {{domxref("WakeLockSentinel")}} オブジェクトを要求します。{{domxref("WakeLock.request")}} メソッドはブラウザーが何らかの理由でリクエストを拒否した場合を想定して、 `try...catch` 文で囲まれています。
+
+```js
+try {
+  const wakeLock = await navigator.wakeLock.request('screen');
+} catch (err) {
+  // 起動ロックの要求に失敗 - 通常は、バッテリー低下などシステムに起因する。
+  console.log(`${err.name}, ${err.message}`);
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf


From 75d527afc2ad61d01832aba7636abed5cd455d85 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Sun, 6 Mar 2022 18:09:57 +0900
Subject: Web/Media/images を移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/media/images/index.html | 65 ------------------------------------
 files/ja/web/media/images/index.md   | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 65 deletions(-)
 delete mode 100644 files/ja/web/media/images/index.html
 create mode 100644 files/ja/web/media/images/index.md

diff --git a/files/ja/web/media/images/index.html b/files/ja/web/media/images/index.html
deleted file mode 100644
index 30e3aefce7..0000000000
--- a/files/ja/web/media/images/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: HTML での画像の使用
-slug: Web/Media/images
-tags:
-  - HTML
-  - Images
-  - Landing
-  - Media
-translation_of: Web/Media/images
----
-<p>HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。</p>
-
-<div class="row topicpage-table">
-<div class="section">
-<h2 class="Documentation" id="リファレンス">リファレンス</h2>
-
-<p>これらの記事では、Web 上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。</p>
-
-<h3 id="HTML">HTML</h3>
-
-<dl>
- <dt>{{HTMLElement("img")}}</dt>
- <dd><strong>HTML <code>&lt;img&gt;</code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd>
- <dt>{{HTMLElement("picture")}}</dt>
- <dd><strong>HTML <code>&lt;picture&gt;</code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 &lt;source&gt; 要素を考慮して、それらの中から最適なものを選択します。</dd>
-</dl>
-
-<h3 id="CSS">CSS</h3>
-
-<dl>
- <dt>{{cssxref("object-fit")}}</dt>
- <dd><code><strong>object-fit</strong></code> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、<code><a href="/ja/docs/Web/HTML/Element/Img">&lt;img&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> のような<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。</dd>
- <dt>{{cssxref("object-position")}}</dt>
- <dd><strong><code>object-position</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素のボックス内で選択された<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。</dd>
- <dt>{{cssxref("background-image")}}</dt>
- <dd><strong><code>background-image</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素の背景画像を設定します。</dd>
- <dd></dd>
-</dl>
-</div>
-
-<div class="section">
-<h2 class="Documentation" id="ガイド">ガイド</h2>
-
-<p>これらの記事では、画像の種類を選択して設定するためのガイダンスを提供しています。</p>
-
-<dl>
- <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類とフォーマットガイド</a></dt>
- <dd>Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。</dd>
- <dt><a href="/ja/docs/Web/Media/images/aspect_ratio_mapping">メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする</a></dt>
- <dd>これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。</dd>
-</dl>
-
-<dl>
-</dl>
-
-<h2 id="その他のトピック">その他のトピック</h2>
-
-<p>興味がありそうな関連トピック</p>
-
-<dl>
- <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">HTML の学習: レスポンシブ画像</a></dt>
- <dd>この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なるデバイスでも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。</dd>
-</dl>
-</div>
-</div>
diff --git a/files/ja/web/media/images/index.md b/files/ja/web/media/images/index.md
new file mode 100644
index 0000000000..30e3aefce7
--- /dev/null
+++ b/files/ja/web/media/images/index.md
@@ -0,0 +1,65 @@
+---
+title: HTML での画像の使用
+slug: Web/Media/images
+tags:
+  - HTML
+  - Images
+  - Landing
+  - Media
+translation_of: Web/Media/images
+---
+<p>HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。</p>
+
+<div class="row topicpage-table">
+<div class="section">
+<h2 class="Documentation" id="リファレンス">リファレンス</h2>
+
+<p>これらの記事では、Web 上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。</p>
+
+<h3 id="HTML">HTML</h3>
+
+<dl>
+ <dt>{{HTMLElement("img")}}</dt>
+ <dd><strong>HTML <code>&lt;img&gt;</code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd>
+ <dt>{{HTMLElement("picture")}}</dt>
+ <dd><strong>HTML <code>&lt;picture&gt;</code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 &lt;source&gt; 要素を考慮して、それらの中から最適なものを選択します。</dd>
+</dl>
+
+<h3 id="CSS">CSS</h3>
+
+<dl>
+ <dt>{{cssxref("object-fit")}}</dt>
+ <dd><code><strong>object-fit</strong></code> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、<code><a href="/ja/docs/Web/HTML/Element/Img">&lt;img&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> のような<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。</dd>
+ <dt>{{cssxref("object-position")}}</dt>
+ <dd><strong><code>object-position</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素のボックス内で選択された<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。</dd>
+ <dt>{{cssxref("background-image")}}</dt>
+ <dd><strong><code>background-image</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素の背景画像を設定します。</dd>
+ <dd></dd>
+</dl>
+</div>
+
+<div class="section">
+<h2 class="Documentation" id="ガイド">ガイド</h2>
+
+<p>これらの記事では、画像の種類を選択して設定するためのガイダンスを提供しています。</p>
+
+<dl>
+ <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類とフォーマットガイド</a></dt>
+ <dd>Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。</dd>
+ <dt><a href="/ja/docs/Web/Media/images/aspect_ratio_mapping">メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする</a></dt>
+ <dd>これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。</dd>
+</dl>
+
+<dl>
+</dl>
+
+<h2 id="その他のトピック">その他のトピック</h2>
+
+<p>興味がありそうな関連トピック</p>
+
+<dl>
+ <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">HTML の学習: レスポンシブ画像</a></dt>
+ <dd>この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なるデバイスでも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。</dd>
+</dl>
+</div>
+</div>
-- 
cgit v1.2.3-54-g00ecf


From 2c6ec8ea4fc822ee84f5b86426a040da1c7340bc Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 7 Mar 2022 01:46:45 +0900
Subject: 2020/07/28 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/media/images/index.md | 74 +++++++++++++++-----------------------
 1 file changed, 28 insertions(+), 46 deletions(-)

diff --git a/files/ja/web/media/images/index.md b/files/ja/web/media/images/index.md
index 30e3aefce7..6a27dfd6c5 100644
--- a/files/ja/web/media/images/index.md
+++ b/files/ja/web/media/images/index.md
@@ -3,63 +3,45 @@ title: HTML での画像の使用
 slug: Web/Media/images
 tags:
   - HTML
-  - Images
-  - Landing
-  - Media
+  - 画像
+  - ランディング
+  - メディア
 translation_of: Web/Media/images
 ---
-<p>HTML の用語集 {{Glossary("HTML")}} は、以下のようになっています。{{HTMLElement("img")}} 要素を使用すると HTML 文書に画像を埋め込むことができ、一方で {{HTMLElement("picture")}} 要素を使用するとレスポンシブ画像を使用することができます。このガイドでは、Web サイトへの画像の追加を扱うリソースへのリンクを紹介します。</p>
+{{Glossary("HTML")}} の {{HTMLElement("img")}} 要素で HTML 文書に画像を埋め込むことができ、 {{HTMLElement("picture")}} 要素を使用すると[レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)を使用することができます。このガイドでは、ウェブサイトへの画像の追加を扱うリソースへのリンクを紹介します。
 
-<div class="row topicpage-table">
-<div class="section">
-<h2 class="Documentation" id="リファレンス">リファレンス</h2>
+## リファレンス
 
-<p>これらの記事では、Web 上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。</p>
+これらの記事では、ウェブ上での画像の表示方法を制御するために使用される HTML 要素と CSS プロパティのいくつかを取り上げています。
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<dl>
- <dt>{{HTMLElement("img")}}</dt>
- <dd><strong>HTML <code>&lt;img&gt;</code> 要素</strong>は、Web ページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性をサポートしており、画像を見ない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。</dd>
- <dt>{{HTMLElement("picture")}}</dt>
- <dd><strong>HTML <code>&lt;picture&gt;</code> 要素</strong>は、0 個以上の {{HTMLElement("source")}} 要素と1個の {{HTMLElement("img")}} 要素を含みます。ブラウザは、それぞれの子 &lt;source&gt; 要素を考慮して、それらの中から最適なものを選択します。</dd>
-</dl>
+- {{HTMLElement("img")}}
+  - : **HTML の `<img>` 要素**は、ウェブページに画像を埋め込むために使用されます。画像の振る舞いを制御する幅広い属性に対応しており、画像を見られない人のために {{htmlattrxref("alt", "img")}} テキストのような重要な情報を追加することができます。
+- {{HTMLElement("picture")}}
+  - : **HTML の `<picture>` 要素**は、 0 個以上の {{HTMLElement("source")}} 要素と 1 個の {{HTMLElement("img")}} 要素を含み、様々な画面や端末のシナリオのために画像の別な版を提供します。ブラウザーは、子要素であるそれぞれの `<source>` 要素を考慮して、それらの中から最適なものを選択します。
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<dl>
- <dt>{{cssxref("object-fit")}}</dt>
- <dd><code><strong>object-fit</strong></code> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、<code><a href="/ja/docs/Web/HTML/Element/Img">&lt;img&gt;</a></code> や <code><a href="/ja/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> のような<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>の内容を、そのコンテナに合わせてどのようにリサイズするかを設定します。</dd>
- <dt>{{cssxref("object-position")}}</dt>
- <dd><strong><code>object-position</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素のボックス内で選択された<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>内のコンテンツの整列を指定します。置換された要素のオブジェクトに覆われていないボックス内の領域は、要素の背景が表示されます。</dd>
- <dt>{{cssxref("background-image")}}</dt>
- <dd><strong><code>background-image</code></strong> <a href="/ja/docs/Web/CSS">CSS</a> プロパティは、要素の背景画像を設定します。</dd>
- <dd></dd>
-</dl>
-</div>
+- {{cssxref("object-fit")}}
+  - : **`object-fit`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば [`<img>`](/ja/docs/Web/HTML/Element/img) や [`<video>`](/ja/docs/Web/HTML/Element/video) の中身をコンテナーに合わせるために、どのようにリサイズする可を設定します。
+- {{cssxref("object-position")}}
+  - : **`object-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のボックス内で選択された[置換要素](/ja/docs/Web/CSS/Replaced_element)内のコンテンツの配置を指定します。ボックス内の領域のうちで置換要素のオブジェクトに覆われていない部分には、要素の背景が表示されます。
+- {{cssxref("background-image")}}
+  - : **`background-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 1 つまたは複数の要素の背景画像を設定します。
 
-<div class="section">
-<h2 class="Documentation" id="ガイド">ガイド</h2>
+## ガイド
 
-<p>これらの記事では、画像の種類を選択して設定するためのガイダンスを提供しています。</p>
+これらの記事では、画像の種類を選択して構成するためのガイダンスを提供しています。
 
-<dl>
- <dt><a href="/ja/docs/Web/Media/Formats/Image_types">画像ファイルの種類とフォーマットガイド</a></dt>
- <dd>Web ブラウザで一般的にサポートされている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要因などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。</dd>
- <dt><a href="/ja/docs/Web/Media/images/aspect_ratio_mapping">メディアコンテナ要素の幅と高さの属性をアスペクト比にマッピングする</a></dt>
- <dd>これにより、ブラウザが画像を読み込む方法が変更され、アスペクト比がブラウザによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。</dd>
-</dl>
+- [画像ファイルの種類と形式ガイド](/ja/docs/Web/Media/Formats/Image_types)
+  - : ウェブブラウザーが一般的に対応ている様々な画像ファイルの種類について、それぞれの使用例、機能、互換性の要素などの詳細を含めて解説しています。さらに、この記事では、与えられた状況に最適な画像ファイルタイプを選択するためのガイダンスを提供します。
+- [メディアのコンテナー要素の width および height 属性をアスペクト比に対応付ける](/ja/docs/Web/Media/images/aspect_ratio_mapping)
+  - : これにより、ブラウザーが画像を読み込む方法が変更され、アスペクト比がブラウザーによって初期段階で計算され、後で読み込まれる前に画像の表示サイズを修正することができます。
 
-<dl>
-</dl>
+## その他のトピック
 
-<h2 id="その他のトピック">その他のトピック</h2>
+興味がありそうな関連トピック
 
-<p>興味がありそうな関連トピック</p>
-
-<dl>
- <dt><a href="/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">HTML の学習: レスポンシブ画像</a></dt>
- <dd>この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なるデバイスでも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。</dd>
-</dl>
-</div>
-</div>
+- [HTML の学習: レスポンシブ画像](/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - : この記事ではレスポンシブ画像の概念、つまり画面サイズや解像度などが大きく異なる端末でも動作する画像について学び、レスポンシブ画像を実装するために HTML が提供するツールについて見ていきます。
-- 
cgit v1.2.3-54-g00ecf


From 1030ed38751a61a0dac77020abd80960e3cdc5ab Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 7 Mar 2022 23:52:11 +0900
Subject: 2021/08/13 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/-webkit-mask-box-image/index.md | 96 ++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 files/ja/web/css/-webkit-mask-box-image/index.md

diff --git a/files/ja/web/css/-webkit-mask-box-image/index.md b/files/ja/web/css/-webkit-mask-box-image/index.md
new file mode 100644
index 0000000000..f222e7438e
--- /dev/null
+++ b/files/ja/web/css/-webkit-mask-box-image/index.md
@@ -0,0 +1,96 @@
+---
+title: '-webkit-mask-box-image'
+slug: Web/CSS/-webkit-mask-box-image
+tags:
+  - CSS
+  - レイアウト
+  - 標準外
+  - リファレンス
+  - ウェブ
+  - recipe:css-property
+browser-compat: css.properties.-webkit-mask-box-image
+translation_of: Web/CSS/-webkit-mask-box-image
+---
+{{ CSSRef() }} {{ Non-standard_header() }}
+
+`-webkit-mask-box-image` はマスク画像を要素の境界ボックスに設定します。
+
+- {{ Xref_cssinitial() }}: なし
+- 適用先: すべての要素
+- {{ Xref_cssinherited() }}: なし
+- メディア: {{ Xref_cssvisual() }}
+- {{ Xref_csscomputed() }}: 指定通り
+
+## 構文
+
+```
+-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
+```
+
+ここで、
+
+- \<mask-box-image>
+  - : `{{cssxref("url()", "&lt;uri&gt;")}} | <gradient> | none`
+- \<top> \<right> \<bottom> \<left>
+  - : `<length> | <percentage>`
+- \<x-repeat> \<y-repeat>
+  - : `repeat | stretch | round | space`
+
+### 値
+
+- \<uri>
+  - : マスク画像として使用する画像リソースの位置です。
+- \<gradient>
+  - : マスク画像として使用する `-webkit-gradient` 関数です。
+- none
+  - : 境界ボックスにマスク画像がないことを示すために使用します。
+- \<length>
+  - : マスク画像のオフセットの大きさです。利用可能な単位は {{cssxref("&lt;length&gt;")}} を参照してください。
+- \<percentage>
+  - : マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。
+- repeat
+  - : マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。
+- stretch
+  - : マスク画像は、境界ボックスを正確に含むように引き伸ばされます。
+- round
+  - : マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。
+- space
+  - : マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{CSSSyntax}}
+
+## 例
+
+### 画像の設定
+
+```css
+.exampleone {
+  -webkit-mask-box-image: url('mask.png');
+}
+```
+
+### 画僧のオフセットと塗りつぶし
+
+```css
+.exampletwo {
+  -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+```
+
+## 仕様書
+
+Not part of any standard.
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+{{ cssxref("mask") }}, {{ cssxref("mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("mask-clip") }},{{ cssxref("mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("mask-repeat") }}
-- 
cgit v1.2.3-54-g00ecf


From 4af74fec5971d772e69741c47447d84c18d723b4 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 7 Mar 2022 23:30:00 +0900
Subject: 2021/08/13 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/-webkit-mask-attachment/index.md | 79 +++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 files/ja/web/css/-webkit-mask-attachment/index.md

diff --git a/files/ja/web/css/-webkit-mask-attachment/index.md b/files/ja/web/css/-webkit-mask-attachment/index.md
new file mode 100644
index 0000000000..edc1430043
--- /dev/null
+++ b/files/ja/web/css/-webkit-mask-attachment/index.md
@@ -0,0 +1,79 @@
+---
+title: '-webkit-mask-attachment'
+slug: Web/CSS/-webkit-mask-attachment
+tags:
+  - CSS
+  - CSS プロパティ
+  - レイアウト
+  - 標準外
+  - リファレンス
+  - ウェブ
+  - recipe:css-property
+browser-compat: css.properties.-webkit-mask-attachment
+translation_of: Web/CSS/-webkit-mask-attachment
+---
+{{CSSRef}}{{Non-standard_Header}}
+
+{{CSSxRef("mask-image")}} が指定されている場合、 `-webkit-mask-attachment` はそのマスク画像の位置をビューポート内で固定するか、それとも包含ブロックと共にスクロールするかを指定します。
+
+```css
+/* キーワード値 */
+-webkit-mask-attachment: scroll;
+-webkit-mask-attachment: fixed;
+-webkit-mask-attachment: local;
+
+/* 複数の値 */
+-webkit-mask-attachment: scroll, local;
+-webkit-mask-attachment: fixed, local, scroll;
+
+/* グローバル値 */
+-webkit-mask-attachment: inherit;
+-webkit-mask-attachment: initial;
+-webkit-mask-attachment: unset;
+```
+
+## 構文
+
+### 値
+
+- scroll
+  - : `scroll` が指定された場合、マスク画像はマスク画像を含むブロックと共にビューポート内でスクロールします。
+- fixed
+  - : `fixed` が指定された場合、マスク画像は包含する要素と共にスクロールせず、ビューポート内の一定の場所に残ります。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{CSSSyntax}}
+
+## 例
+
+### ビューポートにマスク画像を固定
+
+```css
+body {
+  -webkit-mask-image: url('images/mask.png');
+  -webkit-mask-attachment: fixed;
+}
+```
+
+## 仕様書
+
+Not part of any standard.
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{CSSxRef("mask")}}
+- {{CSSxRef("mask-clip")}}
+- {{CSSxRef("-webkit-mask-box-image")}}
+- {{CSSxRef("mask-origin")}}
+- {{CSSxRef("mask-image")}}
+- {{CSSxRef("-webkit-mask-composite")}}
+- {{CSSxRef("mask-repeat")}}
-- 
cgit v1.2.3-54-g00ecf


From f6d4b23757db2b420a122edfa170d72d3302a7fe Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 00:03:50 +0900
Subject: WebKit 独自のプロパティを移行
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web/css/-webkit-text-stroke-color/index.html   | 108 -------------------
 .../ja/web/css/-webkit-text-stroke-color/index.md  | 108 +++++++++++++++++++
 .../web/css/-webkit-text-stroke-width/index.html   | 119 ---------------------
 .../ja/web/css/-webkit-text-stroke-width/index.md  | 119 +++++++++++++++++++++
 files/ja/web/css/-webkit-touch-callout/index.html  |  61 -----------
 files/ja/web/css/-webkit-touch-callout/index.md    |  61 +++++++++++
 6 files changed, 288 insertions(+), 288 deletions(-)
 delete mode 100644 files/ja/web/css/-webkit-text-stroke-color/index.html
 create mode 100644 files/ja/web/css/-webkit-text-stroke-color/index.md
 delete mode 100644 files/ja/web/css/-webkit-text-stroke-width/index.html
 create mode 100644 files/ja/web/css/-webkit-text-stroke-width/index.md
 delete mode 100644 files/ja/web/css/-webkit-touch-callout/index.html
 create mode 100644 files/ja/web/css/-webkit-touch-callout/index.md

diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.html b/files/ja/web/css/-webkit-text-stroke-color/index.html
deleted file mode 100644
index b327da4d76..0000000000
--- a/files/ja/web/css/-webkit-text-stroke-color/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: '-webkit-text-stroke-color'
-slug: Web/CSS/-webkit-text-stroke-color
-tags:
-  - CSS
-  - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit 拡張
-  - 標準外
-translation_of: Web/CSS/-webkit-text-stroke-color
----
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;color&gt; 値 */
--webkit-text-stroke-color: red;
--webkit-text-stroke-color: #e08ab4;
--webkit-text-stroke-color: rgb(200, 100, 0);
-
-/* グローバル値 */
--webkit-text-stroke-color: inherit;
--webkit-text-stroke-color: initial;
--webkit-text-stroke-color: unset;
-</pre>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>角の色。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
-
-<pre class="brush: html notranslate">&lt;p&gt;Text with stroke&lt;/p&gt;
-&lt;input type="color" value="#ff0000"&gt;</pre>
-
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
-
-<pre class="brush: css notranslate">p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
-}
-</pre>
-
-<div class="hidden">
-<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
-
-<pre class="brush: js notranslate">var colorPicker = document.querySelector("input");
-colorPicker.addEventListener("change", function(evt) {
-  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
-});</pre>
-</div>
-
-<p>{{EmbedLiveSample("Example", "500px", "100px")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>初回標準化</td>
-  </tr>
-  <tr>
-   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small>文書内の '-webkit-text-stroke-color'</small></a></td>
-   <td>標準外で非公式の文書化</td>
-   <td>初回文書化</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke-width")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
-</ul>
diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.md b/files/ja/web/css/-webkit-text-stroke-color/index.md
new file mode 100644
index 0000000000..b327da4d76
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-stroke-color/index.md
@@ -0,0 +1,108 @@
+---
+title: '-webkit-text-stroke-color'
+slug: Web/CSS/-webkit-text-stroke-color
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+  - 標準外
+translation_of: Web/CSS/-webkit-text-stroke-color
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* &lt;color&gt; 値 */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* グローバル値 */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+</pre>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;color&gt;</code></dt>
+ <dd>角の色。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+{{csssyntax}}
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Text with stroke&lt;/p&gt;
+&lt;input type="color" value="#ff0000"&gt;</pre>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
+}
+</pre>
+
+<div class="hidden">
+<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
+
+<pre class="brush: js notranslate">var colorPicker = document.querySelector("input");
+colorPicker.addEventListener("change", function(evt) {
+  document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
+});</pre>
+</div>
+
+<p>{{EmbedLiveSample("Example", "500px", "100px")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small>文書内の '-webkit-text-stroke-color'</small></a></td>
+   <td>標準外で非公式の文書化</td>
+   <td>初回文書化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke-width")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.html b/files/ja/web/css/-webkit-text-stroke-width/index.html
deleted file mode 100644
index e8e39b12a0..0000000000
--- a/files/ja/web/css/-webkit-text-stroke-width/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: '-webkit-text-stroke-width'
-slug: Web/CSS/-webkit-text-stroke-width
-tags:
-  - CSS
-  - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit
-  - WebKit 拡張
-  - 標準外
-translation_of: Web/CSS/-webkit-text-stroke-width
----
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css notranslate">/* キーワード値 */
--webkit-text-stroke-width: thin;
--webkit-text-stroke-width: medium;
--webkit-text-stroke-width: thick;
-
-/* &lt;length&gt; 値 */
--webkit-text-stroke-width: 2px;
--webkit-text-stroke-width: 0.1em;
--webkit-text-stroke-width: 1mm;
--webkit-text-stroke-width: 5pt;
-
-/* グローバル値 */
--webkit-text-stroke-width: inherit;
--webkit-text-stroke-width: initial;
--webkit-text-stroke-width: unset;
-</pre>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>角の太さ。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="Example" name="Example">例</h2>
-
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
-
-<pre class="brush: css notranslate">p {
-  margin: 0;
-  font-size: 4em;
-  -webkit-text-stroke-color: red;
-}
-
-#thin {
-  -webkit-text-stroke-width: thin;
-}
-
-#medium {
-  -webkit-text-stroke-width: 3px;
-}
-
-#thick {
-  -webkit-text-stroke-width: 1.5mm;
-}
-</pre>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
-
-<pre class="brush: html notranslate">&lt;p id="thin"&gt;Thin stroke&lt;/p&gt;
-&lt;p id="medium"&gt;Medium stroke&lt;/p&gt;
-&lt;p id="thick"&gt;Thick stroke&lt;/p&gt;
-</pre>
-
-<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>初回標準化</td>
-  </tr>
-  <tr>
-   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small>文書内の '-webkit-text-stroke-width'</small></a></td>
-   <td>標準外で非公式の文書化</td>
-   <td>初回文書化</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
-
-<h2 id="See_Also" name="See_Also">関連情報</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
- <li>{{cssxref("-webkit-text-stroke-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
-</ul>
diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.md b/files/ja/web/css/-webkit-text-stroke-width/index.md
new file mode 100644
index 0000000000..e8e39b12a0
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-stroke-width/index.md
@@ -0,0 +1,119 @@
+---
+title: '-webkit-text-stroke-width'
+slug: Web/CSS/-webkit-text-stroke-width
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit
+  - WebKit 拡張
+  - 標準外
+translation_of: Web/CSS/-webkit-text-stroke-width
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css notranslate">/* キーワード値 */
+-webkit-text-stroke-width: thin;
+-webkit-text-stroke-width: medium;
+-webkit-text-stroke-width: thick;
+
+/* &lt;length&gt; 値 */
+-webkit-text-stroke-width: 2px;
+-webkit-text-stroke-width: 0.1em;
+-webkit-text-stroke-width: 1mm;
+-webkit-text-stroke-width: 5pt;
+
+/* グローバル値 */
+-webkit-text-stroke-width: inherit;
+-webkit-text-stroke-width: initial;
+-webkit-text-stroke-width: unset;
+</pre>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>&lt;line-width&gt;</code></dt>
+ <dd>角の太さ。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+{{csssyntax}}
+
+<h2 id="Example" name="Example">例</h2>
+
+<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+
+<pre class="brush: css notranslate">p {
+  margin: 0;
+  font-size: 4em;
+  -webkit-text-stroke-color: red;
+}
+
+#thin {
+  -webkit-text-stroke-width: thin;
+}
+
+#medium {
+  -webkit-text-stroke-width: 3px;
+}
+
+#thick {
+  -webkit-text-stroke-width: 1.5mm;
+}
+</pre>
+
+<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+
+<pre class="brush: html notranslate">&lt;p id="thin"&gt;Thin stroke&lt;/p&gt;
+&lt;p id="medium"&gt;Medium stroke&lt;/p&gt;
+&lt;p id="thick"&gt;Thick stroke&lt;/p&gt;
+</pre>
+
+<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
+   <td>{{Spec2('Compat')}}</td>
+   <td>初回標準化</td>
+  </tr>
+  <tr>
+   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br>
+    <small>文書内の '-webkit-text-stroke-width'</small></a></td>
+   <td>標準外で非公式の文書化</td>
+   <td>初回文書化</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
+
+<h2 id="See_Also" name="See_Also">関連情報</h2>
+
+<ul>
+ <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
+ <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
+ <li>{{cssxref("-webkit-text-stroke-color")}}</li>
+ <li>{{cssxref("-webkit-text-stroke")}}</li>
+ <li>{{cssxref("-webkit-text-fill-color")}}</li>
+</ul>
diff --git a/files/ja/web/css/-webkit-touch-callout/index.html b/files/ja/web/css/-webkit-touch-callout/index.html
deleted file mode 100644
index dbfa2c699b..0000000000
--- a/files/ja/web/css/-webkit-touch-callout/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: '-webkit-touch-callout'
-slug: Web/CSS/-webkit-touch-callout
-tags:
-  - CSS
-  - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit 拡張
-  - 'recipe:css-property'
-  - リファレンス
-  - レイアウト
-  - 標準外
-translation_of: Web/CSS/-webkit-touch-callout
----
-<div>{{CSSRef}}{{Non-standard_header}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p>
-
-<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p>
-
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
--webkit-touch-callout: default;
--webkit-touch-callout: none;
-
-/* グローバル値 */
--webkit-touch-callout: initial;
--webkit-touch-callout: inherit;
--webkit-touch-callout: unset;</pre>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt><code>default</code></dt>
- <dd>既定のコールアウトが表示されます。</dd>
- <dt><code>none</code></dt>
- <dd>コールアウト表示が無効になります。</dd>
-</dl>
-
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
-
-{{csssyntax}}
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<pre class="brush: css notranslate">.example {
-  -webkit-touch-callout: none;
-}
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<p>どの仕様書でも定義されていません。</p>
-
-<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
diff --git a/files/ja/web/css/-webkit-touch-callout/index.md b/files/ja/web/css/-webkit-touch-callout/index.md
new file mode 100644
index 0000000000..dbfa2c699b
--- /dev/null
+++ b/files/ja/web/css/-webkit-touch-callout/index.md
@@ -0,0 +1,61 @@
+---
+title: '-webkit-touch-callout'
+slug: Web/CSS/-webkit-touch-callout
+tags:
+  - CSS
+  - CSS プロパティ
+  - Non-standard
+  - Reference
+  - WebKit 拡張
+  - 'recipe:css-property'
+  - リファレンス
+  - レイアウト
+  - 標準外
+translation_of: Web/CSS/-webkit-touch-callout
+---
+<div>{{CSSRef}}{{Non-standard_header}}</div>
+
+<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p>
+
+<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* グローバル値 */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;</pre>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code>default</code></dt>
+ <dd>既定のコールアウトが表示されます。</dd>
+ <dt><code>none</code></dt>
+ <dd>コールアウト表示が無効になります。</dd>
+</dl>
+
+<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+
+{{csssyntax}}
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<pre class="brush: css notranslate">.example {
+  -webkit-touch-callout: none;
+}
+</pre>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<p>どの仕様書でも定義されていません。</p>
+
+<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</p>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
-- 
cgit v1.2.3-54-g00ecf


From f465736494c77f022062f8c76d1f329888be8824 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 00:13:02 +0900
Subject: 2021/08/13 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ja/web/css/-webkit-text-stroke-color/index.md  | 122 +++++++++------------
 .../ja/web/css/-webkit-text-stroke-width/index.md  | 122 +++++++++------------
 files/ja/web/css/-webkit-touch-callout/index.md    |  64 ++++++-----
 3 files changed, 143 insertions(+), 165 deletions(-)

diff --git a/files/ja/web/css/-webkit-text-stroke-color/index.md b/files/ja/web/css/-webkit-text-stroke-color/index.md
index b327da4d76..fcbd845d11 100644
--- a/files/ja/web/css/-webkit-text-stroke-color/index.md
+++ b/files/ja/web/css/-webkit-text-stroke-color/index.md
@@ -4,17 +4,19 @@ slug: Web/CSS/-webkit-text-stroke-color
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit 拡張
   - 標準外
+  - リファレンス
+  - WebKit
+  - recipe:css-property
+browser-compat: css.properties.-webkit-text-stroke-color
 translation_of: Web/CSS/-webkit-text-stroke-color
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-text-stroke-color</code></strong> は {{Glossary("CSS")}} のプロパティで、テキストの文字の角の<a href="/ja/docs/Web/CSS/color_value">色</a>を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。</p>
+**`-webkit-text-stroke-color`** は CSS のプロパティで、テキストの文字の線の[色](/ja/docs/Web/CSS/color_value)を示します。このプロパティが設定されない場合、 {{cssxref("color")}} プロパティの値が使用されます。
 
-<pre class="brush:css no-line-numbers notranslate">/* &lt;color&gt; 値 */
+```css
+/* <color> 値 */
 -webkit-text-stroke-color: red;
 -webkit-text-stroke-color: #e08ab4;
 -webkit-text-stroke-color: rgb(200, 100, 0);
@@ -23,86 +25,68 @@ translation_of: Web/CSS/-webkit-text-stroke-color
 -webkit-text-stroke-color: inherit;
 -webkit-text-stroke-color: initial;
 -webkit-text-stroke-color: unset;
-</pre>
+```
 
-<p>{{cssinfo}}</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+ `<color>`
+  - : 線の色。
 
-<dl>
- <dt><code>&lt;color&gt;</code></dt>
- <dd>角の色。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+### 角の色を変化させる
 
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;p&gt;Text with stroke&lt;/p&gt;
-&lt;input type="color" value="#ff0000"&gt;</pre>
+```html
+<p>Text with stroke</p>
+<input type="color" value="#ff0000">
+```
 
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+#### CSS
 
-<pre class="brush: css notranslate">p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: #ff0000; /* ライブサンプルで変更可能 */
 }
-</pre>
-
-<div class="hidden">
-<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3>
+```
 
-<pre class="brush: js notranslate">var colorPicker = document.querySelector("input");
+```js hidden
+var colorPicker = document.querySelector("input");
 colorPicker.addEventListener("change", function(evt) {
   document.querySelector("p").style.webkitTextStrokeColor = evt.target.value;
-});</pre>
-</div>
-
-<p>{{EmbedLiveSample("Example", "500px", "100px")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>初回標準化</td>
-  </tr>
-  <tr>
-   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-color" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small>文書内の '-webkit-text-stroke-color'</small></a></td>
-   <td>標準外で非公式の文書化</td>
-   <td>初回文書化</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-color")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke-width")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
-</ul>
+});
+```
+
+#### 結果
+
+{{EmbedLiveSample("Varying_the_stroke_color", "500px", "100px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-fill-color")}}
+- {{cssxref("-webkit-text-stroke-width")}}
+- {{cssxref("-webkit-text-stroke")}}
diff --git a/files/ja/web/css/-webkit-text-stroke-width/index.md b/files/ja/web/css/-webkit-text-stroke-width/index.md
index e8e39b12a0..799ff056b6 100644
--- a/files/ja/web/css/-webkit-text-stroke-width/index.md
+++ b/files/ja/web/css/-webkit-text-stroke-width/index.md
@@ -4,22 +4,21 @@ slug: Web/CSS/-webkit-text-stroke-width
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit
-  - WebKit 拡張
   - 標準外
+  - リファレンス
+  - WebKit
+  - recipe:css-property
+browser-compat: css.properties.-webkit-text-stroke-width
 translation_of: Web/CSS/-webkit-text-stroke-width
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><strong><code>-webkit-text-stroke-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、テキストの角の太さを指定します。</p>
+**`-webkit-text-stroke-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキストの線の太さを指定します。
 
-<p>{{cssinfo}}</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-text-stroke-width: thin;
 -webkit-text-stroke-width: medium;
 -webkit-text-stroke-width: thick;
@@ -34,24 +33,29 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 -webkit-text-stroke-width: inherit;
 -webkit-text-stroke-width: initial;
 -webkit-text-stroke-width: unset;
-</pre>
+```
+
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `<line-width>`
+  - : 線の太さ。
 
-<dl>
- <dt><code>&lt;line-width&gt;</code></dt>
- <dd>角の太さ。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
+
+### 線の幅を変更
 
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
+#### CSS
 
-<pre class="brush: css notranslate">p {
+```css
+p {
   margin: 0;
   font-size: 4em;
   -webkit-text-stroke-color: red;
@@ -68,52 +72,32 @@ translation_of: Web/CSS/-webkit-text-stroke-width
 #thick {
   -webkit-text-stroke-width: 1.5mm;
 }
-</pre>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
-
-<pre class="brush: html notranslate">&lt;p id="thin"&gt;Thin stroke&lt;/p&gt;
-&lt;p id="medium"&gt;Medium stroke&lt;/p&gt;
-&lt;p id="thick"&gt;Thick stroke&lt;/p&gt;
-</pre>
-
-<p>{{EmbedLiveSample("Example", "450px", "230px")}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Specification</th>
-   <th scope="col">Status</th>
-   <th scope="col">Comment</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}</td>
-   <td>{{Spec2('Compat')}}</td>
-   <td>初回標準化</td>
-  </tr>
-  <tr>
-   <td><a class="external external-icon" href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-text-stroke-width" hreflang="en" lang="en">Safari CSS Reference<br>
-    <small>文書内の '-webkit-text-stroke-width'</small></a></td>
-   <td>標準外で非公式の文書化</td>
-   <td>初回文書化</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.-webkit-text-stroke-width")}}</p>
-
-<h2 id="See_Also" name="See_Also">関連情報</h2>
-
-<ul>
- <li><a href="https://www.webkit.org/blog/85/introducing-text-stroke/">Surfin' Safari blog post announcing this feature</a></li>
- <li><a href="https://css-tricks.com/adding-stroke-to-web-text/">CSS-Tricks article explaining this feature</a></li>
- <li>{{cssxref("-webkit-text-stroke-color")}}</li>
- <li>{{cssxref("-webkit-text-stroke")}}</li>
- <li>{{cssxref("-webkit-text-fill-color")}}</li>
-</ul>
+```
+
+#### HTML
+
+```html
+<p id="thin">Thin stroke</p>
+<p id="medium">Medium stroke</p>
+<p id="thick">Thick stroke</p>
+```
+
+#### 結果
+
+{{EmbedLiveSample("Varying_stroke_widths", "450px", "230px")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-stroke")}}
+- {{cssxref("-webkit-text-fill-color")}}
diff --git a/files/ja/web/css/-webkit-touch-callout/index.md b/files/ja/web/css/-webkit-touch-callout/index.md
index dbfa2c699b..897bc197f8 100644
--- a/files/ja/web/css/-webkit-touch-callout/index.md
+++ b/files/ja/web/css/-webkit-touch-callout/index.md
@@ -4,58 +4,68 @@ slug: Web/CSS/-webkit-touch-callout
 tags:
   - CSS
   - CSS プロパティ
-  - Non-standard
-  - Reference
-  - WebKit 拡張
-  - 'recipe:css-property'
-  - リファレンス
   - レイアウト
+  - NeedsLiveSample
   - 標準外
+  - リファレンス
+  - WebKit
+  - recipe:css-property
+browser-compat: css.properties.-webkit-touch-callout
 translation_of: Web/CSS/-webkit-touch-callout
 ---
-<div>{{CSSRef}}{{Non-standard_header}}</div>
+{{CSSRef}}{{Non-standard_header}}
 
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <code>-webkit-touch-callout</code> プロパティは、対象を長押しすることで現れるコールアウト表示を制御します。</p>
+`-webkit-touch-callout` は [CSS](/ja/docs/Web/CSS) のプロパティで、対象を長押しすることで現れるコールアウト表示を制御します。
 
-<p>iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティはそういった挙動を無効にすることを可能にします。</p>
+iOS 上で対象が長押しされたとき、 Safari はそのリンクに関する情報をコールアウトで表示します。このプロパティではそういった挙動を無効にすることができます。
 
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```css
+/* キーワード値 */
 -webkit-touch-callout: default;
 -webkit-touch-callout: none;
 
 /* グローバル値 */
 -webkit-touch-callout: initial;
 -webkit-touch-callout: inherit;
--webkit-touch-callout: unset;</pre>
+-webkit-touch-callout: unset;
+```
+
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
 
-<h3 id="Values" name="Values">値</h3>
+- `default`
+  - : 既定のコールアウトが表示されます。
+- `none`
+  - : コールアウト表示が無効になります。
 
-<dl>
- <dt><code>default</code></dt>
- <dd>既定のコールアウトが表示されます。</dd>
- <dt><code>none</code></dt>
- <dd>コールアウト表示が無効になります。</dd>
-</dl>
+## 公式定義
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
+
+### タッチ時のコールアウトをオフにする
 
-<pre class="brush: css notranslate">.example {
+```css
+.example {
   -webkit-touch-callout: none;
 }
-</pre>
+```
+
+## 仕様書
 
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+どの仕様書でも定義されていません。 Apple は [Safari CSS リファレンス](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout) に説明を載せています。
 
-<p>どの仕様書でも定義されていません。</p>
+## ブラウザーの互換性
 
-<p>Apple は <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout">Safari CSS リファレンス</a> に説明を載せています。</p>
+{{Compat}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## 関連情報
 
-<p>{{Compat("css.properties.-webkit-touch-callout")}}</p>
+- [WebKit CSS 拡張](/en-US/docs/Web/CSS/WebKit_Extensions)
+- [Apple の開発者ドキュメントにおける -webkit-touch-callout](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_touch_callout)
-- 
cgit v1.2.3-54-g00ecf


From 54e4e3b4d64247fe726921526aec48180c35a466 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 00:44:51 +0900
Subject: 2021/08/13 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/-webkit-text-stroke/index.md | 94 +++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 files/ja/web/css/-webkit-text-stroke/index.md

diff --git a/files/ja/web/css/-webkit-text-stroke/index.md b/files/ja/web/css/-webkit-text-stroke/index.md
new file mode 100644
index 0000000000..1d4d700b96
--- /dev/null
+++ b/files/ja/web/css/-webkit-text-stroke/index.md
@@ -0,0 +1,94 @@
+---
+title: '-webkit-text-stroke'
+slug: Web/CSS/-webkit-text-stroke
+tags:
+  - CSS
+  - CSS プロパティ
+  - 標準外
+  - リファレンス
+  - WebKit
+  - recipe:css-shorthand-property
+browser-compat: css.properties.-webkit-text-stroke
+translation_of: Web/CSS/-webkit-text-stroke
+---
+{{CSSRef}}{{Non-standard_header}}
+
+**`-webkit-text-stroke`** は [CSS](/ja/docs/Web/CSS) のプロパティで、テキスト文字の輪郭線の[幅](/ja/docs/Web/CSS/length)と[色](/ja/docs/Web/CSS/color_value)を指定します。これは個別指定プロパティ {{cssxref("-webkit-text-stroke-width")}} および {{cssxref("-webkit-text-stroke-color")}} の一括指定プロパティです。
+
+```css
+/* 幅と色の値 */
+-webkit-text-stroke: 4px navy;
+text-stroke: 4px navy;
+
+/* グローバル値 */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+text-stroke: inherit;
+text-stroke: initial;
+text-stroke: unset;
+```
+
+## 構成要素のプロパティ
+
+このプロパティは以下の CSS プロパティの一括指定です。
+
+- [`-webkit-text-stroke-color`](/ja/docs/Web/CSS/-webkit-text-stroke-color)
+- [`-webkit-text-stroke-width`](/ja/docs/Web/CSS/-webkit-text-stroke-width)
+
+## 構文
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : 輪郭線の幅です。
+- {{cssxref("&lt;color&gt;")}}
+  - : 輪郭線の色です。
+
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### テキストに赤い輪郭線を追加
+
+#### HTML
+
+```html
+<p id="example">このテキストの輪郭線は赤です。</p>
+```
+
+#### CSS
+
+```css
+#example {
+  font-size: 3em;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Adding_a_red_text_stroke", 600, 60)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Surfin' Safari blog post announcing this feature](https://www.webkit.org/blog/85/introducing-text-stroke/)
+- [CSS-Tricks article explaining this feature](https://css-tricks.com/adding-stroke-to-web-text/)
+- {{cssxref("-webkit-text-stroke-width")}}
+- {{cssxref("-webkit-text-stroke-color")}}
+- {{cssxref("-webkit-text-fill-color")}}
-- 
cgit v1.2.3-54-g00ecf


From 5d7888c25114590886f2eea0c8fe0d81e7dc5b16 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 01:58:53 +0900
Subject: 2021/08/13 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../using_feature_queries/index.md                 | 118 +++++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 files/ja/web/css/css_conditional_rules/using_feature_queries/index.md

diff --git a/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md
new file mode 100644
index 0000000000..c164fb5ca5
--- /dev/null
+++ b/files/ja/web/css/css_conditional_rules/using_feature_queries/index.md
@@ -0,0 +1,118 @@
+---
+title: 機能クエリーの使用
+slug: Web/CSS/CSS_Conditional_Rules/Using_Feature_Queries
+tags:
+  - CSS
+  - 条件付き CSS
+  - ガイド
+  - 機能クエリー
+  - プログレッシブエンハンスメント
+---
+{{CSSRef}}
+
+**機能クエリー**は、 CSS の [@supports](/ja/docs/Web/CSS/@supports) アットルールを使って作成され、ウェブ開発者がある機能に対応しているかどうかを検査し、その検査結果に基づいて実行する CSS を提供する方法として有益です。このガイドでは、機能クエリを使用してプログレッシブエンハンスメントを実装する方法を学びます。
+
+## 構文
+
+CSS の機能クエリーは [CSS 条件付きルールモジュール](https://drafts.csswg.org/css-conditional-3/)の一部で、ここにはメディアクエリーの [@media](/ja/docs/Web/CSS/@media) ルールも含まれてます。機能クエリーを使用すると、メディアクエリーと同様の動作をすることが分かると思います。違いは、メディアクエリーではウェブページが動作している環境について何かを検査するのに対し、機能クエリーでは CSS 機能に対するブラウザーの対応状況を検査する点です。
+
+機能クエリは `@supports` ルールと、それに続く検査したいプロパティ名と値から構成されます。 `display` のようなプロパティ名だけでは検査できません。ルールにはプロパティ名と値が必要です。
+
+```css
+@supports (property: value) {
+  適用する CSS ルール
+}
+```
+
+例えば、あるブラウザーが `row-gap` プロパティに対応しているかどうかを確認したい場合、次のような機能クエリーを記述します。多くの場合は、どの値を使用しても問題ありません。ブラウザーがこのプロパティに対応しているかどうかを確認したいだけであれば、有効な値であればどのような値でもかまいません。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/simple.html", '100%', 600)}}
+
+特定のプロパティの新しい値を検査する場合は、プロパティと値の組の値の部分がより重要になります。良い例は `display` プロパティでしょう。すべてのブラウザーは `display` に対応しており、`display: block` は CSS1 にまでさかのぼります。しかし、 `display: flex` と `display: grid` はもっと新しい値です。 CSS ではプロパティに追加の値を指定することがよくあるので、プロパティと値を検査するということは、これらの値に対応しているかどうかを検出することができることを意味します。
+
+## 対応がないかどうかを検査
+
+ブラウザーが機能に対応しているかどうかを尋ねる場合のほか、 `not` キーワードを追加することで逆の検査を行うことができます。
+
+```css
+@supports not (property: value) {
+  CSS rules to apply
+}
+```
+
+以下の例の機能クエリー内の CSS は、ブラウザーが `row-gap` に対応していない場合に実行されます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/not.html", '100%', 600)}}
+
+## 複数の機能を検査
+
+機能クエリーで、複数のプロパティに対応していることを検査必要がある場合があります。そのような場合は、`and` キーワードで区切って、検査する機能の一覧を記述します。
+
+```css
+@supports (property1: value) and (property2: value) {
+  CSS rules to apply
+}
+```
+
+例えば、実行したい CSS が、ブラウザーが CSS シェイプと CSS グリッドに対応していることを必要とする場合、この 2 つを検査するルールを作成することができます。次のルールは、ブラウザーが `shape-outside: circle()` と `display: grid` の両方に対応している場合にのみ true を返します。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/and.html", '100%', 600)}}
+
+`or` を使用することもできます。これは選択したもののうち 1 つが一致した場合に CSS を有効にすることができます。
+
+```css
+@supports (property1: value) or (property2: value) {
+  CSS rules to apply
+}
+```
+
+これは、ある機能がベンダー接頭辞付きである場合に特に有用で、標準のプロパティとベンダー接頭辞を加えたものを検査することができます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/or.html", '100%', 600)}}
+
+## 機能クエリーの制限
+
+`@support` ルールは、ブラウザーが 1 つ以上のプロパティと値の組を解釈できるかどうか、つまり、その機能に対応していると主張するかどうかを確認するために使用します。もしブラウザーがそのプロパティと値のペアを理解できれば、肯定的な応答を返します。したがって、ブラウザーがある機能に正しく、バグなく対応しているかどうかを確認するために、機能クエリーを使用することはできないのです。
+
+さらに、機能クエリーはは「部分的な実装」を検査することもできません。この良い例が `gap` プロパティです。CSS グリッドに対応しているすべてのブラウザーは、 CSS グリッドの `gap` に対応していますが、フレックスボックスの `gap` に対応しているのは Firefox だけです。フレックスボックスで使いたいからと `gap` プロパティを検査「すると、実装されていないにもかかわらず肯定的な回答を得ることになります。
+
+## プログレッシブエンハンスメントのための機能クエリーの使い方
+
+機能クエリーは、サイトを段階的に拡張していく際に非常に有効なツールです。すべてのブラウザーに対して適切なソリューションを提供し、より新しい機能に対応しているブラウザーにはより高度なソリューションを提供することができます。
+
+しかし、機能クエリーに対応していないブラウザーもあれば、使いたい機能に対応していないブラウザーもあります。例えば、  IE11 で対応していない CSS グリッドを使いたいとします。 IE11 は機能クエリーにも対応していないので、未対応のブラウザーをチェックして代替策を作ることはできません。しかし、実際には、プログレッシブエンハンスメントに機能クエリーを使用する場合、これは重要ではありません。ただし、未対応ブラウザー用の CSS を記述し、それを機能クエリー内の CSS で上書きするようにするなど、一定の方法で CSS を構成する必要があります。
+
+それでは、上記のような方法で機能クエリーを使用する、とても簡単な例を見ていきましょう。
+
+例えば、 3 つのボックスが並んだレイアウトを作りたい場合、理想的には[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)を使いたいところです。しかし、古いブラウザーのためのレイアウトでは、浮動要素を使ったレイアウトにしたいとします。まずはその浮動レイアウトを以下のコードで作成しすると、 3 列にすることができます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/step1.html", '100%', 900)}}
+
+ブラウザーは CSS のプロパティや値を理解できない場合、それを無視します。そこで、 CSS グリッドを使ってレイアウトを強化することから始めるとよいでしょう。グリッドに対応していないブラウザーは、 `display` プロパティの `grid` の値を無視します。浮動アイテムがグリッドアイテムになると、浮動は取り除かれます。詳細は、[古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)を参照してください。そのため、グリッド版は浮動のものを上書きすればよいのです。
+
+しかし、浮動されたアイテムを 3 列で表示するために使用した `width` プロパティが原因で問題が発生しました。これは、現在、浮動の場合のようにコンテナーの幅ではなく、カラムトラックの幅としてグリッドに解釈されます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/step2.html", '100%', 900)}}
+
+必要なのは、 `display: grid` に対応している場合に、 width を削除する方法です。これはまさに機能クエリーが解決する状況です。グリッドに対応している場合、 `width` を `auto` に戻すことができます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/step3.html", '100%', 900)}}
+
+上記のシナリオでは、 IE11 が機能クエリーや CSS グリッドに対応していなくても問題ありません。浮動版はどの場合でも適用され、グリッドに対応しているブラウザーではそれが上書きされm佐生。
+
+上記のコードを記述する別の方法として、以下のようにグリッドのコードをすべて機能クエリーでラップすることができます。
+
+{{EmbedGHLiveSample("css-examples/feature-queries/step4.html", '100%', 900)}}
+
+この場合、コードが少し増えるかもしれませんが、プロパティ名や値名の綴りを故意に間違えることで、代替策をテストできるという利点があります。上記のライブサンプルでは、 `@supports` ルールの `display: grid` を `display: grip` などに変更すると試すことができます。
+
+## まとめ
+
+機能クエリーは、古いブラウザーで使用されているサイトの表示をよりシンプルに強化することで、新しい機能の利用を開始するのに役立ちます。対応ブラウザー用の CSS をまとめることができるため、上記のグリッドの例のように、代替表示用のスタイルが漏れてしまうリスクもありません。
+
+### 関連情報
+
+- [@supports](/ja/docs/Web/CSS/@supports) ルール
+- レイアウトの学習: [古いブラウザーの対応](/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [CSS グリッドレイアウトとプログレッシブエンハンスメント](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement)
+- [CSS での機能クエリーの使用](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/)
-- 
cgit v1.2.3-54-g00ecf


From b56a9195070c06b00cfb1ad6a1a89c92870647b5 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 02:39:23 +0900
Subject: 2022/02/03 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/animation-timeline/index.md | 120 +++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 files/ja/web/css/animation-timeline/index.md

diff --git a/files/ja/web/css/animation-timeline/index.md b/files/ja/web/css/animation-timeline/index.md
new file mode 100644
index 0000000000..1058e73a91
--- /dev/null
+++ b/files/ja/web/css/animation-timeline/index.md
@@ -0,0 +1,120 @@
+---
+title: animation-timeline
+slug: Web/CSS/animation-timeline
+tags:
+  - CSS
+  - CSS アニメーション
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.animation-timeline
+translation_of: Web/CSS/animation-timeline
+---
+{{CSSRef}}
+
+**`animation-timeline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、この要素に適用されるスクロールアニメーションを記述する 1 つ以上の {{cssxref("@scroll-timeline")}} アットルールの名前を指定します。
+
+<!-- {{EmbedInteractiveExample("pages/css/animation-name.html")}} -->
+
+ふつうはすべてのアニメーションプロパティを一度に設定する一括指定プロパティの {{cssxref("animation")}} を使用したほうが便利です。
+
+## 構文
+
+```css
+/* 単一のアニメーション */
+animation-timeline: none;
+animation-timeline: test_05;
+animation-timeline: -specific;
+animation-timeline: sliding-vertically;
+
+/* 複数のアニメーション */
+animation-timeline: test1, animation4;
+animation-timeline: none, -moz-specific, sliding;
+
+/* グローバル値 */
+animation-timeline: initial;
+animation-timeline: inherit;
+animation-timeline: revert;
+animation-timeline: unset;
+```
+
+### 値
+
+- `auto`
+  - : アニメーションのタイムラインはこの文書の既定の [DocumentTimeline](/ja/docs/Web/API/DocumentTimeline) です。
+- `none`
+  - : アニメーションはタイムラインに関連付けられません。
+- `<timeline-name>`
+  - : スクロールタイムラインを識別する {{cssxref('custom-ident')}} または文字列で、 {{cssxref('@scroll-timeline')}} ルールで宣言されているものです。 2 つ以上のスクロールタイムラインが同じ名前であった場合、カスケード中で最後に宣言されたものが使用されます。一致するスクロールタイムラインがなければ、アニメーションはタイムラインに関連付けられません。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### 単純な例
+
+`squareTimeline` という名前のスクロールタイムラインが宣言されており、 `#square` 要素に `animation-timeline: squareTimeline` を用いて適用されています。
+
+#### HTML
+
+```html
+<div id="container">
+  <div id="square"></div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  height: 300px;
+}
+
+#square {
+  background-color: deeppink;
+  width: 100px; height: 100px;
+  margin-top: 100px;
+  animation-name: rotateAnimation;
+  animation-duration: 3s;
+  animation-direction: alternate;
+  animation-timeline: squareTimeline;
+}
+
+@scroll-timeline squareTimeline {
+  source: selector('#container');
+  orientation: "vertical";
+  scroll-offsets:  0px, 300px;
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Simple example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS アニメーションの使用](/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- [@scroll-timeline アットルール](/ja/docs/Web/CSS/@scroll-timeline)
-- 
cgit v1.2.3-54-g00ecf


From f775e51c0f2e7b781fecb0fe2f382b9c2db36ec0 Mon Sep 17 00:00:00 2001
From: StephaneRegnie <42835317+StephaneRegnie@users.noreply.github.com>
Date: Mon, 14 Mar 2022 16:51:06 +0100
Subject: Fix punctuation in Apprendre JS : Fonctions (#4519)

---
 files/fr/learn/javascript/building_blocks/functions/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md
index 0727c536ba..9b0e1d4e50 100644
--- a/files/fr/learn/javascript/building_blocks/functions/index.md
+++ b/files/fr/learn/javascript/building_blocks/functions/index.md
@@ -115,7 +115,7 @@ Nous avions besoin de cette fonction car la fonction intégrée du navigateur [
 
 ## Invoquer des fonctions
 
-Vous êtes probablement au clair avec cela maintenant, mais juste au cas où... pour utiliser une fonction après qu'elle ait été définie, vous devez la lancer - ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses.
+Vous êtes probablement au clair avec cela maintenant, mais juste au cas où… pour utiliser une fonction après qu'elle a été définie, vous devez la lancer — ou l'invoquer. Pour ce faire, vous devez inclure le nom de la fonction quelque part dans le code suivi par des parenthèses&nbsp;:
 
 ```js
 function myFunction() {
-- 
cgit v1.2.3-54-g00ecf


From 88b5d6939c28b5b210f291b7873c5de711b54ab4 Mon Sep 17 00:00:00 2001
From: Pedro Torcatt <pedrotorcattsoto@gmail.com>
Date: Mon, 14 Mar 2022 12:22:50 -0400
Subject: Add missing constructor document in evalerror (#4575)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add missing constructor document in evalerror

NOTA: En la versión en inglés, este archivo también está dentro de una carpeta llamada `evalerror`.

* Update files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md

Co-authored-by: Juan Vásquez <juan@logicalbricks.com>

* Update files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md
---
 .../global_objects/evalerror/evalerror/index.md    | 61 ++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md

diff --git a/files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md b/files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md
new file mode 100644
index 0000000000..3b488139f2
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/evalerror/evalerror/index.md
@@ -0,0 +1,61 @@
+---
+title: EvalError() constructor
+slug: Web/JavaScript/Reference/Global_Objects/EvalError/EvalError
+browser-compat: javascript.builtins.EvalError.EvalError
+---
+{{JSRef}}
+
+El constructor **`EvalError`** crea un nuevo error relacionado con la función global {{jsxref("Global_Objects/eval", "eval()")}}. Esta excepción ya no es lanzada por JavaScript, sin embargo el objeto `EvalError` permanece por compatibilidad.
+
+## Sintaxis
+
+```js
+new EvalError()
+new EvalError(message)
+new EvalError(message, fileName)
+new EvalError(message, fileName, lineNumber)
+```
+
+### Parámetros
+
+- `message` {{optional_inline}}
+  - : Descripción del error humanamente legible
+- `fileName` {{optional_inline}}
+  - : El nombre del archivo que contiene el código que causó la excepción
+- `lineNumber` {{optional_inline}}
+  - : El número de línea del código que causó la excepción
+
+## Ejemplos
+
+El objeto `EvalError` no se utiliza en la especificación actual de ECMAScript y por lo tanto no será lanzado por el tiempo de ejecución. Sin embargo, el objeto en sí se mantiene para la compatibilidad con versiones anteriores de la especificación.
+
+### Creación de un EvalError
+
+```js
+try {
+  throw new EvalError('Hello', 'someFile.js', 10);
+} catch (e) {
+
+  console.log(e instanceof EvalError); // true
+  console.log(e.message);              // "Hello"
+  console.log(e.name);                 // "EvalError"
+  console.log(e.fileName);             // "someFile.js"
+  console.log(e.lineNumber);           // 10
+  console.log(e.columnNumber);         // 0
+  console.log(e.stack);                // "@Scratchpad/2:2:9\n"
+}
+```
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compatibilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{jsxref("Error")}}
+- {{jsxref("Global_Objects/eval", "eval()")}}
+
-- 
cgit v1.2.3-54-g00ecf


From 8e3a134e4c8e6ef4fbdc24e487c76a6b5e6304ba Mon Sep 17 00:00:00 2001
From: Guille <darkwilly92@gmail.com>
Date: Mon, 14 Mar 2022 17:35:26 +0100
Subject: Update index.html (#4568)

Update info
---
 files/es/web/http/methods/trace/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/es/web/http/methods/trace/index.html b/files/es/web/http/methods/trace/index.html
index c75dcd1a2a..2ca6f5929c 100644
--- a/files/es/web/http/methods/trace/index.html
+++ b/files/es/web/http/methods/trace/index.html
@@ -21,7 +21,7 @@ translation_of: Web/HTTP/Methods/TRACE
   </tr>
   <tr>
    <th scope="row">{{Glossary("Safe")}}</th>
-   <td>No</td>
+   <td>Yes</td>
   </tr>
   <tr>
    <th scope="row">{{Glossary("Idempotent")}}</th>
-- 
cgit v1.2.3-54-g00ecf


From cf91da6b41624d70ca2f29235f94c3f2c80d000f Mon Sep 17 00:00:00 2001
From: Juan Vásquez <juan@logicalbricks.com>
Date: Mon, 14 Mar 2022 10:56:34 -0600
Subject: 12. rangeerror [es] (#4507)

* 12. rangeerror [es]

Closes #4361

- [x] Change from HTML to MD
- [x] Sync content

* Update files/es/web/javascript/reference/global_objects/rangeerror/index.md

Typo

Co-authored-by: Alexander <alexander_belial999@hotmail.com>
---
 .../reference/global_objects/rangeerror/index.html | 115 ---------------------
 .../reference/global_objects/rangeerror/index.md   |  98 ++++++++++++++++++
 2 files changed, 98 insertions(+), 115 deletions(-)
 delete mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/index.html
 create mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/index.md

diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/index.html
deleted file mode 100644
index 154049adca..0000000000
--- a/files/es/web/javascript/reference/global_objects/rangeerror/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: RangeError
-slug: Web/JavaScript/Reference/Global_Objects/RangeError
-tags:
-  - Error
-  - JavaScript
-  - Object
-  - RangeError
-translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
----
-<div>{{JSRef}}</div>
-
-<p>El objeto <code><strong>RangeError</strong></code> indica un error cuando un valor no se encuentra dentro de un rango de valores permitidos.</p>
-
-<h2 id="Sintaxis">Sintaxis</h2>
-
-<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre>
-
-<h3 id="Parámetros">Parámetros</h3>
-
-<dl>
- <dt><code>message</code></dt>
- <dd>Opcional. Mensaje de error</dd>
- <dt><code>fileName</code> {{non-standard_inline}}</dt>
- <dd>Opcional. Nombre del fichero que contiene el código donde se produjo el error</dd>
- <dt><code>lineNumber</code> {{non-standard_inline}}</dt>
- <dd>Opcional. Número de línea de código donde se produjo el error</dd>
-</dl>
-
-<h2 id="Descripción">Descripción</h2>
-
-<p>Se lanza un <code>RangeError</code> cuando se pasa como parámetro a una función un número que no está dentro del rango que dicha función permite. Esto puede ocurrir cuando se intenta crear un array  con una longitud inválida con el constructor {{jsxref("Array")}}, o al pasar valores inválidos a los métodos numéricos {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} o {{jsxref("Number.toPrecision()")}}.</p>
-
-<h2 id="Propiedades">Propiedades</h2>
-
-<dl>
- <dt>{{jsxref("RangeError.prototype")}}</dt>
- <dd>Permite añadir propiedades a objetos <code>RangeError</code>.</dd>
-</dl>
-
-<h2 id="Métodos">Métodos</h2>
-
-<p><code>RangeError</code> no contiene métodos, pero hereda a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</p>
-
-<h2 id="Instancias_de_RangeError">Instancias de <code>RangeError</code></h2>
-
-<h3 id="Propiedades_2">Propiedades</h3>
-
-<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Propiedades')}}</div>
-
-<h3 id="Métodos_2">Métodos</h3>
-
-<div>{{page('/es/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Métodos')}}</div>
-
-<h2 id="Ejemplos">Ejemplos</h2>
-
-<h3 id="Utilizando_RangeError">Utilizando <code>RangeError</code></h3>
-
-<pre class="brush: js">var check = function(num) {
-  if (num &lt; MIN || num &gt; MAX) {
-    throw new RangeError('El parámetro debe estar entre ' + MIN + ' y ' + MAX);
-  }
-};
-
-try {
-  check(500);
-}
-catch (e) {
-  if (e instanceof RangeError) {
-    // TODO: Manejar el error de rango
-  }
-}
-</pre>
-
-<h2 id="Especificaciones">Especificaciones</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Especificación</th>
-   <th scope="col">Estado</th>
-   <th scope="col">Comentario</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES3')}}</td>
-   <td>{{Spec2('ES3')}}</td>
-   <td>Definición inical.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td>
-   <td>{{Spec2('ES5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td>
-   <td>{{Spec2('ES6')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2>
-
-{{Compat("javascript.builtins.RangeError")}}
-
-<h2 id="Vea_también">Vea también</h2>
-
-<ul>
- <li>{{jsxref("Error")}}</li>
- <li>{{jsxref("RangeError.prototype")}}</li>
- <li>{{jsxref("Array")}}</li>
- <li>{{jsxref("Number.toExponential()")}}</li>
- <li>{{jsxref("Number.toFixed()")}}</li>
- <li>{{jsxref("Number.toPrecision()")}}</li>
-</ul>
diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/index.md b/files/es/web/javascript/reference/global_objects/rangeerror/index.md
new file mode 100644
index 0000000000..6481f33882
--- /dev/null
+++ b/files/es/web/javascript/reference/global_objects/rangeerror/index.md
@@ -0,0 +1,98 @@
+---
+title: RangeError
+slug: Web/JavaScript/Reference/Global_Objects/RangeError
+translation_of: Web/JavaScript/Reference/Global_Objects/RangeError
+browser-compat: javascript.builtins.RangeError
+---
+{{JSRef}}
+
+El objeto **`RangeError`** indica un error cuando un valor no se encuentra dentro de un rango de valores permitidos.
+
+## Descripción
+
+Se lanza un `RangeError` cuando se intenta pasar un valor como argumento a una función
+que no permite un rango que incluye el valor.
+
+Esto puede ocurrir cuando:
+
+- pasas un valor que no es uno de los valores de cadena permitidos a {{jsxref("String.prototype.normalize()")}}, o
+- cuando intentas crear una matriz de una longitud inválida con el constructor {{jsxref("Array")}}, o
+- cuando pasas valores inválidos a los métodos numéricos {{jsxref("Number.prototype.toExponential()")}},
+  {{jsxref("Number.prototype.toFixed()")}} o {{jsxref("Number.prototype.toPrecision()")}}.
+
+## Constructor
+
+- {{jsxref("RangeError/RangeError", "RangeError()")}}
+  - : Crea un nuevo objecto `RangeError`.
+
+## Propiedades de instancia
+
+- {{jsxref("Error.prototype.message", "RangeError.prototype.message")}}
+  - : Mensaje de error.
+- {{jsxref("Error.prototype.name", "RangeError.prototype.name")}}
+  - : Nombre del error. Heredado de {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}
+  - : Ruta al archivo que generó este error. Heredado de {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}
+  - : Número de línea en el archivo que generó este error. Heredado de {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}
+  - : Número de columna en la línea que generó este error. Heredado de {{jsxref("Error")}}.
+- {{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}
+  - : Seguimiento de pila. Heredado de {{jsxref("Error")}}.
+
+## Ejemplo
+
+### Usando RangeError (para valores numéricos)
+
+```js
+function check(n) {
+  if (!(n >= -500 && n <= 500)) {
+    throw new RangeError("El argumento debe estar entre -500 y 500.");
+  }
+}
+
+try {
+  check(2000);
+} catch (error) {
+  if (error instanceof RangeError) {
+    // Manejar el error
+  }
+}
+```
+
+### Usando RangeError (para valores no numéricos)
+
+```js
+function check(value) {
+  if (["apple", "banana", "carrot"].includes(value) === false) {
+    throw new RangeError(
+      'El argumento debe de ser una "apple", "banana", o "carrot".'
+    );
+  }
+}
+
+try {
+  check("cabbage");
+} catch (error) {
+  if (error instanceof RangeError) {
+    // Manejar el error
+  }
+}
+```
+
+## Especificaciones
+
+{{Specifications}}
+
+## Compativilidad con navegadores
+
+{{Compat}}
+
+## Véase también
+
+- {{jsxref("Error")}}
+- {{jsxref("Array")}}
+- {{jsxref("Number.toExponential()")}}
+- {{jsxref("Number.toFixed()")}}
+- {{jsxref("Number.toPrecision()")}}
+- {{jsxref("String.prototype.normalize()")}}
-- 
cgit v1.2.3-54-g00ecf


From 40592801f1fe0a90cd61b26d5cfcbfb9bd7e0e19 Mon Sep 17 00:00:00 2001
From: A1lo <yin199909@aliyun.com>
Date: Tue, 15 Mar 2022 01:20:47 +0800
Subject: correct the link to `Glossary/Proxy_server` (#4577)

* Update index.html

* remove style in `img` tags
---
 files/zh-cn/web/http/overview/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/files/zh-cn/web/http/overview/index.html b/files/zh-cn/web/http/overview/index.html
index 5fcecff392..b07346ffbe 100644
--- a/files/zh-cn/web/http/overview/index.html
+++ b/files/zh-cn/web/http/overview/index.html
@@ -12,19 +12,19 @@ translation_of: Web/HTTP/Overview
 
 <p class="summary"><strong>HTTP是一种能够获取如 HTML 这样的网络资源的 </strong>{{glossary("protocol")}}(通讯协议)。<strong>它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的，像是文本、布局描述、图片、视频、脚本等等。</strong></p>
 
-<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png" style="height: 319px; width: 545px;"></p>
+<p><img alt="A Web document is the composition of different resources" src="https://mdn.mozillademos.org/files/13677/Fetching_a_page.png"></p>
 
 <p>客户端和服务端通过交换各自的消息（与数据流正好相反）进行交互。由像浏览器这样的客户端发出的消息叫做 <em>requests</em>，被服务端响应的消息叫做 <em>responses。</em></p>
 
-<p class="clear"><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png" style="float: left; height: 299px; padding-bottom: 15px; padding-right: 20px; width: 418px;">HTTP被设计于20世纪90年代初期，是一种可扩展的协议。它是应用层的协议，通过{{glossary("TCP")}}，或者是{{glossary("TLS")}}－加密的TCP连接来发送，理论上任何可靠的传输协议都可以使用。因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如HTML表单这样的信息。HTTP还可以根据网页需求，仅获取部分Web文档内容更新网页。</p>
+<p class="clear"><img alt="HTTP as an application layer protocol, on top of TCP (transport layer) and IP (network layer) and below the presentation layer." src="https://mdn.mozillademos.org/files/13673/HTTP%20&amp;%20layers.png">HTTP被设计于20世纪90年代初期，是一种可扩展的协议。它是应用层的协议，通过{{glossary("TCP")}}，或者是{{glossary("TLS")}}－加密的TCP连接来发送，理论上任何可靠的传输协议都可以使用。因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如HTML表单这样的信息。HTTP还可以根据网页需求，仅获取部分Web文档内容更新网页。</p>
 
 <h2 id="基于HTTP的组件系统">基于HTTP的组件系统</h2>
 
 <p>HTTP是一个client-server协议：请求通过一个实体被发出，实体也就是用户代理。大多数情况下，这个用户代理都是指浏览器，当然它也可能是任何东西，比如一个爬取网页生成维护搜索引擎索引的机器爬虫。</p>
 
-<p>每一个发送到服务器的请求，都会被服务器处理并返回一个消息，也就是<em>response。</em>在这个请求与响应之间，还有许许多多的被称为{{glossary("Proxy", "proxies")}}的实体，他们的作用与表现各不相同，比如有些是网关，还有些是{{glossary("Cache", "caches")}}等。</p>
+<p>每一个发送到服务器的请求，都会被服务器处理并返回一个消息，也就是<em>response</em>。在这个请求与响应之间，还有许许多多的被称为 {{Glossary("Proxy_server", "proxies")}} 的实体，他们的作用与表现各不相同，比如有些是网关，还有些是{{glossary("Cache", "caches")}}等。</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png" style="height: 121px; width: 819px;"></p>
+<p><img src="https://mdn.mozillademos.org/files/13679/Client-server-chain.png"></p>
 
 <p>实际上，在一个浏览器和处理请求的服务器之间，还有路由器、调制解调器等许多计算机。由于Web的层次设计，那些在网络层和传输层的细节都被隐藏起来了。HTTP位于最上层的应用层。虽然底层对于分析网络问题非常重要，但是大多都跟对HTTP的描述不相干。</p>
 
@@ -139,12 +139,12 @@ Content-Type: text/html
 
 <p>HTTP请求的一个例子：</p>
 
-<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png" style="height: 336px; width: 693px;"></p>
+<p><img alt="A basic HTTP request" src="https://mdn.mozillademos.org/files/13687/HTTP_Request.png"></p>
 
 <p>请求由以下元素组成：</p>
 
 <ul>
- <li>一个HTTP的<a href="/en-US/docs/Web/HTTP/Methods">method</a>，经常是由一个动词像{{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 或者一个名词像{{HTTPMethod("OPTIONS")}}，{{HTTPMethod("HEAD")}}来定义客户端的动作行为。通常客户端的操作都是获取资源（GET方法）或者发送<a href="/en-US/docs/Web/Guide/HTML/Forms">HTML form</a>表单值（POST方法），虽然在一些情况下也会有其他操作。</li>
+ <li>一个HTTP的<a href="/en-US/docs/Web/HTTP/Methods">method</a>，经常是由一个动词像{{HTTPMethod("GET")}}, {{HTTPMethod("POST")}} 或者一个名词像{{HTTPMethod("OPTIONS")}}，{{HTTPMethod("HEAD")}}来定义客户端的动作行为。通常客户端的操作都是获取资源（GET方法）或者发送<a href="/zh-CN/docs/Learn/Forms">HTML form</a>表单（POST方法），虽然在一些情况下也会有其他操作。</li>
  <li>要获取的资源的路径，通常是上下文中就很明显的元素资源的URL，它没有{{glossary("protocol")}} （<code>http://</code>），{{glossary("domain")}}（<code>developer.mozilla.org</code>），或是TCP的{{glossary("port")}}（HTTP一般在80端口）。</li>
  <li>HTTP协议版本号。</li>
  <li>为服务端表达其他信息的可选头部<a href="/en-US/docs/Web/HTTP/Headers">headers</a>。</li>
@@ -155,7 +155,7 @@ Content-Type: text/html
 
 <p>HTTP响应的一个例子：</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png" style="height: 494px; width: 758px;"></p>
+<p><img src="https://mdn.mozillademos.org/files/13691/HTTP_Response.png"></p>
 
 <p>响应报文包含了下面的元素：</p>
 
-- 
cgit v1.2.3-54-g00ecf


From a98c2b046279a110f5be66678fc2782ca5da7ab5 Mon Sep 17 00:00:00 2001
From: "linlinzzo(林林)" <79007796+linlinzzo@users.noreply.github.com>
Date: Tue, 15 Mar 2022 01:22:11 +0800
Subject: add space between Chinese & Latin words (#4609)

---
 files/zh-cn/web/performance/dns-prefetch/index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/files/zh-cn/web/performance/dns-prefetch/index.html b/files/zh-cn/web/performance/dns-prefetch/index.html
index 155cdf100c..78eaa54860 100644
--- a/files/zh-cn/web/performance/dns-prefetch/index.html
+++ b/files/zh-cn/web/performance/dns-prefetch/index.html
@@ -10,9 +10,9 @@ translation_of: Web/Performance/dns-prefetch
 
 <h2 id="为什么要使用_dns-prefetch">为什么要使用 dns-prefetch?</h2>
 
-<p>当浏览器从（第三方）服务器请求资源时，必须先将该<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>域名解析为 IP地址，然后浏览器才能发出请求。此过程称为 DNS解析。DNS 缓存可以帮助减少此延迟，而 DNS解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。</p>
+<p>当浏览器从（第三方）服务器请求资源时，必须先将该<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>域名解析为 IP 地址，然后浏览器才能发出请求。此过程称为 DNS 解析。DNS 缓存可以帮助减少此延迟，而 DNS 解析可以导致请求增加明显的延迟。对于打开了与许多第三方的连接的网站，此延迟可能会大大降低加载性能。</p>
 
-<p><code>dns-prefetch</code> 可帮助开发人员掩盖 DNS解析延迟。 <a href="/zh-CN/docs/Web/HTML/Element/link">HTML <code>&lt;link&gt;</code>元素</a> 通过 dns-prefetch的 <a href="/zh-CN/docs/Web/HTML/Attributes/rel">rel 属性</a>值提供此功能。然后在<a href="/zh-CN/docs/Web/HTML/Attributes"> href属性</a>中指要<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>的域名：</p>
+<p><code>dns-prefetch</code> 可帮助开发人员掩盖 DNS 解析延迟。 <a href="/zh-CN/docs/Web/HTML/Element/link">HTML <code>&lt;link&gt;</code>元素</a> 通过 dns-prefetch 的 <a href="/zh-CN/docs/Web/HTML/Attributes/rel">rel 属性</a>值提供此功能。然后在<a href="/zh-CN/docs/Web/HTML/Attributes"> href 属性</a>中指要<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>的域名：</p>
 
 <h2 id="句法">句法</h2>
 
@@ -30,19 +30,19 @@ translation_of: Web/Performance/dns-prefetch
   &lt;/body&gt;
 &lt;/html&gt;</pre>
 
-<p>每当站点引用跨域域上的资源时，都应在 <a href="/zh-CN/docs/Web/HTML/Element/head">&lt;head&gt; 元素</a>中放置 dns-prefetch提示，但是要记住一些注意事项。</p>
+<p>每当站点引用跨域域上的资源时，都应在<a href="/zh-CN/docs/Web/HTML/Element/head">&lt;head&gt;元素</a>中放置 dns-prefetch 提示，但是要记住一些注意事项。</p>
 
 <h2 id="最佳实践">最佳实践</h2>
 
 <p id="Three_things_to_keep_in_mind">请记住以下三点：</p>
 
-<p>首先，<code>dns-prefetch</code> 仅对<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>域上的 DNS查找有效，因此请避免使用它来指向您的站点或域。这是因为，到浏览器看到提示时，您站点域背后的IP已经被解析。</p>
+<p>首先，<code>dns-prefetch</code> 仅对<a href="/zh-CN/docs/Web/HTTP/CORS">跨域</a>域上的 DNS查找有效，因此请避免使用它来指向您的站点或域。这是因为，到浏览器看到提示时，您站点域背后的 IP 已经被解析。</p>
 
-<p>其次，还可以通过使用 <a href="/zh-CN/docs/Web/HTTP/Headers/Link">HTTP链接字段</a>将 <code>dns-prefetch</code>（以及其他资源提示）指定为 <a href="/zh-CN/docs/Web/HTTP/Headers">HTTP标头</a>：</p>
+<p>其次，还可以通过使用 <a href="/zh-CN/docs/Web/HTTP/Headers/Link">HTTP 链接字段</a>将 <code>dns-prefetch</code>（以及其他资源提示）指定为 <a href="/zh-CN/docs/Web/HTTP/Headers">HTTP标头</a>：</p>
 
 <pre class="notranslate">Link: &lt;https://fonts.gstatic.com/&gt;; rel=dns-prefetch</pre>
 
-<p>第三，考虑将 <code>dns-prefetch</code> 与 <code>preconnect(</code>预连接<code>)</code>提示配对。尽管 <code>dns-prefetch</code> 仅执行 DNS查找，但<code>preconnect</code> 会建立与服务器的连接。如果站点是通过HTTPS服务的，则此过程包括DNS解析，建立TCP连接以及执行TLS握手。将两者结合起来可提供进一步减少<a href="/zh-CN/docs/Web/HTTP/CORS">跨域请求</a>的感知延迟的机会。您可以安全地将它们一起使用，如下所示：</p>
+<p>第三，考虑将 <code>dns-prefetch</code> 与 <code>preconnect(</code>预连接<code>)</code>提示配对。尽管 <code>dns-prefetch</code> 仅执行 DNS查找，但<code>preconnect</code> 会建立与服务器的连接。如果站点是通过 HTTPS 服务的，则此过程包括 DNS 解析，建立 TCP 连接以及执行 TLS 握手。将两者结合起来可提供进一步减少<a href="/zh-CN/docs/Web/HTTP/CORS">跨域请求</a>的感知延迟的机会。您可以安全地将它们一起使用，如下所示：</p>
 
 <pre class="brush: html notranslate">&lt;link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin&gt;
 &lt;link rel="dns-prefetch" href="https://fonts.gstatic.com/"&gt;
@@ -52,9 +52,9 @@ translation_of: Web/Performance/dns-prefetch
 <p><strong>Note</strong>: 如果页面需要建立与许多第三方域的连接，则将它们预先连接会适得其反。 <code>preconnect</code> 提示最好仅用于最关键的连接。对于其他的，只需使用 <code>&lt;link rel="dns-prefetch"&gt;</code> 即可节省第一步的时间-DNS查找。</p>
 </div>
 
-<p>配对这些提示的逻辑是因为对dns-prefetch的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。由于这是HTML功能，因此非常容错。如果不支持的浏览器遇到dns-prefetch提示（或任何其他资源提示），则您的网站不会中断。您只是不会获得它提供的好处。</p>
+<p>配对这些提示的逻辑是因为对 dns-prefetch 的支持比对预连接的支持要好。不支持预连接的浏览器仍然可以通过回退到dns-prefetch来获得更多好处。由于这是HTML功能，因此非常容错。如果不支持的浏览器遇到 dns-prefetch 提示（或任何其他资源提示），则您的网站不会中断。您只是不会获得它提供的好处。</p>
 
-<p>一些资源（如字体）以匿名模式加载。在这种情况下，应使用预连接提示设置 <a href="/zh-CN/docs/Web/HTTP/CORS">crossorigin</a> 属性。如果您省略它，则浏览器将仅执行DNS查找。</p>
+<p>一些资源（如字体）以匿名模式加载。在这种情况下，应使用预连接提示设置 <a href="/zh-CN/docs/Web/HTTP/CORS">crossorigin</a> 属性。如果您省略它，则浏览器将仅执行 DNS 查找。</p>
 
 <h2 id="查看更多">查看更多</h2>
 
-- 
cgit v1.2.3-54-g00ecf


From 0293b59e52e1dfc241b684cfb31331bbdc7651a5 Mon Sep 17 00:00:00 2001
From: wangshengdong <31030223+wangshengdong@users.noreply.github.com>
Date: Mon, 14 Mar 2022 16:46:32 +0800
Subject: Fix typo about 'Creating hyperlinks'

Fix issue: #4273
---
 .../learn/html/introduction_to_html/creating_hyperlinks/index.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html
index 3db44af11d..5f982fc095 100644
--- a/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html
+++ b/files/zh-cn/learn/html/introduction_to_html/creating_hyperlinks/index.html
@@ -34,7 +34,7 @@ translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 <p>注意：URL可以指向HTML文件、文本文件、图像、文本文档、视频和音频文件以及可以在网络上保存的任何其他内容。 如果浏览器不知道如何显示或处理文件，它会询问您是否要打开文件（需要选择合适的本地应用来打开或处理文件）或下载文件（以后处理它）。</p>
 </div>
 
-<p><span lang="zh-CN"><span>以 BBC 的主页为例，里面就包含了非常多的连结，各自连到不同新闻、网站的其它地方（导览功能），或者登入/注册页面等等。</span></span></p>
+<p><span lang="zh-CN"><span>以 BBC 的主页为例，里面就包含了非常多的链接，各自连到不同新闻、网站的其它地方（导览功能），或者登入/注册页面等等。</span></span></p>
 
 <p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/17032/updated-bbc-website.png"></p>
 
-- 
cgit v1.2.3-54-g00ecf


From e779d1423dae4c9d26743ed56b241c9481d00a78 Mon Sep 17 00:00:00 2001
From: MDN <actions@users.noreply.github.com>
Date: Tue, 15 Mar 2022 00:13:17 +0000
Subject: [CRON] sync translated content

---
 files/ja/_redirects.txt                            |  1 +
 files/ja/_wikihistory.json                         | 12 ++---
 .../web/api/mediastream/addtrack_event/index.html  | 62 ++++++++++++++++++++++
 files/ja/web/api/mediastream/onaddtrack/index.html | 61 ---------------------
 4 files changed, 69 insertions(+), 67 deletions(-)
 create mode 100644 files/ja/web/api/mediastream/addtrack_event/index.html
 delete mode 100644 files/ja/web/api/mediastream/onaddtrack/index.html

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index d56f10128d..f5b26185a7 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -3190,6 +3190,7 @@
 /ja/docs/Web/API/MediaDevices/ondevicechange	/ja/docs/Web/API/MediaDevices/devicechange_event
 /ja/docs/Web/API/MediaQueryList/onchange	/ja/docs/Web/API/MediaQueryList/change_event
 /ja/docs/Web/API/MediaRecorder_API	/ja/docs/Web/API/MediaStream_Recording_API
+/ja/docs/Web/API/MediaStream/onaddtrack	/ja/docs/Web/API/MediaStream/addtrack_event
 /ja/docs/Web/API/MediaStreamConstraints	/ja/docs/conflicting/Web/API/MediaDevices/getUserMedia
 /ja/docs/Web/API/MouseEvent/which	/ja/docs/Web/API/UIEvent/which
 /ja/docs/Web/API/Navigator.getUserMedia	/ja/docs/Web/API/Navigator/getUserMedia
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 6b0e4a264b..2829a4ea1d 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -18178,6 +18178,12 @@
       "e53e04ac"
     ]
   },
+  "Web/API/MediaStream/addtrack_event": {
+    "modified": "2019-03-18T21:45:17.222Z",
+    "contributors": [
+      "e53e04ac"
+    ]
+  },
   "Web/API/MediaStream/clone": {
     "modified": "2019-03-18T21:45:11.032Z",
     "contributors": [
@@ -18208,12 +18214,6 @@
       "e53e04ac"
     ]
   },
-  "Web/API/MediaStream/onaddtrack": {
-    "modified": "2019-03-18T21:45:17.222Z",
-    "contributors": [
-      "e53e04ac"
-    ]
-  },
   "Web/API/MediaStreamTrack": {
     "modified": "2020-10-15T21:58:36.727Z",
     "contributors": [
diff --git a/files/ja/web/api/mediastream/addtrack_event/index.html b/files/ja/web/api/mediastream/addtrack_event/index.html
new file mode 100644
index 0000000000..2bd4a0887a
--- /dev/null
+++ b/files/ja/web/api/mediastream/addtrack_event/index.html
@@ -0,0 +1,62 @@
+---
+title: MediaStream.onaddtrack
+slug: Web/API/MediaStream/addtrack_event
+translation_of: Web/API/MediaStream/onaddtrack
+original_slug: Web/API/MediaStream/onaddtrack
+---
+<p>{{APIRef("Media Streams API")}}</p>
+
+<p><span class="seoSummary"><strong><code>MediaStream.onaddtrack</code></strong> プロパティは、{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaStream")}}インスタンスで{{event("addtrack")}}イベントが発生した時に呼び出される関数です。このイベントは、メディアストリームへ新しいトラックが追加された時に発生します。</span>このイベントはブラウザがストリームへ新しいトラックを追加した時に発生します。たとえば、{{domxref("RTCPeerConnection")}}が再交渉された時や、{{domxref("HTMLMediaElement.captureStream()")}}を用いてキャプチャーが開始されたストリームが、新しいトラックを取得した時です。</p>
+
+<p>JavaScriptのコードによって明示的にストリームへトラックを追加した場合({{domxref("MediaStream.addTrack", "addTrack()")}}の呼び出しによるもの)は、<code>addtrack</code>イベントは発生しません。</p>
+
+<h2 id="文法">文法</h2>
+
+<pre class="syntaxbox"><em>MediaStream</em>.onaddtrack = <em>eventHandler</em>;
+</pre>
+
+<h3 id="値">値</h3>
+
+<p>どのトラックで{{event("addtrack")}}イベントが発生したのかを表現するための{{domxref("MediaStreamTrackEvent")}}オブジェクトを引数として受け取る関数を設定してください。追加されたトラックは、イベントの{{domxref("MediaStreamTrackEvent.track", "track")}}プロパティで表されます。</p>
+
+<h2 id="例">例</h2>
+
+<p>この例では、新しいトラックがストリームへ追加された時に、トラックのリストへ新しいアイテムを追加しています。新しいアイテムには、トラックの<code>kind</code>(<code>"audio"<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">または</span></font></code><code>"video"</code>)と<code>label</code>が表示されます。</p>
+
+<pre class="brush: js">stream.onaddtrack = function(event) {
+  let trackList = document.getElementById("tracks");
+  let label = document.createElement("li");
+
+  label.innerHTML = event.track.kind + ": " + event.track.label;
+  trackList.appendChild(label);
+};
+</pre>
+
+<h2 id="仕様">仕様</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">仕様</th>
+   <th scope="col">状況</th>
+   <th scope="col">コメント</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('Media Capture', '#event-mediastream-addtrack', 'MediaStream.onaddtrack') }}</td>
+   <td>{{ Spec2('Media Capture') }}</td>
+   <td>初版</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
+
+<p>{{Compat("api.MediaStream.onaddtrack")}}</p>
+
+<h2 id="関連項目">関連項目</h2>
+
+<ul>
+ <li>{{event("addtrack")}}イベントおよび、その型である{{domxref("MediaStreamTrackEvent")}}</li>
+</ul>
diff --git a/files/ja/web/api/mediastream/onaddtrack/index.html b/files/ja/web/api/mediastream/onaddtrack/index.html
deleted file mode 100644
index 414ffbd27f..0000000000
--- a/files/ja/web/api/mediastream/onaddtrack/index.html
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: MediaStream.onaddtrack
-slug: Web/API/MediaStream/onaddtrack
-translation_of: Web/API/MediaStream/onaddtrack
----
-<p>{{APIRef("Media Streams API")}}</p>
-
-<p><span class="seoSummary"><strong><code>MediaStream.onaddtrack</code></strong> プロパティは、{{event("Event_handlers", "event handler")}}であり、{{domxref("MediaStream")}}インスタンスで{{event("addtrack")}}イベントが発生した時に呼び出される関数です。このイベントは、メディアストリームへ新しいトラックが追加された時に発生します。</span>このイベントはブラウザがストリームへ新しいトラックを追加した時に発生します。たとえば、{{domxref("RTCPeerConnection")}}が再交渉された時や、{{domxref("HTMLMediaElement.captureStream()")}}を用いてキャプチャーが開始されたストリームが、新しいトラックを取得した時です。</p>
-
-<p>JavaScriptのコードによって明示的にストリームへトラックを追加した場合({{domxref("MediaStream.addTrack", "addTrack()")}}の呼び出しによるもの)は、<code>addtrack</code>イベントは発生しません。</p>
-
-<h2 id="文法">文法</h2>
-
-<pre class="syntaxbox"><em>MediaStream</em>.onaddtrack = <em>eventHandler</em>;
-</pre>
-
-<h3 id="値">値</h3>
-
-<p>どのトラックで{{event("addtrack")}}イベントが発生したのかを表現するための{{domxref("MediaStreamTrackEvent")}}オブジェクトを引数として受け取る関数を設定してください。追加されたトラックは、イベントの{{domxref("MediaStreamTrackEvent.track", "track")}}プロパティで表されます。</p>
-
-<h2 id="例">例</h2>
-
-<p>この例では、新しいトラックがストリームへ追加された時に、トラックのリストへ新しいアイテムを追加しています。新しいアイテムには、トラックの<code>kind</code>(<code>"audio"<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">または</span></font></code><code>"video"</code>)と<code>label</code>が表示されます。</p>
-
-<pre class="brush: js">stream.onaddtrack = function(event) {
-  let trackList = document.getElementById("tracks");
-  let label = document.createElement("li");
-
-  label.innerHTML = event.track.kind + ": " + event.track.label;
-  trackList.appendChild(label);
-};
-</pre>
-
-<h2 id="仕様">仕様</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">状況</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ SpecName('Media Capture', '#event-mediastream-addtrack', 'MediaStream.onaddtrack') }}</td>
-   <td>{{ Spec2('Media Capture') }}</td>
-   <td>初版</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="ブラウザ互換性">ブラウザ互換性</h2>
-
-<p>{{Compat("api.MediaStream.onaddtrack")}}</p>
-
-<h2 id="関連項目">関連項目</h2>
-
-<ul>
- <li>{{event("addtrack")}}イベントおよび、その型である{{domxref("MediaStreamTrackEvent")}}</li>
-</ul>
-- 
cgit v1.2.3-54-g00ecf


From 9f73c2b06d46db98ca68cee367dbd8764da8a603 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Tue, 8 Mar 2022 23:31:36 +0900
Subject: 2022/02/18 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/@scroll-timeline/index.md | 177 +++++++++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 files/ja/web/css/@scroll-timeline/index.md

diff --git a/files/ja/web/css/@scroll-timeline/index.md b/files/ja/web/css/@scroll-timeline/index.md
new file mode 100644
index 0000000000..15d3aadc9e
--- /dev/null
+++ b/files/ja/web/css/@scroll-timeline/index.md
@@ -0,0 +1,177 @@
+---
+title: "@scroll-timeline"
+slug: Web/CSS/@scroll-timeline
+tags:
+  - アニメーション
+  - スクロール
+  - アットルール
+  - CSS
+  - リファレンス
+browser-compat: css.at-rules.scroll-timeline
+---
+
+{{CSSRef}}
+
+**`@scroll-timeline`** は CSS の[アットルール](/ja/docs/Web/CSS/At-rule)で、分や秒ではなく、スクロールコンテナー内のスクロールの進行状況によって時間値を決定する [`AnimationTimeline`](/ja/docs/Web/API/AnimationTimeline) を定義するものです。アニメーションタイムラインは [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations) と `animation-timeline` プロパティによってと関連付けられます。
+
+## 構文
+
+```css
+@scroll-timeline moveTimeline {
+  source: auto;
+  orientation: vertical;
+  scroll-offsets: 0px, 500px;
+}
+```
+
+### 値
+
+- {{cssxref("custom-ident")}}
+
+  - : スクロールタイムラインを識別する名前です。この名前はスクロールタイムラインを [`animation-timeline`](/ja/docs/Web/CSS/animation-timeline) プロパティで指定する際に使用されます。
+
+- `source`
+
+  - : スクロール可能な要素で、そのスクロール位置がタイムラインの進捗を駆動します。以下のいずれかになります。
+
+    - `auto`
+
+      - : 現在のグローバル [Window オブジェクト](/ja/docs/Web/API/Window) に関連付けられた `Document` です。
+
+    - `selector("id-selector")`
+
+      - : 要素の id で識別されるスクロールコンテナーです。
+
+    - `none`
+      - : スクロールコンテナーが指定されていません。
+
+- `orientation`
+
+  - : スクロールタイムラインの向きです。
+
+    - `auto`
+
+      - : 既定の `vertical` となります。
+
+    - `block`
+
+      - : 書字方向に応じて、ブロック軸に沿ったスクロール位置を使用します。
+
+    - `inline`
+
+      - : 書字方向に応じて、インライン軸に沿ったスクロール位置を使用します。
+
+    - `horizontal`
+
+      - : 書字方向に関係なく、水平スクロール位置を使用します。
+
+    - `vertical`
+      - : 書字方向に関係なく、垂直スクロール位置を使用します。
+
+- `scroll-offsets`
+
+  - : スクロールタイムラインのスクロールオフセットを指定します。
+
+    - `none`
+      - : スクロールオフセットを指定しません。
+    - `<length-percentage>`
+      - : カンマで区切った [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) 値のリストです。
+    - `<element-offset>`
+      - : スクロールオフセットを定める要素の位置です。offset.
+
+## 解説
+
+スクロールタイムラインを使用するには、 `@scroll-timeline` ルールを作成します。これは {{cssxref("animation-timeline")}} プロパティによって、アニメーションのタイムラインをそのタイムライン宣言と照合するために使われます。
+
+それぞれの `@scroll-timeline` ルールには、スクロールタイムラインのソース、方向、スクロールオフセットを決定するためのプロパティが含まれています。
+
+### スクロールオフセット
+
+`scroll-offset` プロパティは、スクロールの中でアニメーションが発生する場所を決定します。これは、 3 つの方法のうちの 1 つで設定することができます。
+
+1. CSS のキーワード `none` を使用します。これは `scroll-offset` が指定されないことを意味します。
+
+2. [`<length-percentage>`](/ja/docs/Web/CSS/length-percentage) の値のカンマ区切りのリストで決定します。それぞれの値は {{cssxref('animation-duration')}} に対して対応付けされます。例えば、 `animation-duration` が `2s` で、スクロールオフセットが `0px, 30px, 100px` に設定されている場合、 1s ではスクロールオフセットは 30px となります。通常、スムーズなスクロールアニメーションのためには、ここで `0px, 100px` のような 2 つの値を使用します。
+
+3. スクロールオフセットを決定する 3 つ目の方法は、要素のオフセットを使用することです。これは、ページ内の要素を指定し、その位置によってスクロールタイムラインを決定し、その要素のどの端を使用するかを決定することを意味します。要素の指定は `selector()` 関数で行い、関数は要素の id を受け取ります。エッジはキーワード `start` または `end` によって決定されます。オプションで `0–1` の間の閾値を指定することができます。これは、 `source` に表示される要素のうち、どの程度の割合で表示されるかを表します。
+
+```css
+@scroll-timeline element-move {
+  source: auto;
+  orientation: vertical;
+  scroll-offsets: selector(#myElement) start 0, selector(#myElement) end 0;
+}
+```
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### 単純な例
+
+この例では、コンテナーが垂直方向にスクロールされると回転する正方形を表示します。スクロールできるように、高さが固定された要素 (`#container`) を作成します。これが `source` 要素です。
+
+このコンテナーの中に、別の要素 (`#square`) を作成します。この要素は正方形のように見えるように適切なスタイルが設定されています。この要素には、 {{cssxref('@keyframes')}} ルールと `animation-name` プロパティを使用して、回転アニメーションを適用しています。
+
+`@scroll-timeline` を `squareTimeline` という名前で作成し、`source` をコンテナー、`orientation` を `vertical` 、`scroll-offset` を `0px` から `300px` （コンテナーの高さ）までに設定しています。そして、`scroll-timeline` プロパティを使用して、これを正方形に適用します。
+
+#### HTML
+
+```html
+<div id="container">
+  <div id="square"></div>
+</div>
+```
+
+#### CSS
+
+```css
+#container {
+  height: 300px;
+}
+
+#square {
+  background-color: deeppink;
+  width: 100px;
+  height: 100px;
+  margin-top: 100px;
+  animation-name: rotateAnimation;
+  animation-duration: 3s;
+  animation-direction: alternate;
+  animation-timeline: squareTimeline;
+}
+
+@scroll-timeline squareTimeline {
+  source: selector("#container");
+  orientation: "vertical";
+  scroll-offsets: 0px, 300px;
+}
+
+@keyframes rotateAnimation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample("Simple_example")}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)
+- [Practical use cases for scroll-linked animations in CSS with scroll timelines](https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/)
-- 
cgit v1.2.3-54-g00ecf


From a1ca0166bd40e265c2b660720d13ef5b3cfecf10 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 9 Mar 2022 00:16:48 +0900
Subject: 2021/08/13 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/css/@property/syntax/index.md | 110 +++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)
 create mode 100644 files/ja/web/css/@property/syntax/index.md

diff --git a/files/ja/web/css/@property/syntax/index.md b/files/ja/web/css/@property/syntax/index.md
new file mode 100644
index 0000000000..7e19e59df1
--- /dev/null
+++ b/files/ja/web/css/@property/syntax/index.md
@@ -0,0 +1,110 @@
+---
+title: syntax
+slug: Web/CSS/@property/syntax
+tags:
+  - CSS
+  - リファレンス
+  - ウェブ
+  - プロパティ
+  - Houdini
+browser-compat: css.at-rules.property.syntax
+translation_of: Web/CSS/@property/syntax
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+**`syntax`** は [CSS](/ja/docs/Web/CSS) の記述子で、 {{cssxref("@property")}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用する上で必要であり、そのプロパティで許可される構文を記述します。
+
+## 構文
+
+以下のものはすべて、有効な構文の文字列です。
+
+```css
+syntax: '<color>'; /* 色を受け入れる */
+
+syntax: '<length> | <percentage>'; /* 長さまたはパーセント値を受け入れるが、両者を組み合わせた calc 式は受け入れない */
+
+syntax: 'small | medium | large'; /* カスタム識別子で設定されたこれらの値の何れかを受け入れる */
+
+syntax: '*'; /* 常に有効なトークン */
+```
+
+## 値
+
+仕様で定義されている対応する構文を持つ文字列。対応する構文は [CSS 型](/ja/docs/Web/CSS/CSS_Types)のサブセットです。これらは一緒に使うこともできますし、いくつかの型を組み合わせて使うこともできます。
+
+- `"<length>"`
+  - : あらゆる有効な {{cssxref("&lt;length&gt;")}} の値です。
+- `"<number>"`
+  - : あらゆる有効な {{cssxref("&lt;number&gt;")}} の値です。
+- `"<percentage>"`
+  - : あらゆる有効な {{cssxref("&lt;percentage&gt;")}} の値です。
+- `"<length-percentage>"`
+  - : あらゆる有効な {{cssxref("&lt;length-percentage&gt;")}} の値です。
+- `"<color>"`
+  - : あらゆる有効な {{cssxref("&lt;color&gt;")}} の値です。
+- `"<image>"`
+  - : あらゆる有効な {{cssxref("&lt;image&gt;")}} の値です。
+- `"<url>"`
+  - : あらゆる有効な {{cssxref("url()","url()")}} の値です。
+- `"<integer>"`
+  - : あらゆる有効な {{cssxref("&lt;integer&gt;")}} の値です。
+- `"<angle>"`
+  - : あらゆる有効な {{cssxref("&lt;angle&gt;")}} の値です。
+- `"<time>"`
+  - : あらゆる有効な {{cssxref("&lt;time&gt;")}} の値です。
+- `"<resolution>"`
+  - : あらゆる有効な {{cssxref("&lt;resolution&gt;")}} の値です。
+- `"<transform-function>"`
+  - : あらゆる有効な {{cssxref("&lt;transform-function&gt;")}} の値です。
+- `"<custom-ident>"`
+  - : あらゆる有効な {{cssxref("&lt;custom-ident&gt;")}} の値です。
+- `"<transform-list>"`
+  - : 有効な {{cssxref("&lt;transform-function&gt;")}} の値のリストです。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+`--my-color` {{cssxref('--*', 'カスタムプロパティ')}}に、 `<color>` の構文を使用して型チェックを追加します。
+
+[CSS](/ja/docs/Web/CSS) の {{cssxref('@property')}} [アットルール](/ja/docs/Web/CSS/At-rule)を使用すると次のようになります。
+
+```css
+@property --my-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: #c0ffee;
+}
+```
+
+[JavaScript](/ja/docs/Web/JavaScript) の {{domxref('CSS.registerProperty')}} を使用すると次のようになります。
+
+```js
+window.CSS.registerProperty({
+  name: '--my-color',
+  syntax: '<color>',
+  inherits: false,
+  initialValue: '#c0ffee',
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API)
+- [CSS 描画 API](/ja/docs/Web/API/CSS_Painting_API)
+- [CSS 型付きオブジェクトモデル](/ja/docs/Web/API/CSS_Typed_OM_API)
+- [CSS Houdini](/ja/docs/Web/Guide/Houdini)
-- 
cgit v1.2.3-54-g00ecf


From 464e20b22c72324bdaebc232aebefbaca9184a19 Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Tue, 15 Mar 2022 02:00:23 -0400
Subject: Add french diagrams (#4616)

---
 .../html_basics/attribut-chat-grincheux.png              | Bin 0 -> 6159 bytes
 .../html_basics/chat-grincheuxl.png                      | Bin 0 -> 5393 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png
 create mode 100644 files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png

diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png b/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png
new file mode 100644
index 0000000000..1c4e68e826
Binary files /dev/null and b/files/fr/learn/getting_started_with_the_web/html_basics/attribut-chat-grincheux.png differ
diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png b/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png
new file mode 100644
index 0000000000..0c854eb81b
Binary files /dev/null and b/files/fr/learn/getting_started_with_the_web/html_basics/chat-grincheuxl.png differ
-- 
cgit v1.2.3-54-g00ecf


From df8056fc0652ecafffac996081b73435acfab849 Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Tue, 15 Mar 2022 07:00:50 +0100
Subject: Remove mozillademo links from CSS (#3642)

* Work - part 1 / N

* background-attachment

* background-blend-mode

* background-image

* background-origin

* Background position

* background-repeat

* background-size

* border-image

* border-image-outset

* border-image-repeat

* border-image-slice

* border-image-width

* clip-path

* content

* cross-fade()

* border-radius-generator

* multiple bckgrnd

* vertical-align

* url

* text-combine-upright

* position_value

* image-rendering

* using css gradients

* font-stretch

* font-stretch - add bcd key

* font-variant-numeric

* font-weight

* image-orientation

* list-style-image

* mask-border

* mask-clip

* mask-composite

* mask-image

* mask-mode

* mask-origin

* mask-position

* mask-size

* object-fit

* object-position

* position

* Various fixes and improvements

* Remove unecessary files

* Remove unecessary files (part 2)

* Missed level 1 fixes

Co-authored-by: cw118 <carolyn94118@gmail.com>
---
 files/fr/web/css/-moz-image-rect/index.md          |  124 +-
 files/fr/web/css/@font-face/unicode-range/index.md |   78 +-
 .../css/_doublecolon_-moz-range-progress/index.md  |   42 +-
 .../web/css/_doublecolon_-moz-range-thumb/index.md |   46 +-
 .../web/css/_doublecolon_-moz-range-track/index.md |   42 +-
 .../index.md                                       |   28 +-
 files/fr/web/css/background-attachment/index.md    |   36 +-
 files/fr/web/css/background-blend-mode/index.md    |   76 +-
 files/fr/web/css/background-image/index.md         |   95 +-
 files/fr/web/css/background-origin/index.md        |   93 +-
 files/fr/web/css/background-position/index.md      |  130 +-
 files/fr/web/css/background-repeat/index.md        |  187 +--
 files/fr/web/css/background-size/index.md          |  181 +--
 files/fr/web/css/background/index.md               |  102 +-
 files/fr/web/css/border-image-outset/index.md      |   99 +-
 files/fr/web/css/border-image-repeat/index.md      |   87 +-
 files/fr/web/css/border-image-slice/index.md       |  167 +-
 files/fr/web/css/border-image-width/index.md       |   82 +-
 files/fr/web/css/border-image/index.md             |  126 +-
 files/fr/web/css/clip-path/index.md                |  175 ++-
 files/fr/web/css/content/index.md                  |  160 +-
 files/fr/web/css/cross-fade()/index.md             |  141 +-
 .../border-radius_generator/index.md               | 1587 +-------------------
 .../using_multiple_backgrounds/index.md            |   33 +-
 .../css/css_images/using_css_gradients/index.md    |  445 +++---
 files/fr/web/css/font-stretch/index.md             |  187 +--
 files/fr/web/css/font-variant-numeric/index.md     |   96 +-
 files/fr/web/css/font-weight/index.md              |  179 +--
 files/fr/web/css/image-orientation/index.md        |  120 +-
 files/fr/web/css/image-rendering/index.md          |  112 +-
 files/fr/web/css/list-style-image/index.md         |   80 +-
 files/fr/web/css/mask-border/index.md              |   79 +-
 files/fr/web/css/mask-clip/index.md                |   92 +-
 files/fr/web/css/mask-composite/index.md           |   68 +-
 files/fr/web/css/mask-image/index.md               |   58 +-
 files/fr/web/css/mask-mode/index.md                |   91 +-
 files/fr/web/css/mask-origin/index.md              |   89 +-
 files/fr/web/css/mask-position/index.md            |   91 +-
 files/fr/web/css/mask-size/index.md                |   85 +-
 files/fr/web/css/object-fit/index.md               |  122 +-
 files/fr/web/css/object-position/index.md          |   62 +-
 files/fr/web/css/position/index.md                 |  182 ++-
 files/fr/web/css/position_value/index.md           |   94 +-
 files/fr/web/css/text-combine-upright/index.md     |   65 +-
 files/fr/web/css/url()/index.md                    |  140 +-
 files/fr/web/css/vertical-align/index.md           |  202 ++-
 46 files changed, 2467 insertions(+), 4189 deletions(-)

diff --git a/files/fr/web/css/-moz-image-rect/index.md b/files/fr/web/css/-moz-image-rect/index.md
index 0a0123b4e3..4ccfdeedeb 100644
--- a/files/fr/web/css/-moz-image-rect/index.md
+++ b/files/fr/web/css/-moz-image-rect/index.md
@@ -1,113 +1,108 @@
 ---
 title: '-moz-image-rect'
 slug: Web/CSS/-moz-image-rect
-tags:
-  - CSS
-  - Fonction
-  - Non-standard
-  - Reference
 translation_of: Web/CSS/-moz-image-rect
+browser-compat: css.types.-moz-image-rect
 ---
 {{Non-standard_header}}{{CSSRef}}
 
-La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à {{cssxref("background-image")}}). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.
-
-Cette propriété fonctionne de façon analogue à {{cssxref("-moz-image-region")}} qui peut être utilisée pour déterminer la partie d'une image utilisée pour {{cssxref("list-style-image")}} qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.
-
-La syntaxe de cette propriété est similaire à la fonction [`rect()`](</fr/docs/Web/CSS/shape#La_fonction_rect()>) qui génère une valeur de type {{cssxref("&lt;shape&gt;")}}. Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.
+La propriété **`-moz-image-rect`** permet d'utiliser une seule partie d'une image pour un arrière-plan (contrairement à [`background-image`](/fr/docs/Web/CSS/background-image)). On peut ainsi utiliser une image qui regroupe plusieurs _sprites_ à différentes fins, ce qui permet de diminuer le nombre de transfert réseau.
 
 ## Syntaxe
 
-    -moz-image-rect({{cssxref("&lt;uri&gt;")}}, top, right, bottom, left);
+```css
+-moz-image-rect(url(), top, right, bottom, left);
+```
 
 ### Valeurs
 
-- {{cssxref("&lt;uri&gt;")}}
+- [`url()`](/fr/docs/Web/CSS/url())
   - : L'URI de l'image dont on veut obtenir une portion.
 - `top`
-  - : La coordonnée du bord haut de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+  - : La coordonnée du bord haut de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche.
 - `right`
-  - : La coordonnée du bord droit de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+  - : La coordonnée du bord droit de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche.
 - `bottom`
-  - : La coordonnée du bord inférieur de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+  - : La coordonnée du bord inférieur de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche.
 - `left`
-  - : La coordonnée du bord gauche de l'image, définie comme un entier ({{cssxref("&lt;integer&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}) à partir du coin supérieur gauche.
+  - : La coordonnée du bord gauche de l'image, définie comme un entier ([`<integer>`](/fr/docs/Web/CSS/integer)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) à partir du coin supérieur gauche.
+
+## Description
 
-### Syntaxe formelle
+Cette propriété fonctionne de façon analogue à [`-moz-image-region`](/fr/docs/Web/CSS/-moz-image-region) qui peut être utilisée pour déterminer la partie d'une image utilisée pour [`list-style-image`](/fr/docs/Web/CSS/list-style-image) qui met en forme les puces d'une liste. Grâce à `-moz-image-rect`, on peut avoir le même fonctionnement pour n'importe quel arrière-plan CSS.
 
-{{CSSSyntax}}
+La syntaxe de cette propriété est similaire à la fonction [`rect()`](/fr/docs/Web/CSS/shape#syntaxe) qui génère une valeur de type [`<shape>`](/fr/docs/Web/CSS/shape). Les quatre valeurs indiquées font chacune référence au coin supérieur gauche de l'image.
 
 ## Exemples
 
-Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments {{HTMLElement("div")}}. Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.
+Dans cet exemple, on charge une image qu'on découpe en quatre zones pour dessiner le logo Firefox dans quatre éléments [`<div>`](/fr/docs/Web/HTML/Element/div). Lorsqu'on clique sur le conteneur, cela fait tourner les images entre les blocs.
+
+### HTML
+
+```html
+<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px; top:0px;">En haut à gauche</div>
+  <div id="box2" style="left:133px; top:0px;">En haut à droite</div>
+  <div id="box3" style="left:0px; top:136px;">En bas à gauche</div>
+  <div id="box4" style="left:133px; top:136px;">En bas à droite</div>
+</div>
+```
 
 ### CSS
 
 ```css
 #container {
-  width:267px;
-  height:272px;
-  top:100px;
-  left:100px;
-  position:absolute;
-  font-size:16px;
-  text-shadow:white 0px 0px 6px;
-  text-align:center;
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
 }
 
 #box1 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  background-image: -moz-image-rect(url(firefox.png), 0%, 50%, 50%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 
 #box2 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  background-image: -moz-image-rect(url(firefox.png), 0%, 100%, 50%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 
 #box3 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  background-image: -moz-image-rect(url(firefox.png), 50%, 50%, 100%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 
 #box4 {
-  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
-  width:133px;
-  height:136px;
-  position:absolute;
+  background-image: -moz-image-rect(url(firefox.png), 50%, 100%, 100%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
 }
 ```
 
-### HTML
-
-```html
-<div id="container" onclick="rotate()">
-  <div id="box1" style="left:0px;top:0px;">Top left</div>
-  <div id="box2" style="left:133px;top:0px;">Top right</div>
-  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
-  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
-</div>
-```
-
 ### JavaScript
 
 ```js
 function rotate() {
   var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
 
-  // Now that we've saved the last one, start rotating
+  // Récupérer le style du dernier élément, puis faire tourner les images
 
   for (var i=1; i<=4; i++) {
     var curId = "box" + i;
 
-    // Shift the background images
-
+    // Décaler les images d'arrière-plan
     var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
     document.getElementById(curId).style.backgroundImage = prevStyle;
     prevStyle = curStyle;
@@ -115,12 +110,21 @@ function rotate() {
 }
 ```
 
-Dans ce script, on utilise la méthode {{domxref("window.getComputedStyle()")}} afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce « défilement », on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de {{cssxref("background-image")}} d'un élément à l'autre lors du clic, on obtient l'effet souhaité.
+Dans ce script, on utilise la méthode [`window.getComputedStyle()`](/fr/docs/Web/API/Window/getComputedStyle) afin de récupérer le style de chaque élément et on le décale à l'élément suivant. On notera qu'avant de commencer ce «&nbsp;défilement&nbsp;», on sauvegarde une version du style de la dernière boîte. En copiant simplement les valeurs de [`background-image`](/fr/docs/Web/CSS/background-image) d'un élément à l'autre lors du clic, on obtient l'effet souhaité.
 
 ### Résultat
 
-{{EmbedLiveSample("Exemples","400","400")}}
+{{EmbedLiveSample("","400","400")}}
+
+## Specifications
+
+Cette propriété ne fait partie d'aucun standard.
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.types.-moz-image-rect")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Les extensions spécifiques à Mozilla pour CSS extensions](/fr/docs/Web/CSS/Mozilla_Extensions)
+- [Le module de spécification CSS sur les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)
diff --git a/files/fr/web/css/@font-face/unicode-range/index.md b/files/fr/web/css/@font-face/unicode-range/index.md
index c034e9d9bf..aefde94540 100644
--- a/files/fr/web/css/@font-face/unicode-range/index.md
+++ b/files/fr/web/css/@font-face/unicode-range/index.md
@@ -1,20 +1,12 @@
 ---
 title: unicode-range
 slug: Web/CSS/@font-face/unicode-range
-tags:
-  - CSS
-  - Descripteur
-  - Experimental
-  - Reference
 translation_of: Web/CSS/@font-face/unicode-range
+browser-compat: css.at-rules.font-face.unicode-range
 ---
 {{cssref}}
 
-Le descripteur **`unicode-range`**, associé à la règle @ {{cssxref("@font-face")}}, définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.
-
-Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.
-
-{{cssinfo}}
+Le descripteur **`unicode-range`**, associé à la règle @ [`@font-face`](/fr/docs/Web/CSS/@font-face), définit l'intervalle de caractères qui peuvent être représentés par cette police pour la page. Si la page n'utilise aucun caractère de cet intervalle, la police n'est pas téléchargée. Si, au contraire, elle utilise au moins un caractère appartenant à cet intervalle, toute la police est téléchargée.
 
 ## Syntaxe
 
@@ -29,31 +21,45 @@ unicode-range: U+0025-00FF, U+4??;   /* plusieurs valeurs             */
 
 ### Valeurs
 
-Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes :
+Une valeur de type `<unicode-range>` peut se présenter de trois façons différentes&nbsp;:
 
-- un seul point de code
+- Un seul point de code
 
-  - Ex : `U+26`
+  - : Par exemple `U+26`
 
-- un intervalle spécifique de points de code
+- Un intervalle spécifique de points de code
 
-  - Ex : `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF`
+  - : Par exemple `U+0025-00FF` indique que l'intervalle contient tous les caractères contenus entre les points de code `U+0025` et `U+00FF`
 
-- un intervalle de substitution indiqué par `?`
+- Un intervalle de substitution indiqué par `?`
 
-  - Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie « tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`).
+  - : Un intervalle de points de code Unicode indiqué par une valeur contenant un point d'interrogation. Ainsi, `U+4??` signifie «&nbsp;tous les caractères contenus dans l'intervalle entre les points de code `U+400` et `U+4FF`&nbsp;».
+
+## Description
+
+Le but de ce descripteur est de segmenter les ressources liées aux polices afin que le navigateur puisse ne télécharger que les polices dont il a besoin pour le texte d'un document. Ainsi, un site disposant de nombreuses traductions pourrait proposer des ressources distinctes pour l'anglais, le grec et le japonais et seules les ressources nécessaires (dont les fichiers de polices) seraient téléchargées.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-Dans cet exemple, on crée un élément HTML {{HTMLElement("div")}} pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette.
+Dans cet exemple, on crée un élément HTML [`<div>`](/fr/docs/Web/HTML/Element/div) pour lequel on veut que l'esperluette soit mise en forme avec une police différente. Pour que le résultat soit apparent, on utilisera une police sans empattement pour le texte (_Helvetica_) et une police avec des empattements (_Times New Roman_) pour l'esperluette.
+
+### HTML
+
+```html
+<div>Me & You = Us</div>
+```
 
 ### CSS
 
-Dans la feuille de style CSS, on définit une règle {{cssxref("@font-face")}} qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément {{HTMLElement("span")}} et appliquer une autre règle sur cet élément mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.
+Dans la feuille de style CSS, on définit une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) qui n'inclue qu'un seul caractère. Cela signifie que seul ce caractère sera affiché avec cette police. On aurait également pu encadrer l'esperluette dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) et appliquer une autre règle sur cet élément, mais on aurait alors eu un balisage plus lourd et une règle spécifique en plus sur la feuille de style.
 
 ```css
 @font-face {
@@ -68,26 +74,26 @@ div {
 }
 ```
 
-### HTML
+### Résultat
 
-```html
-<div>Me & You = Us</div>
-```
-
-### Résultat de référence (image statique)
-
-![](https://mdn.mozillademos.org/files/6043/Refresult.png)
-
-### Résultat du navigateur
-
-{{EmbedLiveSample("Exemples", 500,104)}}
+{{EmbedLiveSample("", 500,104)}}
 
 ## Spécifications
 
-| Spécification                                                                                            | État                             | Commentaires         |
-| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.at-rules.font-face.unicode-range")}}
+{{Compat}}
+
+## Voir aussi
+
+- [`font-display`](/fr/docs/Web/CSS/@font-face/font-display)
+- [`font-family`](/fr/docs/Web/CSS/@font-face/font-family)
+- [`font-stretch`](/fr/docs/Web/CSS/@font-face/font-stretch)
+- [`font-style`](/fr/docs/Web/CSS/@font-face/font-style)
+- [`font-weight`](/fr/docs/Web/CSS/@font-face/font-weight)
+- [`font-variant`](/fr/docs/Web/CSS/@font-face/font-variant)
+- [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings)
+- [`font-variation-settings`](/fr/docs/Web/CSS/@font-face/font-variation-settings)
+- [`src`](/fr/docs/Web/CSS/@font-face/src)
diff --git a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
index 1b7167364e..e74d283b5e 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-progress/index.md
@@ -1,16 +1,12 @@
 ---
 title: '::-moz-range-progress'
 slug: Web/CSS/::-moz-range-progress
-tags:
-  - CSS
-  - Non-standard
-  - Pseudo-element
-  - Reference
 translation_of: Web/CSS/::-moz-range-progress
+browser-compat: css.selectors.-moz-range-progress
 ---
 {{CSSRef}}{{Non-standard_header}}
 
-Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément {{HTMLElement("input")}} de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.
+Le pseudo-élément **`::-moz-range-progress`** représente la portion de la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.
 
 > **Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet.
 
@@ -20,28 +16,28 @@ Le pseudo-élément **`::-moz-range-progress`** représente la portion de la pis
 
 ## Exemples
 
+### HTML
+
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
+
 ### CSS
 
 ```css
 input[type=range]::-moz-range-progress {
-  background-color: green;
+  background-color: green;
   height: 1em;
 }
 ```
 
-### HTML
-
-```html
-<input type="range" min="0" max="100" step="5" value="50"/>
-```
-
 ### Résultat
 
-{{EmbedLiveSample("Exemples", 300, 50)}}
+{{EmbedLiveSample("", 300, 50)}}
 
-Une barre de progression mise en forme avec cette déclaration devrait ressembler à :
+Une barre de progression mise en forme avec cette déclaration devrait ressembler à&nbsp;:
 
-![](https://mdn.mozillademos.org/files/12041/Screen%20Shot%202015-12-04%20at%2020.14.48.png)
+![](screen_shot_2015-12-04_at_20.14.48.png)
 
 ## Spécifications
 
@@ -49,15 +45,15 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.selectors.-moz-range-progress")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`&nbsp;:
 
-  - {{cssxref("::-moz-range-thumb")}}
-  - {{cssxref("::-moz-range-track")}}
+  - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb)
+  - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track)
 
-- {{cssxref("::-ms-fill-upper")}} pris en charge par Internet Explorer et Ege
-- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
-- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
+- [`::-ms-fill-upper`](/fr/docs/Web/CSS/::-ms-fill-upper) pris en charge par Internet Explorer
+- [CSS-Tricks&nbsp;: Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [QuirksMode&nbsp;: Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
diff --git a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
index d1a2f98238..b5dd9b7d45 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-thumb/index.md
@@ -1,18 +1,14 @@
 ---
 title: '::-moz-range-thumb'
 slug: Web/CSS/::-moz-range-thumb
-tags:
-  - CSS
-  - Non-standard
-  - Pseudo-element
-  - Reference
+browser-compat: css.selectors.-moz-range-thumb
 translation_of: Web/CSS/::-moz-range-thumb
 ---
 {{CSSRef}}{{Non-standard_header}}
 
-Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément {{HTMLElement("input")}} de type `range` et qui permet de modifier la valeur numérique associée.
+Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se déplace le long de la piste dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range` et qui permet de modifier la valeur numérique associée.
 
-> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que  `<input type="range">` n'aura aucun effet.
+> **Note :** Utiliser `::-moz-range-thumb` avec un autre élément que `<input type="range">` n'aura aucun effet.
 
 ## Syntaxe
 
@@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-thumb`** représente le curseur qui se dépl
 
 ## Exemples
 
+### HTML
+
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
+
 ### CSS
 
 ```css
@@ -28,19 +30,13 @@ input[type=range]::-moz-range-thumb {
 }
 ```
 
-### HTML
-
-```html
-<input type="range" min="0" max="100" step="5" value="50"/>
-```
-
 ### Résultat
 
-{{EmbedLiveSample("Exemples", 300, 50)}}
+{{EmbedLiveSample("", 300, 50)}}
 
-Une barre de progression mise en forme avec ces règles devrait ressembler à :
+Une barre de progression mise en forme avec ces règles devrait ressembler à&nbsp;:
 
-![The thumb of the <input type=right> styled in green](https://mdn.mozillademos.org/files/12027/Screen%20Shot%202015-12-04%20at%2013.30.08.png)
+![Un élément <input type=range> avec un curseur vert](screen_shot_2015-12-04_at_13.30.08.png)
 
 ## Spécifications
 
@@ -48,19 +44,19 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.selectors.-moz-range-thumb")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`&nbsp;:
 
-  - {{cssxref("::-moz-range-track")}}
-  - {{cssxref("::-moz-range-progress")}}
+  - [`::-moz-range-track`](/fr/docs/Web/CSS/::-moz-range-track)
+  - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress)
 
-- Les pseudo-éléments utilisés par les autres navigateurs :
+- Les pseudo-éléments utilisés par les autres navigateurs&nbsp;:
 
-  - {{cssxref("::-webkit-slider-thumb")}} pour WebKit/Blink (Safari, Chrome et Opera).
-  - {{cssxref("::-ms-thumb")}} pour Internet Explorer/Edge.
+  - [`::-webkit-slider-thumb`](/fr/docs/Web/CSS/::-webkit-slider-thumb) pour WebKit/Blink (Safari, Chrome et Opera).
+  - [`::-ms-thumb`](/fr/docs/Web/CSS/::-ms-thumb) pour Internet Explorer/Edge.
 
-- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
-- [QuirksMode : Mettre en forme les pistes et curseurs](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
+- [CSS-Tricks&nbsp;: Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [QuirksMode&nbsp;: Mettre en forme les pistes et curseurs (en anglais)](https://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
diff --git a/files/fr/web/css/_doublecolon_-moz-range-track/index.md b/files/fr/web/css/_doublecolon_-moz-range-track/index.md
index 440c9bde5e..d529f072d6 100644
--- a/files/fr/web/css/_doublecolon_-moz-range-track/index.md
+++ b/files/fr/web/css/_doublecolon_-moz-range-track/index.md
@@ -1,16 +1,12 @@
 ---
 title: '::-moz-range-track'
 slug: Web/CSS/::-moz-range-track
-tags:
-  - CSS
-  - Non-standard
-  - Pseudo-element
-  - Reference
+browser-compat: css.selectors.-moz-range-track
 translation_of: Web/CSS/::-moz-range-track
 ---
 {{CSSRef}}{{Non-standard_header}}
 
-Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifique à Mozilla et représente la piste d'un élément {{HTMLElement("input")}} de type `range`.
+Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spécifique à Mozilla et représente la piste d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`.
 
 > **Note :** `::-moz-range-track` n'aura aucun effet s'il est utilisé sur autre chose qu'un élément `<input type="range">`.
 
@@ -20,6 +16,12 @@ Le pseudo-élément **`::-moz-range-track`** est un pseudo-élément spsécifiqu
 
 ## Exemples
 
+### HTML
+
+```html
+<input type="range" min="0" max="100" step="5" value="50"/>
+```
+
 ### CSS
 
 ```css
@@ -28,19 +30,13 @@ input[type=range]::-moz-range-track {
 }
 ```
 
-### HTML
-
-```html
-<input type="range" min="0" max="100" step="5" value="50"/>
-```
-
 ### Résultat
 
-{{EmbedLiveSample("Exemples", 300, 50)}}
+{{EmbedLiveSample("", 300, 50)}}
 
-Une barre de progression mise en forme de cette façon devrait ressembler à :
+Une barre de progression mise en forme de cette façon devrait ressembler à&nbsp;:
 
-![A range with the track green.](https://mdn.mozillademos.org/files/11999/Screen%20Shot%202015-12-04%20at%2010.14.34.png)
+![Un intervalle avec une piste verte.](screen_shot_2015-12-04_at_10.14.34.png)
 
 ## Spécifications
 
@@ -48,18 +44,18 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à Gecko/Mozilla
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.selectors.-moz-range-track")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("input")}} de type `range` :
+- Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `range`&nbsp;:
 
-  - {{cssxref("::-moz-range-thumb")}} qui représente le curseur qui se déplace le long de la piste.
-  - {{cssxref("::-moz-range-progress")}} qui représente la partie inférieure de la piste (ce qui est déjà « couvert »).
+  - [`::-moz-range-thumb`](/fr/docs/Web/CSS/::-moz-range-thumb) qui représente le curseur qui se déplace le long de la piste.
+  - [`::-moz-range-progress`](/fr/docs/Web/CSS/::-moz-range-progress) qui représente la partie inférieure de la piste (ce qui est déjà «&nbsp;couvert&nbsp;»).
 
-- Les pseudo-éléments utilisés par les autres navigateurs :
+- Les pseudo-éléments utilisés par les autres navigateurs&nbsp;:
 
-  - {{cssxref("::-webkit-slider-runnable-track")}} pour WebKit/Blink (Safari, Chrome et Opera).
-  - {{cssxref("::-ms-track")}} pour Internet Explorer/Edge.
+  - [`::-webkit-slider-runnable-track`](/fr/docs/Web/CSS/::-webkit-slider-runnable-track) pour WebKit/Blink (Safari, Chrome et Opera).
+  - [`::-ms-track`](/fr/docs/Web/CSS/::-ms-track) pour Internet Explorer/Edge.
 
-- [CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [CSS-Tricks&nbsp;: Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
index ac3b173d3c..ca9616fa6a 100644
--- a/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
+++ b/files/fr/web/css/_doublecolon_-webkit-progress-inner-element/index.md
@@ -1,18 +1,14 @@
 ---
 title: '::-webkit-progress-inner-element'
 slug: Web/CSS/::-webkit-progress-inner-element
-tags:
-  - CSS
-  - Non-standard
-  - Pseudo-element
-  - Reference
+browser-compat: css.selectors.-webkit-progress-inner-element
 translation_of: Web/CSS/::-webkit-progress-inner-element
 ---
 {{CSSRef}}{{Non-standard_header}}
 
-Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément {{HTMLElement("progress")}}. C'est un pseudo-élément parent du pseudo-élément {{cssxref("::-webkit-progress-bar")}}.
+Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément [`<progress>`](/fr/docs/Web/HTML/Element/Progress). C'est un pseudo-élément parent du pseudo-élément [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar).
 
-> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que {{cssxref("-webkit-appearance")}} vaille `none` sur l'élément `<progress>`.
+> **Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que [`-webkit-appearance`](/fr/docs/Web/CSS/-webkit-appearance) vaille `none` sur l'élément `<progress>`.
 
 ## Exemples
 
@@ -36,11 +32,11 @@ progress {
 
 ### Résultat
 
-{{EmbedLiveSample("Exemples", 200, 50)}}
+{{EmbedLiveSample("", 200, 50)}}
 
-Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :
+Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon&nbsp;:
 
-![](https://mdn.mozillademos.org/files/13492/-webkit-progress-inner-element%20example.png)
+![](-webkit-progress-inner-element_example.png)
 
 ## Spécifications
 
@@ -48,14 +44,14 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.selectors.-webkit-progress-inner-element")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments {{HTMLElement("progress")}}
+- Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress)
 
-  - {{cssxref("::-webkit-progress-bar")}}
-  - {{cssxref("::-webkit-progress-value")}}
+  - [`::-webkit-progress-bar`](/fr/docs/Web/CSS/::-webkit-progress-bar)
+  - [`::-webkit-progress-value`](/fr/docs/Web/CSS/::-webkit-progress-value)
 
-- {{cssxref("::-moz-progress-bar")}}
-- {{cssxref("::-ms-fill")}}
+- [`::-moz-progress-bar`](/fr/docs/Web/CSS/::-moz-progress-bar)
+- [`::-ms-fill`](/fr/docs/Web/CSS/::-ms-fill)
diff --git a/files/fr/web/css/background-attachment/index.md b/files/fr/web/css/background-attachment/index.md
index c4074f7289..5ec59fa33a 100644
--- a/files/fr/web/css/background-attachment/index.md
+++ b/files/fr/web/css/background-attachment/index.md
@@ -1,15 +1,12 @@
 ---
 title: background-attachment
 slug: Web/CSS/background-attachment
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-attachment
 translation_of: Web/CSS/background-attachment
 ---
 {{CSSRef}}
 
-La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (_viewport_) ou si celle-ci défile avec le bloc englobant.
+La propriété **`background-attachment`** définit si la position de l'image d'arrière-plan est fixée dans la zone d'affichage (<i lang="en">viewport</i>) ou si celle-ci défile avec le bloc englobant.
 
 {{EmbedInteractiveExample("pages/css/background-attachment.html")}}
 
@@ -24,6 +21,7 @@ background-attachment: local;
 /* Valeurs globales */
 background-attachment: inherit;
 background-attachment: initial;
+background-attachment: revert;
 background-attachment: unset;
 ```
 
@@ -32,13 +30,17 @@ La propriété `background-attachment` est définie avec un des mots-clés de la
 ### Valeurs
 
 - `fixed`
-  - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (_viewport_). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec {{cssxref("background-clip", "background-clip: text", "#text")}}).
+  - : Ce mot-clé indique que l'arrière-plan est fixe par rapport à la zone d'affichage (<i lang="en">viewport</i>). Ainsi, même si l'élément dispose d'outils de défilement, l'arrière-plan ciblé ne se déplacera pas avec l'élément (cette valeur n'est pas compatible avec [`background-clip: text`](/fr/docs/Web/CSS/background-clip)).
 - `local`
   - : Ce mot-clé indique que l'arrière-plan se déplace avec le contenu de l'élément associé. Ainsi, si l'élément défile, l'arrière-plan défilera avec. Les zones de positionnement et de dessin de l'arrière-plan sont relatives à la zone de l'élément plutôt qu'au cadre extérieur.
 - `scroll`
   - : Ce mot-clé indique que l'arrière-plan est fixé par rapport au contenu de l'élément (il ne défile pas avec) mais est rattaché à la bordure de l'élément.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -50,7 +52,7 @@ La propriété `background-attachment` est définie avec un des mots-clés de la
 
 ```css
 p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-image: url("starsolid.gif");
   background-attachment: fixed;
 }
 ```
@@ -68,7 +70,7 @@ p {
 
 #### Résultat
 
-{{EmbedLiveSample("Exemple_simple")}}
+{{EmbedLiveSample("")}}
 
 ### Gestion de plusieurs arrière-plans
 
@@ -78,7 +80,7 @@ On peut utiliser cette propriété lorsqu'on travaille avec plusieurs images en
 
 ```css
 p {
-  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-image: url("starsolid.gif"), url("startransparent.gif");
   background-attachment: fixed, scroll;
   background-repeat: no-repeat, repeat-y;
 }
@@ -106,22 +108,16 @@ p {
 
 #### Résultat
 
-{{EmbedLiveSample("Gestion_de_plusieurs_arrière-plans")}}
+{{EmbedLiveSample("")}}
 
 ## Spécifications
 
-| Spécification                                                                                                                | État                                     | Commentaires                                                                        |
-| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}         | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrière-plans et la valeur `local`. |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                  |
-| {{SpecName('CSS1', '#background-attachment', 'background-attachment')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-attachment")}}
+{{Compat}}
 
 ## Voir aussi
 
-- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans "CSS/Multiple backgrounds")
+- [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/background-blend-mode/index.md b/files/fr/web/css/background-blend-mode/index.md
index 4f642b32e5..7dfca3d56f 100644
--- a/files/fr/web/css/background-blend-mode/index.md
+++ b/files/fr/web/css/background-blend-mode/index.md
@@ -1,10 +1,7 @@
 ---
 title: background-blend-mode
 slug: Web/CSS/background-blend-mode
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-blend-mode
 translation_of: Web/CSS/background-blend-mode
 ---
 {{CSSRef}}
@@ -13,7 +10,7 @@ La propriété CSS **`background-blend-mode`** définit la façon dont les image
 
 {{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
 
-Les modes de fusions (_blending modes_) doivent être définis dans le même ordre que les images sont définies avec {{cssxref("background-image")}}. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.
+Les modes de fusions (<i lang="en">blending modes</i>) doivent être définis dans le même ordre que les images sont définies avec [`background-image`](/fr/docs/Web/CSS/background-image). Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.
 
 ## Syntaxe
 
@@ -27,17 +24,22 @@ background-blend-mode: darken, luminosity;
 /* Valeurs globales */
 background-blend-mode: initial;
 background-blend-mode: inherit;
+background-blend-mode: revert;
 background-blend-mode: unset;
 ```
 
 ### Valeurs
 
 - `<blend-mode>`
-  - : Une valeur décrivant un mode de fusion (type {{cssxref("&lt;blend-mode&gt;")}}) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
+  - : Une valeur décrivant un mode de fusion (type [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode)) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.
 
-### Syntaxe formelle
+## Définition formelle
 
-    Syntaxe Formelle: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+{{cssinfo}}
+
+## Syntaxe formelle
+
+{{csssyntax}}
 
 ## Exemples
 
@@ -45,10 +47,10 @@ background-blend-mode: unset;
 
 ```css
 #div {
-    width: 300px;
-    height: 300px;
-    background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
-    background-blend-mode: screen;
+  width: 300px;
+  height: 300px;
+  background: url('br.png'),url('tr.png');
+  background-blend-mode: screen;
 }
 ```
 
@@ -58,22 +60,22 @@ background-blend-mode: unset;
 <div id="div"></div>
 
 <select id="select">
-    <option>normal</option>
-    <option>multiply</option>
-    <option selected>screen</option>
-    <option>overlay</option>
-    <option>darken</option>
-    <option>lighten</option>
-    <option>color-dodge</option>
-    <option>color-burn</option>
-    <option>hard-light</option>
-    <option>soft-light</option>
-    <option>difference</option>
-    <option>exclusion</option>
-    <option>hue</option>
-    <option>saturation</option>
-    <option>color</option>
-    <option>luminosity</option>
+  <option>normal</option>
+  <option>multiply</option>
+  <option selected>screen</option>
+  <option>overlay</option>
+  <option>darken</option>
+  <option>lighten</option>
+  <option>color-dodge</option>
+  <option>color-burn</option>
+  <option>hard-light</option>
+  <option>soft-light</option>
+  <option>difference</option>
+  <option>exclusion</option>
+  <option>hue</option>
+  <option>saturation</option>
+  <option>color</option>
+  <option>luminosity</option>
 </select>
 ```
 
@@ -81,26 +83,24 @@ background-blend-mode: unset;
 
 ```js
 document.getElementById("select").onchange = function(event) {
-    document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
+  document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML;
 }
 console.log(document.getElementById('div'));
 ```
 
-{{EmbedLiveSample('Exemples', "330", "330")}}
+### Résultat
 
-## Spécifications
+{{EmbedLiveSample('', "330", "350")}}
 
-| Spécification                                                                                            | État                             | Commentaires         |
-| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}} | {{Spec2('Compositing')}} | Définition initiale. |
+## Spécifications
 
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-blend-mode")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("&lt;blend-mode&gt;")}}
-- {{cssxref("mix-blend-mode")}}
+- [`<blend-mode>`](/fr/docs/Web/CSS/blend-mode)
+- [`mix-blend-mode`](/fr/docs/Web/CSS/mix-blend-mode)
diff --git a/files/fr/web/css/background-image/index.md b/files/fr/web/css/background-image/index.md
index 6cf6e5316b..b13cf365e2 100644
--- a/files/fr/web/css/background-image/index.md
+++ b/files/fr/web/css/background-image/index.md
@@ -1,10 +1,7 @@
 ---
 title: background-image
 slug: Web/CSS/background-image
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-image
 translation_of: Web/CSS/background-image
 ---
 {{CSSRef}}
@@ -15,11 +12,11 @@ La propriété **`background-image`** permet de définir une ou plusieurs images
 
 Les images sont dessinées les unes au-dessus des autres. La première image indiquée est dessinée comme étant la plus proche de l'utilisateur.
 
-Les bordures de l'élément sont dessinés par-dessus l'arrière-plan et la couleur {{cssxref("background-color")}} est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.
+Les bordures de l'élément sont dessinées par-dessus l'arrière-plan et la couleur [`background-color`](/fr/docs/Web/CSS/background-color) est dessinée sous l'arrière-plan. La position et les limites de chaque image sont gérées grâce aux propriétés [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin).
 
-Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiquée), les navigateurs considèreront la valeur comme `none`.
+Si une image donnée ne peut pas être chargée (par exemple lorsqu'il est impossible de charger un fichier via l'URI indiqué), les navigateurs considèreront la valeur comme `none`.
 
-> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via {{cssxref("background-color")}} au cas où les images ne peuvent être chargées.
+> **Note :** Même si les images sont opaques et que les couleurs ne seront pas affichées de façon normale, les développeurs doivent toujours définir une couleur d'arrière-plan via [`background-color`](/fr/docs/Web/CSS/background-color) au cas où les images ne peuvent être chargées.
 
 ## Syntaxe
 
@@ -30,37 +27,45 @@ background-image: url('https://example.com/bck.png');
 /* Plusieurs valeurs */
 background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');
 
+background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('catfront.png');
+
 /* Valeur avec un mot-clé */
 background-image: none;
 
 /* Valeurs globales */
 background-image: inherit;
 background-image: initial;
+background-image: revert;
 background-image: unset;
 ```
 
-Chaque image d'arrière-plan peut être définie avec le mot-clé `none` ou avec une valeur de type `<image>`. Pour indiquer plusieurs images d'arrière-plan, on listera les différentes valeurs les unes à la suite des autres et séparées par des virgules :
-
-```css
-background-image:
-  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
-  url("https://mdn.mozillademos.org/files/7693/catfront.png");
-```
-
 ### Valeurs
 
 - `none`
   - : Un mot-clé qui indique qu'aucune image ne doit être utilisée comme arrière-plan.
 - `<image>`
-  - : Une valeur {{cssxref("&lt;image&gt;")}} qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules. Lorsque c'est une URL qui est utilisée, on peut aussi bien utiliser des simples quotes (`'texte_avec_double_quotes_"_'`) ou des doubles quotes (`"texte_avec_simple_quote_'_"`) pour encadrer le texte qui forme l'URL.
+  - : Une valeur [`<image>`](/fr/docs/Web/CSS/image) qui indique l'image à afficher. On peut avoir plusieurs images en arrière-plan en séparant les valeurs par des virgules.
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
 
-### Syntaxe formelle
+- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères de succès 1.1.1 — Comprendre les règles du WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-On voit ici l'effet obtenu avec plusieurs images : l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.
+On voit ici l'effet obtenu avec plusieurs images&nbsp;: l'étoile est légèrement transparente et se superpose par-dessus l'image du chat.
 
 ### HTML
 
@@ -90,53 +95,45 @@ p {
 }
 
 div {
-  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+  background-image: url("mdn_logo_only_color.png");
 }
 
 .catsandstars {
-  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
-                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-image:  url("startransparent.gif"),
+                     url("catfront.png");
   background-color: transparent;
 }
 ```
 
 ### Résultat
 
-{{EmbedLiveSample('Exemples')}}
-
-## Accessibilité
-
-Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
-
-- [Comprendre les règles du WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
-- [Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+{{EmbedLiveSample('')}}
 
 ## Spécifications
 
-| Spécification                                                                                                | État                                     | Commentaires                                                                                                                  |
-| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}             | {{Spec2('CSS3 Backgrounds')}} | La propriété a été étendue pour gérer plusieurs arrières-plans et le type de donnée CSS {{cssxref("&lt;image&gt;")}}. |
-| {{SpecName('CSS2.2', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.2')}}                 |                                                                                                                               |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}} | {{Spec2('CSS2.1')}}                 | La gestion des dimensions intrinsèques (lorsqu'elles sont absentes ou présentes) est décrite.                                 |
-| {{SpecName('CSS1', '#background-image', 'background-image')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                          |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-image")}}
+{{Compat}}
 
 ## Voir aussi
 
 - [Implémenter des sprites en CSS](/fr/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
-- {{HTMLElement("img")}},
-- {{cssxref("&lt;image&gt;")}},
-- {{cssxref("&lt;gradient&gt;")}},
-- {{cssxref("linear-gradient")}},
-- {{cssxref("radial-gradient")}},
-- {{cssxref("repeating-linear-gradient")}},
-- {{cssxref("repeating-radial-gradient")}},
-- {{cssxref("element()")}},
-- {{cssxref("_image", "image()")}},
-- {{cssxref("image-set")}},
-- {{cssxref("url","url()")}}
+- L'élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img),
+- Les types de données CSS relatifs aux images&nbsp;:
+  - [`<image>`](/fr/docs/Web/CSS/image)
+  - [`<gradient>`](/fr/docs/Web/CSS/gradient)
+- Les fonctions CSS relatives aux images&nbsp;:
+  - [`cross-fade()`](/fr/docs/Web/CSS/cross-fade())
+  - [`element()`](/fr/docs/Web/CSS/element())
+  - [`image()`](/fr/docs/Web/CSS/image/image())
+  - [`image-set()`](/fr/docs/Web/CSS/image/image-set())
+  - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient())
+  - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient())
+  - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient())
+  - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient())
+  - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient())
+  - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()),
+  - [`paint()`](/fr/docs/Web/CSS/image/paint())
+  - [`url()`](/fr/docs/Web/CSS/url())
diff --git a/files/fr/web/css/background-origin/index.md b/files/fr/web/css/background-origin/index.md
index e9a1286b35..379bea080b 100644
--- a/files/fr/web/css/background-origin/index.md
+++ b/files/fr/web/css/background-origin/index.md
@@ -1,21 +1,18 @@
 ---
 title: background-origin
 slug: Web/CSS/background-origin
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-image
 translation_of: Web/CSS/background-origin
 ---
 {{CSSRef}}
 
-La propriété **`background-origin`** détermine l'origine de l'arrière-plan {{cssxref("background-image")}} à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (_padding_).
+La propriété **`background-origin`** détermine l'origine de l'arrière-plan [`background-image`](/fr/docs/Web/CSS/background-image) à partir de la bordure, à l'intérieur de la bordure ou à l'intérieur de la zone de remplissage (<i lang="en">padding</i>).
 
 {{EmbedInteractiveExample("pages/css/background-origin.html")}}
 
-Attention, `background-origin` est ignorée lorsque {{cssxref("background-attachment")}} vaut `fixed`.
+Attention, `background-origin` est ignorée lorsque [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`.
 
-> **Note :** Cette propriété est rattachée à la propriété raccourcie {{cssxref("background")}}. Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
+> **Note :** Cette propriété est rattachée à la propriété raccourcie [`background`](/fr/docs/Web/CSS/background). Aussi, si on a une déclaration `background-origin` avant la propriété raccourcie et que cette dernière ne définit pas la valeur de l'origine, ce sera la valeur initiale par défaut qui sera prise en compte pour `background-origin`.
 
 ## Syntaxe
 
@@ -28,6 +25,7 @@ background-origin: content-box;
 /* Valeurs globales */
 background-origin: inherit;
 background-origin: initial;
+background-origin: revert;
 background-origin: unset;
 ```
 
@@ -36,57 +34,88 @@ background-origin: unset;
 - `border-box`
   - : L'arrière-plan est positionné relativement à la boîte de bordure.
 - `padding-box`
-  - : L'arrière-plan est positionné relativement à la boîte de remplissage (_padding_).
+  - : L'arrière-plan est positionné relativement à la boîte de remplissage (<i lang="en">padding</i>).
 - `content-box`
   - : L'arrière-plan est positionné relativement à la boîte de contenu.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Définir différentes origines
 
 ```css
-div {
-  width: 200px;
-  height: 100px;
+.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+```
+
+```css
+#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
 }
+```
 
-.exemple {
-  border: 10px double;
-  padding: 10px;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-color: palegreen;
-  background-position: 0px 40px;
-  background-origin: content-box;
-  background-repeat: no-repeat;
+```css
+div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applique deux images en arrière-plan */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
 }
 ```
 
-### HTML
+### Utiliser deux dégradés
+
+Dans cet exemple, la boîte possède une bordure épaisse en pointillés. Le premier dégradé utilise `padding-box` pour `background-origin` et l'arrière-plan s'inscrit donc à l'intérieur de la bordure. Le second dégradé utilise `content-box` et apparaît donc uniquement derrière le contenu.
+
+#### HTML
 
 ```html
-<div class="exemple"></div>
+<div class="box">Coucou !</div>
+```
+
+#### CSS
+
+```css
+.box {
+  margin: 10px 0;
+  color: #fff;
+  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%),
+              radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%);
+  border: 20px dashed black;
+  padding: 20px;
+  width: 400px;
+  background-origin: padding-box, content-box;
+  background-repeat: no-repeat;
+}
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample("Exemples","300","200")}}
+{{EmbedLiveSample("","300","200")}}
 
 ## Spécifications
 
-| Spécification                                                                                            | État                                     | Commentaires         |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-origin")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("background-clip")}}
+- [`background-clip`](/fr/docs/Web/CSS/background-clip)
diff --git a/files/fr/web/css/background-position/index.md b/files/fr/web/css/background-position/index.md
index e32881dfac..9d733f0bb9 100644
--- a/files/fr/web/css/background-position/index.md
+++ b/files/fr/web/css/background-position/index.md
@@ -1,15 +1,12 @@
 ---
 title: background-position
 slug: Web/CSS/background-position
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-position
 translation_of: Web/CSS/background-position
 ---
 {{CSSRef}}
 
-La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par {{cssxref("background-origin")}}, pour chaque image d'arrière-plan.
+La propriété **`background-position`** permet de définir la position initiale, relative à l'origine définie par [`background-origin`](/fr/docs/Web/CSS/background-origin), pour chaque image d'arrière-plan.
 
 {{EmbedInteractiveExample("pages/css/background-position.html")}}
 
@@ -45,45 +42,84 @@ background-position: top right 10px;
 /* Valeurs globales */
 background-position: inherit;
 background-position: initial;
+background-position: revert;
 background-position: unset;
 ```
 
-La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs [`<position>`](#<position>), séparées par des virgules.
+La propriété `background-position` peut être définie grâce à une ou plusieurs valeurs `<position>`, séparées par des virgules.
 
 ### Valeurs
 
 - `<position>`
 
-  - : Une valeur {{cssxref("&lt;position&gt;")}}. Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs.La première correspond à la position horizontale et la seconde à la position verticale.
+  - : Une valeur [`<position>`](/fr/docs/Web/CSS/position). Une position définit un couple de coordonnées XY qui permet de placer un objet par rapport aux bords de la boîte d'un élément. Une position peut être définie avec une ou deux valeurs. La première correspond à la position horizontale et la seconde à la position verticale.
 
-    **Définition avec une valeur :** la valeur peut être :
+    **Définition avec une valeur&nbsp;:** la valeur peut être&nbsp;:
 
     - Le mot-clé `center` qui centre l'image.
     - Un mot-clé parmi `top`, `left`, `bottom`, `right`. Ce mot-clé indique le bord par rapport auquel placer l'élément. Pour l'autre dimension, on utilisera la moitié de la boîte (50%).
-    - Une longeur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
+    - Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Cette valeur définit l'abscisse du point par rapport au bord gauche. L'ordonnée est fixée à 50%.
 
-    **Définition avec deux valeurs :** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être :
+    **Définition avec deux valeurs&nbsp;:** la première valeur définit l'abscisse (la coordonnée horizontale X) et la seconde définit l'ordonnée (la coordonnée verticale Y). Chaque valeur peut être&nbsp;:
 
     - Un des mots-clés parmi `top`, `left`, `bottom`, `right`. Si `left` ou `right` est utilisé, la valeur définit l'abscisse et l'autre définira l'ordonnée. Si `top` ou `bottom` est indiqué, cette valeur définira l'ordonnée et l'autre valeur définira X.
-    - Une valeur de longueur ({{cssxref("&lt;length&gt;")}}) ou un pourcentage ({{cssxref("&lt;percentage&gt;")}}). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`,  cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
+    - Une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si l'autre valeur vaut `left` ou `right`, cette valeur définira l'ordonnée par rapport au bord haut. Si l'autre valeur est `top` ou `bottom`, cette valeur définira l'abscisse relativement au bord gauche. Si les deux valeurs sont des longueurs ou des pourcentages, la première définira l'abscisse et la seconde l'ordonnée.
 
-    On notera que :
+    > **Note :** Si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`. Si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`. Autrement dit `top top` ou `left right` seront considérées comme invalides.
 
-    - si une valeur est `top` ou `bottom`, la seconde ne peut pas être `top` ou `bottom`.
-    - si une valeur est `left` ou `right`, la seconde ne peut pas être `left` ou `right`.
+    **Définition avec 3 valeurs&nbsp;:** Deux valeurs sont des mots-clés et la troisième est le décalage appliqué à la valeur qui précède.
 
-    Autrement dit "`top top"` ou "`left right`" seront considérées comme invalides.
+    - La première valeur est l'un des mots-clés `top`, `left`, `bottom`, `right`, ou `center`. Si `left` ou `right` sont fournis, cela définit la position sur l'axe horizontale et si `top` or `bottom` sont fournis, cela définit la position sur l'axe vertical et l'autre mot-clé définit la position sur l'axe horizontal.
+    - La longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou le pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)), s'il est utilisé en deuxième valeur, sera considéré comme le décalage à appliquer pour la première valeur. S'il s'agit de la troisième valeur, ce sera le décalage à appliquer à la deuxième valeur.
+    - Il n'y a qu'une seule longueur ou qu'un seul pourcentage attendu pour définir le décalage de la valeur précédente. Toute combinaison d'un mot-clé avec deux longueurs ou deux pourcentages sera considérée comme invalide.
 
-    **À propos des pourcentages :** lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.
+    **Définition avec 4 valeurs&nbsp;:** La première et la troisième valeur sont des mots-clés pour la position horizontale d'une part et verticale d'autre part. La deuxième et la quatrième valeur sont des décalages pour les valeurs qui les précèdent&nbsp;:
 
-    Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante :
+    - La première et la troisième valeur utilisent l'un des mots-clés suivant&nbsp;: `top`, `left`, `bottom`, `right`. Si `left` ou `right` sont utilisés, cela définit la position horizontale. Si `top` ou `bottom` sont utilisés, cela définit la position verticale et l'autre mot-clé définit alors la valeur horizontale.
+    - La deuxième et la quatrième valeur sont des longueurs ([`<length>`](/fr/docs/Web/CSS/length)) ou des pourcentages ([`<percentage>`](/fr/docs/Web/CSS/percentage)). La deuxième valeur est le décalage pour le premier mot-clé tandis que la quatrième valeur est le décalage correspondant au deuxième mot-clé.
 
-    `(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)`
-    `(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)`.
+### À propos des pourcentages
 
-    On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.
+Lorsqu'on exprime un décalage en pourcentage, ce dernier est relatif au conteneur. Ainsi, une valeur de 0% indiquera que le côté gauche (ou haut) du bord de l'image est aligné avec le bord gauche (ou haut) du conteneur. Une valeur de 100% indiquera que le côté droit (ou bas) de l'image d'arrière-plan est alignée avec le bord droit (ou bas) du conteneur. Une valeur de 50% permettra de centrer l'image.
 
-### Syntaxe formelle
+Autrement dit, lorsqu'on utilise un pourcentage, celui-ci s'inscrit dans la formule suivante&nbsp;:
+
+```
+(largeur conteneur - largeur image) * (position en %) = (décalage horizontal)
+(hauteur conteneur - hauteur image) * (position en %) = (décalage vertical)
+```
+
+En utilisant l'axe horizontal pour un exemple, prenons une image dont la largeur mesure 300px, qu'on utilise celle-ci dans un conteneur dont la largeur mesure 100px et que `background-size` vaut `auto`&nbsp;:
+
+```
+100px - 300px = -200px (différence entre le conteneur et l'image)
+```
+
+Voici donc les décalages, exprimés en pixels, qu'on obtient avec les pourcentages -25%, 0%, 50%, 100% et 125%&nbsp;:
+
+```
+-200px * -25% = 50px
+-200px * 0% = 0px
+-200px * 50% = -100px
+-200px * 100% = -200px
+-200px * 125% = -250px
+```
+
+Traduisons l'effet obtenu avec ces valeurs. Le **bord gauche** de **l'image** est décalé du **bord gauche** du **conteneur** de&nbsp;:
+
+- \+ 50px (plaçant ainsi le bord gauche de l'image au centre du conteneur large de 100px)
+- 0px (le bord gauche de l'image coïncide avec le bord gauche du conteneur)
+- \-100px (le bord gauche de l'image est situé à 100px du bord gauche du conteneur, ce qui signifie pour notre exemple que c'est la partie centrale de l'image qui est inscrite dans le conteneur)
+- \-200px (le bord gauche de l'image est situé à 200px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image coïncide avec le bord droit du conteneur)
+- \-250px (le bord gauche de l'image est situé à 250px du bord gauche du conteneur, ce qui signifie pour notre exemple que le bord droit de l'image de 300px est au centre du conteneur).
+
+On notera donc que si l'image d'arrière-plan a les mêmes dimensions que le conteneur, les valeurs en pourcentage pour `background-position` n'auront aucun effet. Il faudra utiliser des valeurs absolues pour décaler l'image.
+
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -93,6 +129,14 @@ La propriété `background-position` peut être définie grâce à une ou plusie
 
 Dans cet exemple, on a trois éléments jaunes qui ont chacun une étoile située différemment. Le rectangle final possède deux images d'arrière-plan, chacune à une position différente.
 
+#### HTML
+
+```html
+<div class="exemple_un">Premier exemple</div>
+<div class="exemple_deux">Deuxième exemple</div>
+<div class="exemple_trois">Troisième exemple</div>
+```
+
 #### CSS
 
 ```css
@@ -106,10 +150,10 @@ div {
 
 /* On utilise la propriété raccourcie background */
 .exemple_un {
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+  background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
 }
 .exemple_deux {
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+  background: url("startransparent.gif") #FFEE99 3em 50% no-repeat;
 }
 
 /*
@@ -118,48 +162,28 @@ différemment, on voit les virgules dans les déclarations.
 L'ordre est le même entre background-image et -position.
 */
 .exemple_trois {
-  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
-                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
-  background-position: 0px 0px,
-                       center;
+  background-image: url("startransparent.gif"), url("catfront.png");
+  background-position: 0px 0px, center;
 }
 ```
 
-#### HTML
-
-```html
-<div class="exemple_un">Premier exemple</div>
-<div class="exemple_deux">Deuxième exemple</div>
-<div class="exemple_trois">Troisième exemple</div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample('Exemples', 420, 200)}}
+{{EmbedLiveSample('', 420, 320)}}
 
 ## Spécifications
 
-| Spécification                                                                                                        | État                                     | Commentaires                                                                                                                                                                                        |
-| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#background-position', 'background-position')}}             | {{Spec2('CSS3 Backgrounds')}} | La gestion de plusieurs arrières-plans a été ajoutée. La syntaxe avec quatre valeurs a été ajoutée. La définition des valeurs en pourcentages a été modifiée pour correspondre aux implémentations. |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', 'background-position')}} | {{Spec2('CSS2.1')}}                 | Cette spécification permet de mélanger les valeurs qui sont des mots-clés, les valeurs de type {{cssxref("&lt;length&gt;")}} et {{cssxref("&lt;percentage&gt;")}}.            |
-| {{SpecName('CSS1', '#background-position', 'background-position')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-position")}}
-
-### Notes relatives à Quantum CSS
-
-- Un bug de Gecko empêche la transition de `background-position` entre deux valeurs qui contiennent différents nombres de valeurs {{cssxref("&lt;position&gt;")}} (par exemple `background-position: 10px 10px;` d'une part et `background-position: 20px 20px, 30px 30px;` d'autre part) (cf. {{bug(1390446)}}). Le nouveau moteur CSS de Firefox (appelé [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo), prévu pour Firefox 57) corrige ce problème.
+{{Compat}}
 
 ## Voir aussi
 
 - [Gérer plusieurs arrières-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
-- {{cssxref("background-position-x")}}
-- {{cssxref("background-position-y")}}
-- {{cssxref("background-position-inline")}}
-- {{cssxref("background-position-block")}}
-- {{cssxref("transform-origin")}}
+- [`background-position-x`](/fr/docs/Web/CSS/background-position-x)
+- [`background-position-y`](/fr/docs/Web/CSS/background-position-y)
+- [`background-position-inline`](/fr/docs/Web/CSS/background-position-inline)
+- [`background-position-block`](/fr/docs/Web/CSS/background-position-block)
+- [`transform-origin`](/fr/docs/Web/CSS/transform-origin)
diff --git a/files/fr/web/css/background-repeat/index.md b/files/fr/web/css/background-repeat/index.md
index d11530c2ad..e65beaf890 100644
--- a/files/fr/web/css/background-repeat/index.md
+++ b/files/fr/web/css/background-repeat/index.md
@@ -1,19 +1,16 @@
 ---
 title: background-repeat
 slug: Web/CSS/background-repeat
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background-repeat
 translation_of: Web/CSS/background-repeat
 ---
 {{CSSRef}}
 
-La propriété **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.
+La propriété [CSS](/fr/docs/Web/CSS) **`background-repeat`** définit la façon dont les images utilisées en arrière-plan sont répétées. Une image d'arrière-plan pourra ainsi être répétée sur l'axe horizontal, l'axe vertical ou bien ne pas être répétée.
 
 {{EmbedInteractiveExample("pages/css/background-repeat.html")}}
 
-Par défaut, les images répétées sont rognées à la taille de l'élément mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`).
+Par défaut, les images répétées sont rognées à la taille de l'élément, mais elles peuvent être redimensionnées pour occuper l'espace avec un nombre entier de répétitions (`round`) voire être distribuées avec des espaces entre les motifs pour remplir la zone (`space`).
 
 ## Syntaxe
 
@@ -27,8 +24,7 @@ background-repeat: round;
 background-repeat: no-repeat;
 
 /* Syntaxe avec deux valeurs        */
-/* Première valeur : axe horizontal */
-/* Seconde valeur : axe vertical    */
+/* axe horizontal | vertical */
 background-repeat: repeat space;
 background-repeat: repeat repeat;
 background-repeat: round space;
@@ -37,6 +33,7 @@ background-repeat: no-repeat round;
 /* Valeurs globales */
 background-repeat: inherit;
 background-repeat: initial;
+background-repeat: revert;
 background-repeat: unset;
 ```
 
@@ -44,13 +41,13 @@ background-repeat: unset;
 
 - `<repeat-style>`
 
-  - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance :
+  - : Un mot-clé qui peut être utilisé dans la syntaxe à une valeur ou à deux valeurs. La syntaxe utilisant une valeur est une notation raccourcie dont voici le tableau de correspondance&nbsp;:
 
     <table class="standard-table">
       <tbody>
         <tr>
           <td><strong>Une seule valeur</strong></td>
-          <td><strong>Équivalent avec deux-valeurs</strong></td>
+          <td><strong>Équivalent avec deux valeurs</strong></td>
         </tr>
         <tr>
           <td><code>repeat-x</code></td>
@@ -79,59 +76,55 @@ background-repeat: unset;
       </tbody>
     </table>
 
-    Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici un tableau décrivant chacune des options :
+    Lorsqu'on utilise la syntaxe à deux valeurs, la première indique la méthode de répétition pour l'axe horizontal et la seconde celle pour l'axe vertical. Voici une définition des différentes options&nbsp;:
 
-    <table class="standard-table">
-      <tbody>
-        <tr>
-          <td><code>repeat</code></td>
-          <td>
-            L'image est répétée autant de fois que nécessaire pour recouvrir la zone
-            dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
-          </td>
-        </tr>
-        <tr>
-          <td><code>space</code></td>
-          <td>
-            L'image est répétée autant que possible sans rognage. La première et la
-            dernière image sont accolées aux bords de l'élément et des espaces sont
-            repartis de façon égale entre les images. La propriété
-            {{cssxref("background-position")}} est ignorée sauf s'il n'y a
-            qu'une seule image qui puisse être affichée sans être rognée. Le seul
-            cas où <code>space</code> est utilisé et qu'une image est rognée se
-            produit lorsque l'image est trop grande pour être affichée.
-          </td>
-        </tr>
-        <tr>
-          <td><code>round</code></td>
-          <td>
-            L'image est répétée autant que possible et est étirée si nécessaire afin
-            qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place
-            d'ajouter une image, les autres sont compressées pour lui laisser la
-            place. Ainsi, une image avec une largeur originale de 260px, répétée
-            trois fois, pourra être étirée pour que chaque exemplaire mesure 300
-            pixels de large, lorsqu'une autre image sera ajoutée, elles seront
-            compressées sur 225 pixels.
-          </td>
-        </tr>
-        <tr>
-          <td><code>no-repeat</code></td>
-          <td>
-            Il n'y a aucune répétition de l'image (dès lors, il est possible que
-            toute la zone ne soit pas recouverte par cette image). La position de
-            l'image est définie grâce à la propriété
-            {{cssxref("background-position")}}.
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    - `repeat`
+      - : L'image est répétée autant de fois que nécessaire pour recouvrir la zone dédiée à l'arrière-plan. La dernière image sera rognée si nécessaire.
+    - `space`
+      - : L'image est répétée autant que possible sans rognage. La première et la dernière image sont accolées aux bords de l'élément et des espaces sont repartis de façon égale entre les images. La propriété [`background-position`](/fr/docs/Web/CSS/background-position) est ignorée sauf s'il n'y a qu'une seule image qui puisse être affichée sans être rognée. Le seul cas où `space` est utilisé et qu'une image est rognée se produit lorsque l'image est trop grande pour être affichée.
+    - `round`
+      - : L'image est répétée autant que possible et est étirée si nécessaire afin qu'il n'y ait ni rognage ni espace restant. Dès qu'il y a la place d'ajouter une image, les autres sont compressées pour lui laisser la place. Ainsi, une image avec une largeur originale de 260px, répétée trois fois, pourra être étirée pour que chaque exemplaire mesure 300 pixels de large, lorsqu'une autre image sera ajoutée, elles seront compressées sur 225 pixels.
+    - `no-repeat`
+      - : Il n'y a aucune répétition de l'image (dès lors, il est possible que toute la zone ne soit pas recouverte par cette image). La position de l'image est définie grâce à la propriété [`background-position`](/fr/docs/Web/CSS/background-position).
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
+### HTML
+
+```html
+<ol>
+  <li>no-repeat
+    <div class="un"></div>
+  </li>
+  <li>repeat
+    <div class="deux"></div>
+  </li>
+  <li>repeat-x
+    <div class="trois"></div>
+  </li>
+  <li>repeat-y
+    <div class="quatre"></div>
+  </li>
+  <li>space
+    <div class="cinq"></div>
+  </li>
+  <li>round
+    <div class="six"></div>
+  </li>
+  <li>repeat-x, repeat-y (plusieurs images)
+    <div class="sept"></div>
+  </li>
+</ol>
+```
+
 ### CSS
 
 ```css
@@ -144,91 +137,55 @@ li {
   margin-bottom: 12px;
 }
 div {
-    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
-    width: 160px;
-    height: 70px;
+  background-image: url(starsolid.gif);
+  width: 160px;
+  height: 70px;
 }
 
-/* background repeat CSS */
-.one {
-    background-repeat: no-repeat;
+/* background-repeat CSS */
+.un {
+  background-repeat: no-repeat;
 }
-.two {
-    background-repeat: repeat;
+.deux {
+  background-repeat: repeat;
 }
-.three {
-    background-repeat: repeat-x;
+.trois {
+  background-repeat: repeat-x;
 }
-.four {
-    background-repeat: repeat-y;
+.quatre {
+  background-repeat: repeat-y;
 }
-
-.five {
+.cinq {
    background-repeat: space;
 }
-
 .six {
    background-repeat: round;
 }
 
 /* Plusieurs images */
-.seven {
-    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
-                       url(https://developer.mozilla.org/static/img/favicon32.png);
-    background-repeat: repeat-x,
-                       repeat-y;
-    height: 144px;
+.sept {
+  background-image:  url(starsolid.gif),
+                     url(favicon.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
 }
 ```
 
-### HTML
-
-```html
-<ol>
-    <li>no-repeat
-        <div class="one"></div>
-    </li>
-    <li>repeat
-        <div class="two"></div>
-    </li>
-    <li>repeat-x
-        <div class="three"></div>
-    </li>
-    <li>repeat-y
-        <div class="four"></div>
-    </li>
-    <li>space
-        <div class="five"></div>
-    </li>
-    <li>round
-        <div class="six"></div>
-    </li>
-    <li>repeat-x, repeat-y (plusieurs images)
-        <div class="seven"></div>
-    </li>
-</ol>
-```
-
 ### Résultat
 
 Dans cet exemple, chaque élément de la liste illustre une valeur différente de `background-repeat`.
 
-{{EmbedLiveSample('Exemples', 240, 560)}}
+{{EmbedLiveSample('', 240, 560)}}
 
 ## Spécifications
 
-| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                                                                                                                                                                            |
-| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}         | {{Spec2('CSS3 Backgrounds')}} | Ajout de la prise en charge de plusieurs images d'arrière-plan. La syntaxe avec deux valeurs permet d'avoir des motifs de répétition différents pour les deux axes. Les mots-clés `space` et `round` sont ajoutés. La définition de la zone de dessin pour l'arrière-plan est mieux définie pour les éléments en ligne. |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}} | {{Spec2('CSS2.1')}}                 | Aucune modification significative.                                                                                                                                                                                                                                                                                      |
-| {{SpecName('CSS1', '#background-repeat', 'background-repeat')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                                                                                                    |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-repeat")}}
+{{Compat}}
 
 ## Voir aussi
 
-- [Utiliser plusieurs arrières-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- [Utiliser plusieurs arrière-plans en CSS](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/background-size/index.md b/files/fr/web/css/background-size/index.md
index 71cebb4b98..160c39c44f 100644
--- a/files/fr/web/css/background-size/index.md
+++ b/files/fr/web/css/background-size/index.md
@@ -1,19 +1,15 @@
 ---
 title: background-size
 slug: Web/CSS/background-size
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/background-size
 ---
 {{CSSRef}}
 
-La propriété CSS **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.
+La propriété [CSS](/fr/docs/Web/CSS) **`background-size`** définit la taille des images d'arrière-plan pour l'élément. La taille de l'image peut être contrainte, complètement ou partiellement afin de conserver ses proportions.
 
 {{EmbedInteractiveExample("pages/css/background-size.html")}}
 
-> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété {{cssxref("background-color")}}. De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.
+> **Note :** L'espace qui n'est pas rempli par l'image d'arrière-plan aura la couleur définie par la propriété [`background-color`](/fr/docs/Web/CSS/background-color). De plus, la couleur d'arrière-plan sera visible si l'image d'arrière-plan est transparente.
 
 ## Syntaxe
 
@@ -24,7 +20,7 @@ background-size: contain;
 
 /* Une seule valeur                         */
 /* La valeur désigne la largeur de l'image. */
-/* La hauteur vaut 'auto'.                  */
+/* La hauteur vaut 'auto'                   */
 background-size: 50%;
 background-size: 3.2em;
 background-size: 12px;
@@ -46,192 +42,137 @@ background-size: 6px, auto, contain;
 /* Valeurs globales */
 background-size: inherit;
 background-size: initial;
+background-size: revert;
 background-size: unset;
 ```
 
-La propriété `background-size` peut être définie de différentes façons :
+La propriété `background-size` peut être définie de différentes façons&nbsp;:
 
-- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover).
+- Avec l'un des mots-clés [`contain`](#contain) ou [`cover`](#cover)
 - Avec une seule valeur qui indique la largeur de l'image (la hauteur vaut alors [`auto`](#auto) par défaut)
-- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type {{cssxref("&lt;length&gt;")}}) ou un pourcentage (type {{cssxref("&lt;percentage&gt;")}}) ou encore [`auto`](#auto).
+- Avec deux valeurs dont la première représente la largeur et la seconde la hauteur. Chaque valeur peut être une longueur (type [`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou encore [`auto`](#auto).
 
-Lorsqu'on souhaite paramétrer la taillle de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de {{cssxref("background-image")}}).
+Lorsqu'on souhaite paramétrer la taille de plusieurs images d'arrière-plan, on peut séparer ces valeurs par des virgules (l'ordre utilisé entre les valeurs suit celui de [`background-image`](/fr/docs/Web/CSS/background-image)).
 
 ### Valeurs
 
 - `contain`
-  - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vide sont remplies avec la couleur d'arrière-plan (définie grâce à {{cssxref("background-color")}}). Par défaut, l'image est centrée sauf si {{cssxref("background-position")}} a été modifiée.
+  - : Un mot-clé qui redimensionne l'image afin qu'elle soit la plus grande possible et que l'image conserve ses proportions. L'image est contrainte dans le conteneur. Les zones éventuellement vides sont remplies avec la couleur d'arrière-plan (définie grâce à [`background-color`](/fr/docs/Web/CSS/background-color)). Par défaut, l'image est centrée sauf si [`background-position`](/fr/docs/Web/CSS/background-position) a été modifiée.
 - `cover`
-  - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).
+  - : Un mot-clé dont le comportement est opposé à celui de `contain`. L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions. L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y a aucun espace libre sur lequel on verrait la couleur d'arrière-plan).
 - `auto`
   - : Un mot-clé qui redimensionne l'image d'arrière-plan afin que ses proportions soient conservées.
 - `<length>`
-  - : Une valeur de type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
+  - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image afin que celle-ci occupe la longueur indiquée dans la dimension concernée. Les valeurs négatives ne sont pas autorisées.
 - `<percentage>`
-  - : Une valeur de type {{cssxref("&lt;percentage&gt;")}} qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via {{cssxref("background-origin")}}. Par défaut, cette zone correspond à la boîte de contenu et de remplissage (_padding_) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété {{cssxref("background-attachment")}} vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.
+  - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) qui redimensionne l'image d'arrière-plan proportionnellement à la taille de la zone dédiée à l'arrière-plan, définie via [`background-origin`](/fr/docs/Web/CSS/background-origin). Par défaut, cette zone correspond à la boîte de contenu et de remplissage (<i lang="en">padding</i>) mais peut être modifiée pour contenir uniquement la boîte de contenu ou, à l'inverse, les boîtes de contenu, remplissage et marge. Si la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) vaut `fixed`, la zone de positionnement de l'arrière-plan sera la fenêtre du navigateur (sans les barres de défilement). Les valeurs négatives ne sont pas autorisées.
 
 ### Dimensions intrinsèques et proportions
 
-Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles :
+Le calcul des valeurs dépend des dimensions intrinsèques de l'image (sa largeur et sa hauteur) et de ses proportions intrinsèques (le rapport entre la largeur et la hauteur). Voici les différents cas de figures possibles&nbsp;:
 
 - Une image matricielle (telle qu'une image JPG) possède toujours des dimensions intrinsèques et des proportions intrinsèques.
-- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèque. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
-- Un dégradé CSS (cf. {{cssxref("&lt;gradient&gt;")}}) ne possède ni dimension ni proportion intrinsèque.
-- Les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} utiliseront les dimensions et proportions intrinsèques de l'élément générateur.
+- Une image vectorielle (telle qu'une image SVG) ne possède pas nécessairement de dimensions intrinsèques. Si elle possède à la fois une dimension verticale et une dimension horizontale intrinsèques, elle possèdera alors des proportions intrinsèques. Si elle ne possède qu'une ou aucune dimension intrinsèque, elle peut avoir ou ne pas avoir de proportions.
+- Un dégradé CSS (cf. [`<gradient>`](/fr/docs/Web/CSS/gradient)) ne possède ni dimension ni proportion intrinsèque.
+- Les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) utiliseront les dimensions et proportions intrinsèques de l'élément générateur.
 
-> **Note :** Le comportement associé aux dégradés (`<gradient>`) a été modifié avec Gecko 8.0 {{geckoRelease("8.0")}}. Auparavant, les dégradés étaient traités comme des images sans dimensions intrinsèques mais avec des proportions intrinsèques identiques à celles de la zone de positionnement de l'arrière-plan.
+> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction [`element()`](/fr/docs/Web/CSS/element()) sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.
 
-> **Note :** Pour Gecko, les images d'arrière-plan créées avec la fonction {{cssxref("element()")}} sont actuellement traitées comme des images ayant les dimensions de l'élément ou, si la zone de positionnement est un élément SVG, avec les proportions intrinsèques. Ce comportement n'est pas standard.
+Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante&nbsp;:
 
-Selon le caractère intrinsèque ou non des dimensions et des proportions, la taille d'affichage de l'image d'arrière-plan est calculée de la façon suivante :
-
-- Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto` : L'image utilise la taille définie.
-- Si `background-size` vaut `contain` ou `cover` : L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.
-- Si `background-size` vaut `auto` ou `auto auto` :
+- **Si les deux composants de `background-size` sont définis et qu'aucun ne vaut `auto`&nbsp;:** L'image utilise la taille définie.
+- **Si `background-size` vaut `contain` ou `cover`&nbsp;:** L'image est affichée et ses proportions sont conservées pour que l'image soit contenue dans la zone ou la recouvre complètement. Si l'image ne possède pas de proportions intrinsèques&nbsp;; elle est affichée avec la taille de la zone de positionnement de l'arrière-plan.
+- **Si `background-size` vaut `auto` ou `auto auto`&nbsp;:**
 
   - Si l'image possède deux dimensions intrinsèques, c'est cette taille qui est utilisée.
   - Si elle ne possède pas de dimension intrinsèque ni de proportion intrinsèque, elle est affichée avec la taille de la zone dédiée à l'arrière-plan.
-  - Si elle n'a aucune dimensions mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée.
+  - Si elle n'a aucune dimension mais possède une proportion, elle sera affichée comme si la valeur `contain` avait été utilisée.
   - Si l'image possède une dimension intrinsèque et une proportion, elle est affichée avec cette dimension et cette proportion.
   - Si l'image possède une dimension intrinsèque mais aucune proportion, elle sera affichée avec la dimension intrinsèque et l'autre dimension suivra la taille de la zone pour l'arrière-plan.
 
-  > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Pour Firefox 43, à la différence de Chrome 52, une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`.
+  > **Note :** Les images SVG peuvent contenir un attribut [`preserveAspectRatio`](/fr/docs/Web/SVG/Attribute/preserveAspectRatio) pour lequel la valeur par défaut est équivalente à `contain`. Une valeur explicite pour `background-size` permet d'ignorer `preserveAspectRatio`.
 
-- Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto` :
+- **Si `background-size` possède une composante `auto` et que l'autre composante est différente de `auto`&nbsp;:**
 
   - Si l'image possède une proportion intrinsèque, elle sera affichée avec la dimension indiquée et la deuxième sera calculée grâce à la proportion.
   - Si l'image ne possède aucune proportion intrinsèque, la dimension indiquée sera utilisée pour la dimension concernée et on utilisera la dimension intrinsèque de l'image pour l'autre axe si elle existe. Sinon, on prendra la dimension de la zone de l'arrière-plan pour cet axe.
 
-> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateur. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.
-
-### Syntaxe formelle
-
-{{csssyntax}}
+> **Note :** Le dimensionnement des images d'arrière-plan qui sont des images vectorielles sans dimension ou proportion intrinsèque n'est pas implémenté par l'ensemble des navigateurs. Attention à bien vérifier le résultat obtenu dans les différents navigateurs par rapport aux règles émises ci-avant.
 
-## Exemples
+### Utiliser les dégradés
 
-### `cover`
+Si vous utilisez un dégradé (`<gradient>`) comme arrière-plan et indiquez la propriété `background-size` correspondante, il vaut mieux ne pas utiliser une taille qui utilise un seul composant `auto` ou qui est définie avec une seule valeur de largeur (par exemple, `background-size: 50%`).
 
-#### CSS
+L'affichage des dégradés peut différer entre les navigateurs dont certains n'implémentent pas le rendu [conformément à la spécification CSS de `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [à la spécification pour les dégradés](https://dev.w3.org/csswg/css3-images/#gradients).
 
 ```css
-div {
-  height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
-}
+.exemple-degrade {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Utilisation risquée */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
 
-.exemple_cover {
-  background-size: cover;
+  /* Peut être utilisé sans problème */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
 }
 ```
 
-#### HTML
-
-```html
-<div class="exemple_cover"></div>
-```
+## Définition formelle
 
-#### Résultat
+{{cssinfo}}
 
-{{EmbedLiveSample("cover","200","300")}}
+## Syntaxe formelle
 
-### `contain`
+{{csssyntax}}
 
-#### CSS
+## Exemples
 
-```css
-div {
-  height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
-}
+### Réaliser un pavage
 
-.exemple_cover {
-  background-size: contain;
-}
-```
+Prenons une image d'une taille qui ne correspond pas forcément à notre document cible. Ici, on a une image de 189x189 pixels et on souhaite réaliser un pavage avec quatre exemplaires de l'image dans un élément qui mesure 300x300 pixels. Pour cela, on fixe la valeur de `background-size` à 150 pixels.
 
 #### HTML
 
 ```html
-<div class="exemple_cover"></div>
+<div class="tiledBackground">
+</div>
 ```
 
-#### Résultat
-
-{{EmbedLiveSample("contain","200","300")}}
-
-### `auto 50%`
-
 #### CSS
 
 ```css
-div {
+.tiledBackground {
+  background-image: url(logo-quantum.png);
+  background-size: 150px;
+  width: 300px;
   height: 300px;
-  width: 200px;
-  background-color: palegreen;
-  background-image: url(https://mdn.mozillademos.org/files/12988/p_201.jpg);
-  background-repeat: no-repeat;
+  border: 2px solid;
+  color: pink;
 }
-
-.exemple_cover {
-  background-size: auto 50%;
-}
-```
-
-#### HTML
-
-```html
-<div class="exemple_cover"></div>
 ```
 
 #### Résultat
 
-{{EmbedLiveSample("auto_50","200","300")}}
+{{EmbedLiveSample("", 340, 340)}}
 
-## Notes
-
-Si on utilise un dégradé (`<gradient>`) comme arrière-plan et qu'on définit une valeur associée pour la propriété `background-size`, mieux vaut ne pas définir une taille qui n'utilise qu'un seul composant `auto` ou qu'une seule largeur (par exemple `background-size: 50%`). En effet, le rendu de tels éléments a été modifié avec Firefox 8 et peut avoir un comportement différent entre les navigateurs (tous n'implémentent pas exactement la [spécification CSS3 pour `background-size`](https://www.w3.org/TR/css3-background/#the-background-size) et [la spécification CSS3 pour les images qui sont des dégradés](https://dev.w3.org/csswg/css3-images/#gradients)).
-
-```css
-.gradient-exemple {
-  width: 50px;
-  height: 100px;
-  background-image: linear-gradient(blue, red);
-
-  /* Méthode risquée */
-  background-size: 25px;
-  background-size: 50%;
-  background-size: auto 50px;
-  background-size: auto 50%;
-
-  /* Sans risque */
-  background-size: 25px 50px;
-  background-size: 50% 50%;
-}
-```
-
-On notera qu'il n'est pas recommandé d'utiliser une dimension exprimée en pixels et une autre dimension avec `auto` lorsqu'on manipule des dégradés car il est impossible d'obtenir le même rendu que celui de Firefox pour les versions antérieures à Firefox 8 sans connaître la taille exacte de l'élément dont on définit l'arrière-plan.
+Voir [Redimensionner des images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images) pour plus d'exemples.
 
 ## Spécifications
 
-| Spécification                                                                                        | État                                     | Commentaires         |
-| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background-size")}}
+{{Compat}}
 
 ## Voir aussi
 
 - [Redimensionner les images d'arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
 - [Redimensionner les arrière-plans SVG](/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds)
-- {{cssxref("object-fit")}}
+- [`object-fit`](/fr/docs/Web/CSS/object-fit)
diff --git a/files/fr/web/css/background/index.md b/files/fr/web/css/background/index.md
index a5ab39b7e0..6a4eea7ed0 100644
--- a/files/fr/web/css/background/index.md
+++ b/files/fr/web/css/background/index.md
@@ -1,23 +1,31 @@
 ---
 title: background
 slug: Web/CSS/background
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.background
 translation_of: Web/CSS/background
 ---
-{{CSSRef}}
+{{CSSRef("CSS Background")}}
 
-La propriété CSS **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).
+La propriété [CSS](/fr/docs/Web/CSS) **`background`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir les différentes valeurs des propriétés liées à la gestion des arrière-plans d'un élément (couleur, image, origine, taille, répétition, etc.).
 
 {{EmbedInteractiveExample("pages/css/background.html")}}
 
-Elle permet de définir une ou plusieurs valeurs pour : {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, et {{cssxref("background-attachment")}}.
+## Propriétés détaillées correspondantes
+
+Cette propriété permet de définir une ou plusieurs valeurs pour&nbsp;:
+
+- [`background-attachment`](/fr/docs/Web/CSS/background-attachment)
+- [`background-clip`](/fr/docs/Web/CSS/background-clip)
+- [`background-color`](/fr/docs/Web/CSS/background-color)
+- [`background-image`](/fr/docs/Web/CSS/background-image)
+- [`background-origin`](/fr/docs/Web/CSS/background-origin)
+- [`background-position`](/fr/docs/Web/CSS/background-position)
+- [`background-repeat`](/fr/docs/Web/CSS/background-repeat)
+- [`background-size`](/fr/docs/Web/CSS/background-size)
 
 Lorsqu'on utilise la propriété raccourcie `background`, les valeurs fournies sont appliquées et pour les valeurs absentes, la propriété réinitialisera les propriétés détaillées avec leurs valeurs initiales.
 
-> **Note :** La propriété {{cssxref("background-color")}} ne peut être définie que sur le dernier arrière-plan car il n'y a qu'une seule couleur d'arrière-plan pour un élément.
+> **Note :** La propriété [`background-color`](/fr/docs/Web/CSS/background-color) ne peut être définie que sur le dernier arrière-plan, car il n'y a qu'une seule couleur d'arrière-plan pour un élément.
 
 ## Syntaxe
 
@@ -34,40 +42,57 @@ background: border-box red;
 /* Ici on utilise une seule image, centrée */
 /* et remise à l'échelle */
 background: no-repeat center/80% url("../img/image.png");
+
+/* Valeurs globales */
+background: inherit;
+background: initial;
+background: revert;
+background: unset;
 ```
 
-La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec :
+La propriété `background` permet de définir une ou plusieurs couches d'arrière-plan, séparées par des virgules. Chacune des couches peut être définie avec&nbsp;:
 
-- Zéro ou une occurence d'une valeur :
+- Zéro ou une occurrence d'une valeur&nbsp;:
 
-  - [`<attachment>`](#<attachment>)
-  - [`<bg-image>`](#<bg-image>)
-  - [`<position>`](#<position>)
-  - [`<bg-size>`](#<bg-size>)
-  - [`<repeat-style>`](#<repeat-style>)
+  - `<attachment>`
+  - `<bg-image>`
+  - `<position>`
+  - `<bg-size>`
+  - `<repeat-style>`
 
-- Une valeur [`<bg-size>`](#<bg-size>) qui peut uniquement être utilisée directement après une valeur [`<position>`](#<position>) suivie d'une barre oblique (par exemple "`center/80%`")
-- Une valeur [`<box>`](#<box>) présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir {{cssxref("background-origin")}} et la seconde définira {{cssxref("background-clip")}}.
-- Une valeur [`<background-color>`](#<background-color>) qui peut uniquement être incluse pour la dernière couche qui est définie.
+- Une valeur `<bg-size>` qui peut uniquement être utilisée directement après une valeur `<position>` suivie d'une barre oblique (par exemple `center/80%`)
+- Une valeur `<box>` présente zéro, une voire deux fois. Si elle n'est présente qu'une fois, cette valeur sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et [`background-clip`](/fr/docs/Web/CSS/background-clip). Si elle est présente à deux reprises, la première occurrence sera utilisée pour définir [`background-origin`](/fr/docs/Web/CSS/background-origin) et la seconde définira [`background-clip`](/fr/docs/Web/CSS/background-clip).
+- Une valeur `<background-color>` qui peut uniquement être incluse pour la dernière couche qui est définie.
 
 ### Valeurs
 
 - `<attachment>`
-  - : Voir {{cssxref("background-attachment")}}
+  - : Voir [`background-attachment`](/fr/docs/Web/CSS/background-attachment)
 - `<box>`
-  - : Voir {{cssxref("background-clip")}} et {{cssxref("background-origin")}}
+  - : Voir [`background-clip`](/fr/docs/Web/CSS/background-clip) et [`background-origin`](/fr/docs/Web/CSS/background-origin)
 - `<background-color>`
-  - : Voir {{cssxref("background-color")}}
+  - : Voir [`background-color`](/fr/docs/Web/CSS/background-color)
 - `<bg-image>`
-  - : Voir {{Cssxref("background-image")}}
+  - : Voir [`background-image`](/fr/docs/Web/CSS/background-image)
 - `<position>`
-  - : Voir {{cssxref("background-position")}}
+  - : Voir [`background-position`](/fr/docs/Web/CSS/background-position)
 - `<repeat-style>`
-  - : Voir {{cssxref("background-repeat")}}
+  - : Voir [`background-repeat`](/fr/docs/Web/CSS/background-repeat)
 - `<bg-size>`
-  - : Voir {{cssxref("background-size")}}.
+  - : Voir [`background-size`](/fr/docs/Web/CSS/background-size).
+
+## Accessibilité
+
+Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisatrices et utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
+
+- [Comprendre la règle 1.1 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -92,37 +117,24 @@ La propriété `background` permet de définir une ou plusieurs couches d'arriè
 }
 
 .banniere {
-  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+  background: url("starsolid.gif") #99f repeat-y fixed;
 }
 ```
 
 ### Résultat
 
-{{EmbedLiveSample("Exemples")}}
-
-## Accessibilité
-
-Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.
-
-- [Comprendre la règle 1.1 du WCAG](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
-- [Comprendre les critères pour 1.1.1, comprendre WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+{{EmbedLiveSample("")}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                                     | Commentaires                                                                                                                                                                                                                                   |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}     | {{Spec2('CSS3 Backgrounds')}} | La propriété raccourcie a été étendue pour gérer plusieurs arrière-plans et également gérer les propriétés {{cssxref("background-size")}}, {{cssxref("background-origin")}} et {{cssxref("background-clip")}}. |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}}                 | Pas de modification significative.                                                                                                                                                                                                             |
-| {{SpecName('CSS1', '#background', 'background')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                                                                                           |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.background")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("box-decoration-break")}}
-- [Les gradients](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break)
+- [Les dégradés](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
 - [Gérer plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
diff --git a/files/fr/web/css/border-image-outset/index.md b/files/fr/web/css/border-image-outset/index.md
index bc6809bec1..b693ce981b 100644
--- a/files/fr/web/css/border-image-outset/index.md
+++ b/files/fr/web/css/border-image-outset/index.md
@@ -1,99 +1,102 @@
 ---
 title: border-image-outset
 slug: Web/CSS/border-image-outset
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.border-image-outset
 translation_of: Web/CSS/border-image-outset
 ---
 {{CSSRef}}
 
 La propriété **`border-image-outset`** définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.
 
-{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'évènements de pointeur par rapport à l'élément concerné.
 
-Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.
+{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
 
 ## Syntaxe
 
 ```css
-/* border-image-outset :                 */
-/* Une même valeur pour les quatre côtés */
+/* Longueur */
+/* Type <length> */
+border-image-outset: 1rem;
+
+/* Valeur numérique */
+/* Type <number> */
 border-image-outset: 1.5;
 
-/* border-image-outset :              */
-/* Première valeur : côtés verticaux  */
-/* Seconde valeur : côtés horizontaux */
+/* côtés verticaux | horizontaux */
 border-image-outset: 1 1.2;
 
-/* border-image-outset :               */
-/* Première valeur : côté haut         */
-/* Deuxième valeur : côtés horizontaux */
-/* Troisième valeur : côté bas         */
+/* haut | côtés horizontaux | bas */
 border-image-outset: 30px 2 45px;
 
-/* border-image-outset :          */
-/* Première valeur : côté haut    */
-/* Deuxième valeur : côté droit   */
-/* Troisième valeur : côté bas    */
-/* Quatrième valeur : côté gauche */
+/* haut | droit | bas | gauche */
 border-image-outset: 7px 12px 14px 5px;
 
 /* Valeurs globales */
 border-image-outset: inherit;
 border-image-outset: initial;
+border-image-outset: revert;
 border-image-outset: unset;
 ```
 
+La propriété `border-image-outset` peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un nombre ([`<number>`](/fr/docs/Web/CSS/number)). Les valeurs négatives sont invalides (la déclaration est alors ignorée).
+
+1. Si **une** valeur est indiquée, elle s'applique **aux quatre côtés**.
+2. Si **deux** valeurs sont indiquées, la première s'applique aux côtés **haut et bas** et la seconde s'applique aux côtés **gauche et droit**.
+3. Si **trois** valeurs sont indiquées, la première s'applique au côté **haut**, la deuxième aux côtés **gauche et droit**, et la troisième au côté **bas**.
+4. Si **quatre** valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre&nbsp;: la première au côté **haut**, la seconde au côté **droit**, la troisième au côté **bas**, et la quatrième au côté **gauche**.
+
 ### Valeurs
 
 - `<length>`
-  - : Une valeur de longueur (cf. type {{cssxref("&lt;length&gt;")}}) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
+  - : Une valeur de longueur (cf. type [`<length>`](/fr/docs/Web/CSS/length)) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
 - `<number>`
-  - : Une valeur numérique (cf. type {{cssxref("&lt;number&gt;")}}) qui sera multipliée par la valeur calculée de {{cssxref("border-width")}} afin de déterminer la longueur de l'espace duquel dépasser.
+  - : Une valeur numérique (cf. type [`<number>`](/fr/docs/Web/CSS/number)) qui sera multipliée par la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) afin de déterminer la longueur de l'espace duquel dépasser.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Décaler la bordure d'une image
 
-```css
-p {
-  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
-  border-image-slice: 30;
-  border-image-width: 20px;
-  border-image-repeat: round;
-  border-image-outset: 10px;
-  padding: 40px;
-}
+#### HTML
+
+```html
+<div id="outset">Un élément avec une bordure décalée !</div>
 ```
 
-### HTML
+#### CSS
 
-```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
+```css
+#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample('Exemples', '480', '320')}}
+{{EmbedLiveSample('', 'auto', '200')}}
 
 ## Spécifications
 
-| Spécification                                                                                                    | État                                     | Commentaires         |
-| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-image-outset")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [Apprendre le CSS&nbsp;: les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
diff --git a/files/fr/web/css/border-image-repeat/index.md b/files/fr/web/css/border-image-repeat/index.md
index 5039e96034..7f213fa8d8 100644
--- a/files/fr/web/css/border-image-repeat/index.md
+++ b/files/fr/web/css/border-image-repeat/index.md
@@ -1,91 +1,108 @@
 ---
 title: border-image-repeat
 slug: Web/CSS/border-image-repeat
-tags:
-  - CSS
-  - Propriété
-  - Reference
+browser-compat: css.properties.border-image-repeat
 translation_of: Web/CSS/border-image-repeat
 ---
 {{CSSRef}}
 
-La propriété **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisée pour s'étendre sur chacun des côtés de la bordure. Cette propriété est multi-valuée : une valeur indiquera le comportement pour tous les côtés et deux valeurs indiqueront respectivement le comportement pour les côtés horizontaux et verticaux.
+La propriété [CSS](/fr/docs/Web/CSS) **`border-image-repeat`** définit la façon dont les zones de l'image de bordure sont utilisées pour s'étendre sur chacun des côtés de la bordure.
 
 {{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
 
 ## Syntaxe
 
 ```css
-/* border-image-repeat                      */
-/* Une valeur : s'applique à tous les côtés */
+/* Valeurs avec un mot-clé */
 border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
 
-/* border-image-repeat
-/* Première valeur : côtés horizontaux */
-/* Deuxième valeur : côtés verticaux   */
+/* côtés horizontaux | verticaux */
 border-image-repeat: round stretch;
 
 /* Valeurs globales */
 border-image-repeat: inherit;
 border-image-repeat: initial;
+border-image-repeat: revert;
 border-image-repeat: unset;
 ```
 
+La propriété `border-image-repeat` peut être définie à l'aide d'une ou deux valeurs parmi la liste qui suit.
+
+- Avec **une** valeur indiquée, celle-ci s'applique **aux quatre côtés**.
+- Avec **deux** valeurs indiquées, la première s'applique aux côtés **haut et bas**, la seconde s'applique aux côtés **gauche et droite**.
+
 ### Valeurs
 
 - `stretch`
   - : Un mot-clé qui indique que la zone de l'image doit être étirée pour remplir l'espace entre les deux bordures.
 - `repeat`
-  - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures.
+  - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Les portions répétées peuvent être rognées si nécessaire.
 - `round`
   - : Un mot-clé qui indique que la zone de l'image doit être répétée jusqu'à remplir l'espace entre les deux bordures. Si on ne peut pas remplir cet espace avec un nombre entier de motifs, ceux-ci seront étirés pour qu'il y ait une répétition entière et que l'espace soit parfaitement rempli.
 - `space`
-  - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera répartis entre ces motifs.
+  - : Un mot-clé qui indique que la zone de l'image est répétée afin de remplir la zone entre les deux bordures. Si on ne peut pas remplir exactement la zone avec un nombre entier de motifs, l'espace restant sera réparti entre ces motifs.
+
+## Définition formelle
+
+{{CSSInfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Répéter l'image de bordure
+
+#### CSS
 
 ```css
-p {
- border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
- border-image-slice: 30;
- border-image-width: 20px;
- border-image-repeat: round;
- padding: 40px;
+#bordered {
+  width: 12rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 40px solid;
+  border-image: url("border.png") 27;
+  border-image-repeat: stretch;  /* Peut être changé avec la liste déroulante */
 }
 ```
 
-### HTML
+```html hidden
+<div id="bordered">Vous pouvez essayer différentes valeurs !</div>
+
+<select id="repetition">
+  <option value="stretch">stretch</option>
+  <option value="repeat">repeat</option>
+  <option value="round">round</option>
+  <option value="space">space</option>
+  <option value="stretch repeat">stretch repeat</option>
+  <option value="space round">space round</option>
+</select>
+```
 
-```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
+```js hidden
+var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
+});
 ```
 
 ### Résultat
 
-{{EmbedLiveSample('Exemples', '480', '320')}}
+{{EmbedLiveSample('', '480', '250')}}
 
 ## Spécifications
 
-| Spécification                                                                                                    | État                                     | Commentaires         |
-| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-image-repeat")}}
+{{Compat}}
 
 ## Voir aussi
 
-- [L'article de CSS Tricks sur `border-image` (en anglais)](https://css-tricks.com/almanac/properties/b/border-image/)
+- [Les arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [Apprendre le CSS&nbsp;: les arrière-plans et les bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
diff --git a/files/fr/web/css/border-image-slice/index.md b/files/fr/web/css/border-image-slice/index.md
index 8f31b33333..b03fd90a1a 100644
--- a/files/fr/web/css/border-image-slice/index.md
+++ b/files/fr/web/css/border-image-slice/index.md
@@ -1,114 +1,177 @@
 ---
 title: border-image-slice
 slug: Web/CSS/border-image-slice
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/border-image-slice
+browser-compat: css.properties.border-image-slice
 ---
 {{CSSRef}}
 
-La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété {{cssxref("border-image-source")}} en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.
+La propriété **`border-image-slice`** permet de découper l'image fournie via la propriété [`border-image-source`](/fr/docs/Web/CSS/border-image-source) en régions. Ces régions sont alors utilisées pour composer [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément.
 
 {{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
 
-![Les 9 zones définies par border-image-slice](border-image-slice.png)
+Ce découpage crée neuf régions&nbsp;: quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.
 
-Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).
+![Les 9 zones définies par border-image-slice](border-image-slice.png)
 
-La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé `fill`. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).
+Le diagramme ci-avant illustre l'emplacement de chaque région.
 
-Les propriétés {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} définissent la façon dont ces images seront utilisées.
+- Les zones 1 à 4 sont les coins. Chacun est utilisé une fois pour former les coins de l'image de bordure finale.
+- Les zones 5 à 8 sont les bords. Ils sont [répétés, redimensionnés ou modifiés autrement](/fr/docs/Web/CSS/border-image-repeat) dans la bordure finale afin que celle-ci corresponde aux dimensions de l'élément.
+- La zone 9 est la zone centrale et n'est pas utilisée par défaut. Elle est utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé.
 
-La propriété raccourcie {{cssxref("border-image")}} peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.
+Les propriétés [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat), [`border-image-width`](/fr/docs/Web/CSS/border-image-width), [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset) définissent la façon dont ces images seront utilisées.
 
 ## Syntaxe
 
 ```css
-/* border-image-slice :                       */
 /* Une valeur qui s'applique aux quatre côtés */
 border-image-slice: 30%;
 
-/* border-image-slice :                */
-/* Première valeur : côtés verticaux   */
-/* Deuxième valeur : côtés horizontaux */
+/* côtés verticaux | horizontaux */
 border-image-slice: 10% 30%;
 
-/* border-image-slice :                */
-/* Première valeur : côté haut         */
-/* Deuxième valeur : côtés horizontaux */
-/* Troisième valeur : côté bas         */
+/* haut | côtés horizontaux | bas */
 border-image-slice: 30 30% 45;
 
-/* border-image-slice :           */
-/* Première valeur : côté haut    */
-/* Deuxième valeur : côté droit   */
-/* Troisième valeur : côté bas    */
-/* Quatrième valeur : côté gauche */
+/* haut | droit | bas | gauche */
 border-image-slice: 7 12 14 5;
 
-/* border-image-slice: … fill          */
-/* Le mot-clé fill peut être intercalé */
-/* à n'importe quel endroit            */
+/* Le mot-clé `fill` */
 border-image-slice: 10% fill 7 12;
 
 /* Valeurs globales */
 border-image-slice: inherit;
 border-image-slice: initial;
+border-image-slice: revert;
 border-image-slice: unset;
 ```
 
+La propriété `border-image-slice` peut être définie avec une à quatre valeurs `<number-percentage>` qui représentent les emplacements de chaque découpe sur l'image. Les valeurs négatives sont valides et les valeurs supérieures aux dimensions de l'image sont ramenées à `100%`.
+
+- Lorsqu'**une** position est indiquée, les quatre découpages sont effectués à la même distance de chaque bord.
+- Lorsque **deux** positions sont indiquées, la première valeur indique la distance de découpage pour les côtés **haut et bas**, la seconde valeur indique la distance de découpage pour les côtés **gauche et droit**.
+- Lorsque **trois** positions sont indiquées, la première valeur indique la distance pour le découpage par rapport au bord **haut**, la seconde indique la distance pour le découpage depuis les bords **gauche et droit**, la troisième valeur correspond à la distance de découpage pour le côté **bas**.
+- Lorsque **quatre** positions sont indiquées, elles indiquent respectivement la distance de découpage pour les bords **haut**, **droit**, **bas**, et **gauche** (soit le sens des aiguilles d'une montre).
+
+La valeur optionnelle `fill` peut être utilisée et placée à n'importe quel endroit de la déclaration.
+
 ### Valeurs
 
-- `slice`
-  - : Une valeur de type {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type {{cssxref("&lt;length&gt;")}} n'est pas autorisée et est donc invalide. Une valeur de type {{cssxref("&lt;number&gt;")}} correspondra à des _pixels_ pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type {{cssxref("&lt;percentage&gt;")}} sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à `100%`. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
+- [`<number>`](/fr/docs/Web/CSS/number)
+  - : Représente un décalage par rapport au bord, exprimé en _pixels_ pour les images matricielles et en _coordonnées_ pour les images vectorielles. Pour les images vectorielles, le nombre est relatif à la taille de l'élément plutôt qu'à la taille de l'image source. Aussi, dans ce cas de figure, on utilisera plutôt les pourcentages.
+- [`<percentage>`](/fr/docs/Web/CSS/percentage)
+  - : Représente un décalage par rapport au bord comme pourcentage par rapport à la taille de l'image source&nbsp;: c'est la largeur de l'image qui sert de référence pour les décalages horizontaux et la hauteur de l'image qui sert de référence pour les décalages verticaux.
 - `fill`
-  - : Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.
+  - : La région au centre de l'image est conservée et celle-ci est affichée comme image d'arrière-plan mais empilée *sous* l'arrière-plan fourni par [`background`](/fr/docs/Web/CSS/background). La largeur et la hauteur sont dimensionnées afin de correspondre aux tailles des régions haute et gauche.
+
+## Définition formelle
+
+{{CSSInfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Bordure avec largeur et portions ajustables
+
+Dans l'exemple suivant, on utilise un simple élément `<div>` avec une image de bordure sur lui. L'image source utilisée pour les bordures est la suivante&nbsp;:
+
+![Des losanges de plusieurs couleurs](border-diamonds.png)
+
+Les losanges mesurent 30px de large. Aussi, en utilisant 30 pixels comme valeur pour [`border-width`](/fr/docs/Web/CSS/border-width) et `border-image-slice`, on aura des losanges complets et nets&nbsp;:
 
 ```css
-p {
- border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
- border-image-slice: 30;
- border-image-width: 20px;
- border-image-repeat: round;
- padding: 40px;
-}
+border-width: 30px;
+border-image-slice: 30;
 ```
 
-### HTML
+Ce sont les valeurs par défaut que nous avons utilisées dans cet exemple. Nous avons également fourni des curseurs qui vous permettent d'ajuster les valeurs des deux propriétés dynamiquement et d'observer l'effet&nbsp;:
+
+`border-image-slice` change la taille de la portion d'image échantillonnée pour chaque bordure et coin de bordure (et la zone du contenu si le mot-clé `fill` est utilisé). En utilisant des valeurs autour de 30, on voit que la bordure devient plutôt irrégulière.
+
+`border-width` change la largeur de la bordure. La taille de l'image échantillonnée est mise à l'échelle pour s'inscrire dans la bordure. Ainsi, si la largeur est supérieure à la taille de la portion utilisée, l'image pourra avoir l'air pixelisée (à moins d'avoir utilisé une image SVG).
+
+#### HTML
 
 ```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
+<div class="wrapper">
+  <div></div>
+</div>
+
+<ul>
+  <li>
+    <label for="width">Déplacez pour ajuster <code>border-width</code></label>
+    <input type="range" min="10" max="45" id="width">
+    <output id="width-output">30px</output>
+  </li>
+  <li>
+    <label for="slice">Déplacez pour ajuster <code>border-image-slice</code></label>
+    <input type="range" min="10" max="45" id="slice">
+    <output id="slice-output">30</output>
+  </li>
+</ul>
 ```
 
-### Résultat
+#### CSS
 
-{{EmbedLiveSample('Exemples', '480', '320')}}
+```css
+.wrapper {
+  width: 400px;
+  height: 300px;
+}
 
-## Spécifications
+div > div {
+  width: 300px;
+  height: 200px;
+  border-width: 30px;
+  border-style: solid;
+  border-image: url(border-diamonds.png);
+  border-image-slice: 30;
+  border-image-repeat: round;
+}
 
-| Spécification                                                                                                | État                                     | Commentaires         |
-| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
+li {
+  display: flex;
+  place-content: center;
+}
+```
+
+#### JavaScript
+
+```js
+const widthSlider = document.getElementById('width');
+const sliceSlider = document.getElementById('slice');
+const widthOutput = document.getElementById('width-output');
+const sliceOutput = document.getElementById('slice-output');
+const divElem = document.querySelector('div > div');
+
+widthSlider.addEventListener('input', () => {
+  const newValue = widthSlider.value + 'px';
+  divElem.style.borderWidth = newValue;
+  widthOutput.textContent = newValue;
+})
+
+sliceSlider.addEventListener('input', () => {
+  const newValue = sliceSlider.value;
+  divElem.style.borderImageSlice = newValue;
+  sliceOutput.textContent = newValue;
+})
+```
+
+#### Résultat
+
+{{EmbedLiveSample('', '100%', 400)}}
+
+## Spécifications
 
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-image-slice")}}
+{{Compat}}
 
 ## Voir aussi
 
diff --git a/files/fr/web/css/border-image-width/index.md b/files/fr/web/css/border-image-width/index.md
index 3854f22b95..8a0a4689bf 100644
--- a/files/fr/web/css/border-image-width/index.md
+++ b/files/fr/web/css/border-image-width/index.md
@@ -1,19 +1,16 @@
 ---
 title: border-image-width
 slug: Web/CSS/border-image-width
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/border-image-width
+browser-compat: css.properties.border-image-width
 ---
 {{CSSRef}}
 
-La propriété **`border-image-width`** définit la largeur de la bordure imagée.
+La propriété [CSS](/fr/docs/Web/CSS) **`border-image-width`** définit la largeur de [l'image de bordure](/fr/docs/Web/CSS/border-image) d'un élément.
 
 {{EmbedInteractiveExample("pages/css/border-image-width.html")}}
 
-Si `border-image-width` est supérieur à {{cssxref("border-width")}}, la bordure imagée s'étendra au-delà du _padding_ voire du contenu.
+Si la valeur de cette propriété est supérieure à [`border-width`](/fr/docs/Web/CSS/border-width), la bordure imagée s'étendra au-delà du remplissage (<i lang="en">padding</i>) voire du contenu.
 
 ## Syntaxe
 
@@ -33,7 +30,7 @@ border-image-width: 25%;
 /* Type <number> */
 border-image-width: 3;
 
-/* épaisseur verticale | horizontale */
+/* côtés verticaux | horizontaux */
 border-image-width: 2em 3em;
 
 /* haut | côtés horizontaux | bas */
@@ -45,66 +42,77 @@ border-image-width: 5% 2em 10% auto;
 /* Valeurs globales */
 border-image-width: inherit;
 border-image-width: initial;
+border-image-width: revert;
 border-image-width: unset;
 ```
 
 La propriété `border-image-width` est définie avec une, deux, trois ou quatre valeurs parmi celles de la liste qui suit.
 
-- Lorsqu'une valeur est utilisée, c'est cette valeur qui est utilisée pour les quatre côtés
-- Lorsque deux valeurs sont utilisées, la premières s'applique aux côtés haut et bas et la seconde aux côté gauche et droit
-- Lorsque trois valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés gauche et droit et la troisième au côté bas.
-- Lorsque quatre valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté haut, droit, bas et gauche (dans le sens horaire).
+- Lorsqu'**une** valeur est utilisée, c'est cette valeur qui est utilisée pour **les quatre côtés**
+- Lorsque **deux** valeurs sont utilisées, la première s'applique aux côtés haut et bas et la seconde aux côtés **gauche et droit**
+- Lorsque **trois** valeurs sont utilisées, la première s'applique au côté haut, la deuxième aux côtés **gauche et droit** et la troisième au côté bas.
+- Lorsque **quatre** valeurs sont utilisées, elles s'appliquent (dans cet ordre) au côté **haut**, **droit**, **bas** et **gauche** (dans le sens horaire).
 
 ### Valeurs
 
 - `<length-percentage>`
-  - : Une longueur ou un pourcentage représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides`.`
+  - : Une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) représentant la largeur de la bordure. Cette longueur peut être absolue (ex. `px`) ou relative (ex. `rem`). Les pourcentages sont relatifs à la largeur de la boîte de bordure. Les valeurs négatives sont considérées invalides.
 - `<number>`
-  - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de la propriété {{cssxref("border-width")}} de l'élément. Les valeurs négatives sont considérées invalides.
+  - : Représente un multiple de [la valeur calculée](/fr/docs/Web/CSS/computed_value) de la propriété [`border-width`](/fr/docs/Web/CSS/border-width) de l'élément. Les valeurs négatives sont considérées invalides.
 - `auto`
-  - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété {{cssxref("border-image-slice")}} correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place.
-- `inherit`
-  - : Un mot-clé qui indique que les quatre valeurs sont héritées des valeurs calculées pour la propriété de l'élément parent.
+  - : L'épaisseur de la bordure imagée est égale à la largeur ou à la hauteur (selon ce qui peut s'appliquer) de la propriété [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice) correspondante. Si l'image ne possède pas de dimensions intrinsèques, c'est la valeur calculée de `border-width` qui sera utilisée à la place.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Réaliser un pavage avec une image de bordure
+
+Dans cet exemple on crée une image de bordure en utilisant le fichier ".png" suivant, qui mesure 90 pixels par 90 pixels&nbsp;:
+
+![](border.png)
+
+Chaque cercle sur l'image a un diamètre de 30 pixels.
+
+#### HTML
+
+```html
+<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+```
+
+#### CSS
 
 ```css
 p {
   border: 20px solid;
-  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image: url("border.png") 30 round;
   border-image-width: 16px;
   padding: 40px;
 }
 ```
 
-### HTML
-
-```html
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-  no sea takimata sanctus est Lorem ipsum dolor sit amet.
-</p>
-```
+#### Résultat
 
-### Résultat
-
-{{EmbedLiveSample('Exemples', '480', '320')}}
+{{EmbedLiveSample('', 200, 280)}}
 
 ## Spécifications
 
-| Spécification                                                                                                | État                                     | Commentaires         |
-| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-image-width")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Arrière-plans et bordures](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [Apprendre le CSS&nbsp;: arrière-plans et bordures](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md
index b9a0348850..b4a7ba63ad 100644
--- a/files/fr/web/css/border-image/index.md
+++ b/files/fr/web/css/border-image/index.md
@@ -5,13 +5,21 @@ translation_of: Web/CSS/border-image
 ---
 {{CSSRef}}
 
-La propriété **`border-image`** dessine une image sur la bordure d'un élément. C'est [une propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir {{cssxref("border-image-source")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-repeat")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-outset")}}.
+La propriété **`border-image`** dessine une image sur la bordure d'un élément.
 
 {{EmbedInteractiveExample("pages/css/border-image.html")}}
 
-Cela permet d'obtenir des effets de dessin complexes sans avoir à complexifier l'utilisation des boîtes CSS. La propriété `border-image` sera utilisée plutôt que le style défini via la propriété {{cssxref("border-style")}}. Selon la spécification, `border-style` **doit** être présente si `border-image` est utilisée.
+> **Note :** Il est préférable d'indiquer un style de bordure distinct avec [`border-style`](/fr/docs/Web/CSS/border-style) dans le cas où l'image ne chargerait pas. Bien que la spécification ne le nécessite pas, certains navigateurs n'affichent pas l'image de bordure si [`border-style`](/fr/docs/Web/CSS/border-style) vaut `none` ou si [`border-width`](/fr/docs/Web/CSS/border-width) vaut `0`.
 
-> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` (via `border-image-source` ou via la propriété raccourcie `border-image`), ce sera le style indiqué par {{cssxref("border-style")}} qui sera utilisé.
+## Propriétés détaillées correspondantes
+
+C'est [une propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir&nbsp;:
+
+- [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset)
+- [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat)
+- [`border-image-source`](/fr/docs/Web/CSS/border-image-source)
+- [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice)
+- [`border-image-width`](/fr/docs/Web/CSS/border-image-width)
 
 ## Syntaxe
 
@@ -27,26 +35,43 @@ border-image: linear-gradient(red, blue) 27 / 35px;
 
 /* source | slice | width | outset | repeat */
 border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+/* Valeurs globales */
+border-image: inherit;
+border-image: initial;
+border-image: revert;
+border-image: unset;
 ```
 
 La propriété `border-image` peut être définie avec une à cinq valeurs parmi celles définies ci-après.
 
-> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de {{cssxref("border-image-source")}} vaut `none` ou si l'image ne peut pas être affichée, c'est le {{cssxref("border-style")}} correspondant qui sera affiché.
+> **Note :** Si la [valeur calculée](/fr/docs/Web/CSS/computed_value) de [`border-image-source`](/fr/docs/Web/CSS/border-image-source) vaut `none` ou si l'image ne peut pas être affichée, c'est le [`border-style`](/fr/docs/Web/CSS/border-style) correspondant qui sera affiché.
 
 ### Valeurs
 
 - `border-image-source`
-  - : L'image source. Voir {{cssxref("border-image-source")}}.
+  - : L'image source. Voir [`border-image-source`](/fr/docs/Web/CSS/border-image-source).
 - `border-image-slice`
-  - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir {{cssxref("border-image-slice")}}.
+  - : La façon dont l'image est découpée en zones (jusqu'à 4). Voir [`border-image-slice`](/fr/docs/Web/CSS/border-image-slice).
 - `border-image-width`
-  - : La largeur de la bordure avec l'image. Voir {{cssxref("border-image-width")}}.
+  - : La largeur de la bordure avec l'image. Voir [`border-image-width`](/fr/docs/Web/CSS/border-image-width).
 - `border-image-outset`
-  - : La distance entre la bordure et le bord de l'élément. Voir {{cssxref("border-image-outset")}}.
+  - : La distance entre la bordure et le bord de l'élément. Voir [`border-image-outset`](/fr/docs/Web/CSS/border-image-outset).
 - `border-image-repeat`
-  - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir {{cssxref("border-image-repeat")}}.
+  - : La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir [`border-image-repeat`](/fr/docs/Web/CSS/border-image-repeat).
+
+## Accessibilité
+
+Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.
+
+- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères pour 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -56,82 +81,67 @@ La propriété `border-image` peut être définie avec une à cinq valeurs parmi
 
 On découpe l'image et on la répète pour remplir la zone entre les bordures.
 
+#### HTML
+
+```html
+<div id="bitmap">L'image est étirée pour remplir l'espace.</div>
+```
+
 #### CSS
 
 ```css
 #bitmap {
   border: 30px solid transparent;
-  padding: 20px;
-  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30;
+  padding: 20px;
+  border-image: url("border.png") 30;
 }
 ```
 
-#### HTML
-
-```html
-<div id="bitmap">
-  L'image est étirée pour remplir l'espace.
-</div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample('Utiliser_une_image_matricielle_étirée')}}
+{{EmbedLiveSample('')}}
 
 ### Utiliser un dégradé
 
+#### HTML
+
+```html
+<div id="gradient">L'image formée par le dégradé est étirée pour remplir la zone.</div>
+```
+
 #### CSS
 
 ```css
 #gradient {
-  border: 30px solid;
-  border-image: linear-gradient(red, yellow) 10;
-  padding: 20px;
+  border: 30px solid;
+  border-image: linear-gradient(red, yellow) 10;
+  padding: 20px;
 }
 ```
 
-#### HTML
-
-```html
-<div id="gradient">
-  L'image formée par le gradient est étirée pour remplir la zone.
-</div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample('Utiliser_un_dégradé')}}
-
-## Accessibilité
-
-Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.
-
-- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
-- [_Understanding Success Criterion 1.1.1 - Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+{{EmbedLiveSample('')}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                                     | Commentaires         |
-| -------------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------- |
-| {{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.border-image")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("border")}}
-- {{cssxref("outline")}}
-- {{cssxref("box-shadow")}}
-- {{cssxref("background-image")}}
-- {{cssxref("url()", "url()")}}
-- Fonctions pour les dégradés
-
-  - {{CSSxRef("conic-gradient")}}
-  - {{CSSxRef("linear-gradient")}}
-  - {{CSSxRef("repeating-linear-gradient")}}
-  - {{CSSxRef("radial-gradient")}}
-  - {{CSSxRef("repeating-radial-gradient")}}
+- [`border`](/fr/docs/Web/CSS/border)
+- [`outline`](/fr/docs/Web/CSS/outline)
+- [`box-shadow`](/fr/docs/Web/CSS/box-shadow)
+- [`background-image`](/fr/docs/Web/CSS/background-image)
+- La fonction [`url()`](/fr/docs/Web/CSS/url())
+- Fonctions pour les dégradés&nbsp;:
+
+  - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())
+  - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient())
+  - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient())
+  - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())
+  - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient())
diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md
index 2ff8f69746..6f036cfd9b 100644
--- a/files/fr/web/css/clip-path/index.md
+++ b/files/fr/web/css/clip-path/index.md
@@ -1,21 +1,15 @@
 ---
 title: clip-path
 slug: Web/CSS/clip-path
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/clip-path
+browser-compat: css.properties.clip-path
 ---
 {{CSSRef}}
 
-La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée. La zone de rognage est un chemin défini avec une URL faisant référence à un SVG externe ou en ligne ou grâce à une fonction de forme comme [`circle()`](/fr/docs/Web/SVG/Element/circle).
+La propriété **`clip-path`** empêche une portion d'un élément d'être affichée en définissant une région de rognage. Seule une zone spécifique de l'élément sera affichée.
 
 {{EmbedInteractiveExample("pages/css/clip-path.html")}}
 
-> **Note :** La propriété `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée.
-
 ## Syntaxe
 
 ```css
@@ -27,18 +21,19 @@ clip-path: none;
 clip-path: url(resources.svg#c1);
 
 /* Valeurs de boîte */
+clip-path: border-box;
+clip-path: content-box;
 clip-path: fill-box;
-clip-path: stroke-box;
-clip-path: view-box;
 clip-path: margin-box;
-clip-path: border-box;
 clip-path: padding-box;
-clip-path: content-box;
+clip-path: stroke-box;
+clip-path: view-box;
 
-/* Valeurs géométriques            */
+/* Valeurs géométriques <basic-shape> */
 /* avec une notation fonctionnelle */
 clip-path: inset(100px 50px);
 clip-path: circle(50px at 0 100px);
+clip-path: ellipse(50px 60px at 0 10% 20%);
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
 
@@ -48,6 +43,7 @@ clip-path: padding-box circle(50px at 0 100px);
 /* Valeurs globales */
 clip-path: inherit;
 clip-path: initial;
+clip-path: revert;
 clip-path: unset;
 ```
 
@@ -55,35 +51,53 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
 
 ### Valeurs
 
-- `url()`
-  - : Une URL qui fait référence à un élément contenant le chemin de rognage.
-- `inset()`, `circle()`, `ellipse()`, `polygon()`
-  - : Une fonction {{cssxref("&lt;basic-shape&gt;")}}. Une telle forme utilise la valeur `<geometry-box>` pour déterminer la taille et la position de la forme. Si aucune boîte de géométrie n'est indiquée, c'est la boîte de bordure (`border-box`) qui sera utilisée comme boîte de réference.
+- `<clip-source>`
+  - : Une [`url()`](/fr/docs/Web/CSS/url()) qui référence un élément [SVG](/fr/docs/Web/SVG) [`<clipPath>`](/fr/docs/Web/SVG/Element/clipPath).
+
+- [`<basic-shape>`](/fr/docs/Web/CSS/basic-shape)
+
+  - : Une forme dont la taille et la position sont définies par la valeur `<geometry-box>`. Si aucune valeur de géométrie n'est fournie, `border-box` sera utilisée comme boîte de référence. La forme peut être définie avec l'une de ces valeurs&nbsp;:
+
+    - [`inset()`](/fr/docs/Web/CSS/basic-shape/inset())
+      - : Définit un rectangle.
+    - [`circle()`](/fr/docs/Web/CSS/basic-shape/circle())
+      - : Définit un cercle avec un rayon et une position.
+    - [`ellipse()`](/fr/docs/Web/CSS/basic-shape/ellipse())
+      - : Définit une ellipse avec ses deux demi-rayons et une position.
+    - [`polygon()`](/fr/docs/Web/CSS/basic-shape/polygon())
+      - : Définit un polygone en utilisant une règle de remplissage SVG et un ensemble d'arêtes.
+    - [`path()`](/fr/docs/Web/CSS/path())
+      - : Définit une forme en utilisant une règle de remplissage SVG optionnelle et une définition de chemin SVG.
+
 - `<geometry-box>`
 
-  - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec {{cssxref("border-radius")}}) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivante :
+  - : Si cette valeur est combinée avec une valeur `<basic-shape>`, elle définira la boîte de référence dans laquelle placer la forme. Si elle est utilisée seule, ce sont les bords de la boîte (ainsi que les éventuels coins arrondis définis avec [`border-radius`](/fr/docs/Web/CSS/border-radius)) qui sont utilisés comme ligne de rognage. Cette composante peut prendre les valeurs suivantes&nbsp;:
 
-    - `fill-box`
-      - : La boîte englobant (_bounding box_) est utilisée comme boîte de référence.
-    - `stroke-box`
-      - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
-    - `view-box`
-      - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut {{SVGAttr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`.
     - `margin-box`
-      - : La boîte de marge est utilisée comme boîte de référence
+      - : La [boîte de marge](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#margin-box) est utilisée comme boîte de référence.
     - `border-box`
-      - : La boîte de bordure est utilisée comme boîte de référence
+      - : La [boîte de bordure](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#border-box) est utilisée comme boîte de référence.
     - `padding-box`
-      - : La boîte de remplissage (_padding_) est utilisée comme boîte de référence
+      - : La [boîte de remplissage (<i lang="en">padding</i>)](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#padding-box) est utilisée comme boîte de référence.
     - `content-box`
-      - : La boîte de contenu est utilisée comme boîte de référence.
+      - : La [boîte de contenu](/fr/docs/Web/CSS/CSS_Shapes/From_box_values#content-box) est utilisée comme boîte de référence.
+    - `fill-box`
+      - : La boîte englobant (<i lang="en">bounding box</i>) est utilisée comme boîte de référence.
+    - `stroke-box`
+      - : La boîte de contour de la boîte englobante est utilisée comme boîte de référence.
+    - `view-box`
+      - : La zone d'affichage SVG la plus proche est utilisée comme boîte de référence. Si un attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée la zone d'affichage SVG, la boîte de référence est située à l'origine du système construit par `viewBox` et les dimensions de la boîte de référence sont les valeurs de hauteur et de largeur de l'attribut `viewBox`.
 
 - `none`
   - : Aucun chemin de rognage n'est créé.
 
-> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/Valeur_calcul%C3%A9e) est différente de `none`, cela entraînera  la création d'un nouveau [contexte d'empilement](/fr/docs/Glossaire/Contexte_d_empilement) (de la même façon qu'{{cssxref("opacity")}} avec des valeurs différentes de 1).
+> **Note :** Si [la valeur calculée](/fr/docs/Web/CSS/computed_value) est différente de `none`, cela entraînera la création d'un nouveau [contexte d'empilement](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context) (de la même façon qu'[`opacity`](/fr/docs/Web/CSS/opacity) avec des valeurs différentes de `1`).
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -107,7 +121,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="none">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -116,8 +130,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="none">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -141,7 +155,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="svg">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -150,8 +164,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="svg">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -164,7 +178,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="svg2">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -173,8 +187,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="svg2">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -188,7 +202,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape1">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -197,8 +211,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape1">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -210,7 +224,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape2">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -219,8 +233,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape2">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -232,7 +246,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape3">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -241,8 +255,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape3">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -254,7 +268,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape4">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -263,8 +277,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape4">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -276,7 +290,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape5">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -285,8 +299,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape5">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -298,7 +312,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape6">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -307,8 +321,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape6">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -320,7 +334,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape7">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -329,8 +343,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape7">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -342,7 +356,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape8">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -351,8 +365,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape8">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -364,7 +378,7 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
       <div class="cell"> <span>HTML</span>
         <div class="container">
           <p class="shape9">
-            I LOVE<br><em>clipping</em>
+            J'ADORE<br><em>le rognage</em>
           </p>
         </div>
       </div>
@@ -373,8 +387,8 @@ La propriété `clip-path` est définie avec une ou plusieurs des valeurs listé
           <svg viewBox="0 0 192 192">
             <g class="shape9">
               <rect x="24" y="24" width="144" height="144" />
-              <text x="96" y="91">I LOVE</text>
-              <text x="96" y="109" class="em">clipping</text>
+              <text x="96" y="91">J'ADORE</text>
+              <text x="96" y="109" class="em">le rognage</text>
             </g>
           </svg>
         </div>
@@ -515,14 +529,14 @@ svg text.em {
 }
 ```
 
-{{EmbedLiveSample("Comparaison_entre_HTML_et_SVG", "100%", 800, "", "", "example-outcome-frame")}}
+{{EmbedLiveSample("", "100%", 800, "", "", "example-outcome-frame")}}
 
 ### Exemple complet
 
 #### HTML
 
 ```html
-<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+<img id="clipped" src="mdn.svg"
     alt="MDN logo">
 <svg height="0" width="0">
   <defs>
@@ -562,26 +576,23 @@ clipPathSelect.addEventListener("change", function (evt) {
 
 #### Résultat
 
-{{EmbedLiveSample("Exemple_complet", 230, 250)}}
+{{EmbedLiveSample("", 230, 300)}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                         | Commentaires                                                                                                |
-| -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------- |
-| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}                 | {{Spec2('CSS Masks')}} | Extension aux élément HTML. `clip-path` remplace la propriété {{cssxref("clip")}} désormais dépréciée. |
-| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}}     | Définition initiale (s'applique uniquement aux éléments SVG)                                                |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.clip-path")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("mask")}}
-- {{cssxref("filter")}}
-- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Applying_SVG_effects_to_HTML_content)
-- [Les formes CSS, le _clipping_ et le _masking_ : comment les utiliser (article en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
-- L'attribut SVG {{SVGAttr("clip-path")}}
-- L'attribut SVG {{SVGAttr("clip-rule")}}
+- Les propriétés CSS
+  - [`mask`](/fr/docs/Web/CSS/mask)
+  - [`filter`](/fr/docs/Web/CSS/filter)
+- [Appliquer des effets SVG sur du contenu HTML](/fr/docs/Web/SVG/Applying_SVG_effects_to_HTML_content)
+- [Les formes CSS, le rognage et le masquage&nbsp;: comment les utiliser (en anglais)](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- Les attributs SVG&nbsp;:
+  - [`clip-path`](/fr/docs/Web/SVG/Attribute/clip-path)
+  - [`clip-rule`](/fr/docs/Web/SVG/Attribute/clip-rule)
diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md
index 6c2aedbb70..1e6833ad5f 100644
--- a/files/fr/web/css/content/index.md
+++ b/files/fr/web/css/content/index.md
@@ -2,34 +2,40 @@
 title: content
 slug: Web/CSS/content
 translation_of: Web/CSS/content
+browser-compat: css.properties.content
 ---
 {{CSSRef}}
 
-La propriété **`content`** est utilisée avec les pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}} afin de générer le contenu d'un élément. Les objets insérés via la propriété `content` sont des _[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)._
+La propriété [CSS](/fr/docs/Web/CSS) **`content`** remplace un élément avec une valeur générée. Les objets insérés via la propriété `content` sont des **[éléments remplacés anonymes](/fr/docs/Web/CSS/Replaced_element)**.
 
 ```css
-/* Des mots-clés qui ne peuvent pas être mélangés
-  avec d'autres valeurs */
+/* Des mots-clés qui ne peuvent pas être mélangés avec d'autres valeurs */
 content: normal;
 content: none;
 
-/* Valeurs pour une image */
+/* Valeurs pour une image (<image>) */
 content: url("http://www.example.com/test.png");
 content: linear-gradient(#e66465, #9198e5);
+content: image-set("image1x.png" 1x, "image2x.png" 2x);
+
+/* Texte alternatif pour le contenu, ajouté avec le niveau 3 de la spécification */
+content: url("http://www.example.com/test.png") / "Le texte alternatif";
 
 /* Une valeur <string>, les caractères non-latin */
 /* doivent être échappées par ex. \000A9 for &copy; */
 content: 'prefix';
 
-/* Valeurs utilisant un compteur */
+/* Valeurs utilisant un compteur, éventuellement
+   avec <list-style-type> */
 content: counter(compteur_chapitre);
-content: counter(compteur_section, ".");
+content: counter(compteur_chapitre, upper-roman);
+content: counters(compteur_section, ".");
+content: counters(compteur_section, ".", decimal-leading-zero);
 
 /* attr() lie à la valeur de l'attribut HTML */
 content: attr(value string);
 
-/* Mots-clés dépendant de langue */
-/* ou de la position             */
+/* Mots-clés dépendant de langue ou de la position */
 content: open-quote;
 content: close-quote;
 content: no-open-quote;
@@ -37,11 +43,12 @@ content: no-close-quote;
 
 /* Sauf avec normal et none, on peut utiliser */
 /* plusieurs valeurs de façon simultanée */
-content: open-quote chapter_counter;
+content: open-quote counter(compteur_chapitre);
 
 /* Valeurs globales */
 content: inherit;
 content: initial;
+content: revert;
 content: unset;
 ```
 
@@ -50,23 +57,40 @@ content: unset;
 ### Valeurs
 
 - `none`
-  - : Le pseudo-élément n'est pas généré.
+  - : Lorsque cette valeur est appliquée à un pseudo-élément, ce dernier n'est pas généré. Si elle est appliquée à un élément, la valeur n'a pas d'effet.
 - `normal`
-  - : Résulte en `none` pour les pseudo-éléments `:before` et `:after`.
-- {{cssxref("&lt;string&gt;")}}
-  - : Contenu sous forme de texte. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©).
-- {{cssxref("&lt;image&gt;")}}
-  - : Une image (valeur de type {{cssxref("&lt;image&gt;")}}) de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;gradient&gt;")}} ou une partie de la page web fournie par la fonction {{cssxref("element()", "element()")}} et qui indique le contenu à afficher.
-- `counter()` ou `counters()` (cf. {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}})
-  - : Un compteur CSS, généralement un nombre, qui peut être affiché grâce à la fonction {{cssxref("CSS_Lists_and_Counters/Using_CSS_counters")}} or {{cssxref("counters()")}}. La première possède deux formes : 'counter(_name_)' ou 'counter(_name_, _style_)'. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément ; il est formaté selon le style indiqué (`decimal` par défaut). La seconde a également deux formes : `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond séparés par la chaîne définie. Les compteurs sont formatés selon le style indiqué (`decimal` par défaut). Voir [la section sur les compteurs automatiques](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) et sur la numérotation pour plus d'informations.
+  - : Résulte en `none` pour les pseudo-éléments `::before` et `::after`.
+- [`<string>`](/fr/docs/Web/CSS/string)
+  - : Contenu qui indique le texte alternatif de l'élément. Les caractères non-latins doivent être encodés avec leur séquence d'échappement Unicode (`\000A9` représentera par exemple le symbole ©).
+- [`<image>`](/fr/docs/Web/CSS/image)
+  - : Une image (valeur de type [`<image>`](/fr/docs/Web/CSS/image)) avec une [`url()`](/fr/docs/Web/CSS/url()) ou [`<gradient>`](/fr/docs/Web/CSS/gradient) ou une partie de la page web fournie par la fonction [`element()`](/fr/docs/Web/CSS/element()) et qui indique le contenu à afficher.
+- [`counter()`](/fr/docs/Web/CSS/counter())
+  - : Un [compteur CSS](/fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters), généralement un nombre, généralement produit via les propriétés [`<counter-reset>`](/fr/docs/Web/CSS/counter-reset) et [`<counter-increment>`](/fr/docs/Web/CSS/counter-increment) et qui peut être affiché grâce à la fonction [`counter()`](/fr/docs/Web/CSS/counter()) or [`counters()`](/fr/docs/Web/CSS/counters()).
+
+    [`counter()`](/fr/docs/Web/CSS/counter()) possède deux formes&nbsp;: `counter(_name_)` ou `counter(_name_, _style_)`. Le texte généré est la valeur du compteur le plus profond possédant un nom donné dans ce pseudo-élément&nbsp;; il est formaté selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut).
+
+    [`counters()`](/fr/docs/Web/CSS/counters()) a également deux formes&nbsp;: `counters(name, string)` ou `counters(name, string, style)`. Le texte généré est la valeur de tous les compteurs d'un nom donné dans ce pseudo-élément, depuis le moins profond jusqu'au plus profond, séparés par la chaîne définie. Les compteurs sont formatés selon le style ([`<list-style-type>`](/fr/docs/Web/CSS/list-style-type) indiqué (`decimal` par défaut).
+
 - `attr(X)`
   - : Renvoie la valeur de l'attribut X de l'élément comme une chaîne. S'il n'existe pas d'attribut X, une chaîne vide est renvoyée. La sensibilité à la casse du nom de l'attribut dépend du langage utilisé.
 - `open-quote` | `close-quote`
-  - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété {{ cssxref("quotes") }}.
+  - : Ces valeurs sont remplacées par la chaîne appropriée de la propriété [`quotes`](/fr/docs/Web/CSS/quotes).
 - `no-open-quote` | `no-close-quote`
   - : N'introduit aucun contenu, mais incrémente (respectivement décrémente) le niveau d'imbrication des citations.
 
-### Syntaxe formelle
+## Accessibilité
+
+Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.
+
+- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS — Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
+- [Comprendre les critères de succès 1.3.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -74,19 +98,22 @@ content: unset;
 
 ### Titres et citations
 
+Dans cet exemple, on insère des marques de citation et le mot «&nbsp;Chapitre&nbsp;» pour chaque titre.
+
 #### HTML
 
 ```html
 <h1>5</h1>
-<p> Commençons par une citation de Sir Tim Berners-Lee,
-    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
-        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+<p>Commençons par une citation de Sir Tim Berners-Lee,
+  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+    I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>
+    We must understand that there is nothing fundamentally wrong with building on the contributions of others.
 </p>
 
 <h1>6</h1>
-<p> Citons le manifeste Mozilla
-    <q cite="http://www.mozilla.org/about/manifesto/">
-        Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.
+<p>Citons le manifeste Mozilla,
+  <q cite="https://www.mozilla.org/fr/about/manifesto/">
+    Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible.</q>
 </p>
 ```
 
@@ -94,19 +121,28 @@ content: unset;
 
 ```css
 q {
-    color: #00008B;
-    font-style: italic;
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
 }
 
-q::before   { content: open-quote }
-q::after    { content: close-quote }
+q::after {
+  content: close-quote;
+}
 
-h1::before  { content: "Chapitre "; }
+h1::before  {
+  content: "Chapter ";  
+  /* L'espace après la dernière lettre est 
+     voulu afin de détacher le mot du reste
+     du contenu */
+}
 ```
 
 #### Résultat
 
-{{EmbedLiveSample('Titres_et_citations', 460, 100)}}
+{{EmbedLiveSample('', 460, 310)}}
 
 ### Ajouter une icône avant un lien
 
@@ -120,15 +156,15 @@ h1::before  { content: "Chapitre "; }
 
 ```css
 a::before{
-    content: url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) " MOZILLA: ";
-    font:    x-small Arial,freeSans,sans-serif;
-    color:   gray;
+  content: url("mdn-favicon16.png") " MOZILLA: ";
+  font: x-small Arial, freeSans, sans-serif;
+  color: gray;
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample('Ajouter_une_icône_avant_un_lien', 200, 60)}}
+{{EmbedLiveSample('', 200, 60)}}
 
 ### Utiliser les classes
 
@@ -137,10 +173,10 @@ a::before{
 ```html
 <h2>Top des ventes</h2>
 <ol>
-    <li>Thriller politique</li>
-    <li class="nouveaute">Histoires effrayantes</li>
-    <li>Ma biographie</li>
-    <li class="nouveaute">Bit-lit</li>
+  <li>Thriller politique</li>
+  <li class="nouveaute">Histoires effrayantes</li>
+  <li>Ma biographie</li>
+  <li class="nouveaute">Bit-lit</li>
 </ol>
 ```
 
@@ -148,14 +184,14 @@ a::before{
 
 ```css
 .nouveaute::after {
-    content: " Nouveau !";
-    color: red;
+  content: " Nouveau !";
+  color: red;
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample('Utiliser_les_classes', 300, 200)}}
+{{EmbedLiveSample('', 300, 200)}}
 
 ### Utiliser les attributs d'image et d'élément
 
@@ -183,11 +219,11 @@ a::after {
 }
 
 #moz::before {
-  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico");
+  content: url("mdn-favicon16.png");
 }
 
 #mdn::before {
-  content: url("https://mozorg.cdn.mozilla.net/files/7691/mdn-favicon16.ico");
+  content: url("mdn-favicon16.png");
 }
 
 li {
@@ -197,11 +233,11 @@ li {
 
 #### Résultat
 
-{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}}
+{{EmbedLiveSample("", '100%', 160)}}
 
 ### Remplacer un élément
 
-Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une valeur de type {{cssxref("&lt;url&gt;")}} ou {{cssxref("&lt;image&gt;")}} . Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé.
+Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est possible de remplacer le contenu d'un élément avec une [`url()`](/fr/docs/Web/CSS/url()) ou une valeur de type [`<image>`](/fr/docs/Web/CSS/image). Le contenu ajouté avec `::before` ou avec `::after` ne sera plus généré car l'élément sera devenu un élément remplacé.
 
 #### HTML
 
@@ -213,7 +249,7 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p
 
 ```css
 #replaced {
-  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+  content: url("mdn.svg");
 }
 
 #replaced::after { /* Ceci ne sera pas affiché, */
@@ -224,33 +260,21 @@ Dans cet exemple, on remplace le contenu d'un élément avec une image. Il est p
 
 #### Résultat
 
-{{EmbedLiveSample('Remplacer_un_élément', '100%', 200)}}
-
-## Accessibilité
-
-Le contenu généré par CSS n'est pas inclus dans le [DOM](/fr/docs/Web/API/Document_Object_Model/Introduction). Pour cette raison, il ne fait pas partie de l'[arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) et certaines technologies d'assistances ou certains navigateurs ne permettront pas d'annoncer ce contenu. Si ce contenu porte des informations essentielles à la compréhension de la page, il faut inclure ces informations de façon sémantique dans le document principal.
-
-- [La prise en charge relative à l'accessibilité pour les contenus générés par CSS generated content – Tink (en anglais)](https://tink.uk/accessibility-support-for-css-generated-content/)
-- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways)
-- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+{{EmbedLiveSample('', '100%', 250)}}
 
 ## Spécifications
 
-| Spécification                                                                    | État                             | Commentaires         |
-| -------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName("CSS3 Content", "#content-property", "content")}} | {{Spec2("CSS3 Content")}} |                      |
-| {{SpecName('CSS2.1', 'generate.html#content', 'content')}}     | {{Spec2('CSS2.1')}}         | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.content")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("::after")}}
-- {{cssxref("::before")}}
-- {{cssxref("quotes")}}
-- {{Cssxref("::marker")}}
-- {{cssxref("url()", "url()")}}
+- [Les éléments remplacés](/fr/docs/Web/CSS/Replaced_element)
+- [`::after`](/fr/docs/Web/CSS/::after)
+- [`::before`](/fr/docs/Web/CSS/::before)
+- [`::marker`](/fr/docs/Web/CSS/::marker)
+- [`quotes`](/fr/docs/Web/CSS/quotes)
+- La fonction [`url()`](/fr/docs/Web/CSS/url())
diff --git a/files/fr/web/css/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md
index c211fd76ee..d31f0287bb 100644
--- a/files/fr/web/css/cross-fade()/index.md
+++ b/files/fr/web/css/cross-fade()/index.md
@@ -1,28 +1,27 @@
 ---
 title: cross-fade()
 slug: Web/CSS/cross-fade()
-tags:
-  - CSS
-  - Experimental
-  - Fonction
-  - Reference
 translation_of: Web/CSS/cross-fade()
+browser-compat: css.types.image.cross-fade
 ---
-{{draft}}{{CSSRef}}
+{{CSSRef}}
 
-La fonction CSS **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.
+La fonction [CSS](/fr/docs/Web/CSS) **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée.
+On peut l'utiliser pour de nombreuses manipulations d'image&nbsp;: teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial.
+
+## Syntaxe
 
 > **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles.
 
-## Syntaxe (spécification)
+### Syntaxe de la spécification
 
-La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de quotes, doit contenir le symbole « % » et être comprise entre 0% et 100%.
+La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion, en termes d'opacité, de chaque image dans le «&nbsp;mélange&nbsp;» obtenu. La valeur en pourcentage ne doit pas être entourée de guillemets, doit contenir le symbole `%` et être comprise entre 0% et 100%.
 
-Cette fonction pourra être utilisée à tout endroit où une image (cf. {{cssxref("&lt;image&gt;")}}) CSS peut être utilisée.
+Cette fonction pourra être utilisée à tout endroit où une image CSS peut être utilisée.
 
-### Utilisation des pourcentages
+#### Utilisation des pourcentages
 
-Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.
+Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque.
 
 ```css
 cross-fade(url(white.png)   0%, url(black.png) 100%); /* complètement noire */
@@ -33,9 +32,11 @@ cross-fade(url(white.png) 100%, url(black.png)   0%); /* complètement blanche *
 cross-fade(url(green.png)  75%, url(red.png)    75%); /* image avec du rouge et vert à 75% */
 ```
 
+Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient.
+
 Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%.
 
-Les lignes précédentes peuvent ainsi s'écrire également :
+Les lignes précédentes peuvent ainsi s'écrire également&nbsp;:
 
 ```css
 cross-fade(url(white.png)   0%, url(black.png)); /* complètement noire */
@@ -46,41 +47,20 @@ cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */
 cross-fade(url(green.png)  75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */
 ```
 
-Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%).
-
-### Syntaxe formelle
-
-{{csssyntax}}
+Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). Les lignes qui suivent sont (quasiment) identiques&nbsp;:
 
-## Exemples
-
-### HTML
-
-```html
-<div id="div"></div>
+```css
+cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* chacune aura 33.3333% d'opacité */
+cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);
 ```
 
-### CSS
+### Syntaxe des implémentations (plus ancienne)
 
 ```css
-#div {
-    width: 300px;
-    height: 300px;
-    background-image: cross-fade(
-        75% url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'));
-}
+cross-fade( <image>, <image>, <percentage> )
 ```
 
-### Résultat
-
-{{EmbedLiveSample("Exemples", "330", "330")}}
-
-## Ancienne syntaxe (implémentations)
-
-    cross-fade( <image, <image>, <percentage> )
-
-La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et [la syntaxe originale](#syntaxe), implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink.
+La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink.
 
 ```css
 cross-fade(url(white.png), url(black.png), 0%);   /* complètement noire */
@@ -92,26 +72,22 @@ cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */
 
 Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément.
 
-Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.
+Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150%&nbsp;: ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe.
 
-### Exemples
+## Accessibilité
 
-#### CSS
+Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par-dessus.
 
-```css
-.crossfade {
-    width: 300px;
-    height: 300px;
-    background-image: -webkit-cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-    background-image: cross-fade(
-        url('https://mdn.mozillademos.org/files/8543/br.png'),
-        url('https://mdn.mozillademos.org/files/8545/tr.png'),
-        75%);
-}
-```
+- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
+- [Comprendre les critères de succès 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## Syntaxe formelle
+
+{{csssyntax}}
+
+## Exemples
+
+### Ancienne syntaxe pour cross-fade
 
 #### HTML
 
@@ -119,33 +95,46 @@ Dans les exemples associés à la syntaxe de la spécification, on avait un cas
 <div class="crossfade"></div>
 ```
 
-#### Résultat
-
-{{EmbedLiveSample("Ancienne_syntaxe_(implémentations)", "330", "330")}}
+#### CSS
 
-## Accessibilité
+```css
+.crossfade {
+  width: 300px;
+  height: 300px;
+  background-image: -webkit-cross-fade(
+    url('br.png'),
+    url('tr.png'),
+    75%);
+  background-image: cross-fade(
+    url('br.png'),
+    url('tr.png'),
+    75%);
+}
+```
 
-Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par dessus.
+#### Résultat
 
-- [Comprendre les règles WCAG 1.1.](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content)
-- [Comprendre les critères de succès 1.1.1  pour WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+{{EmbedLiveSample("", "330", "330")}}
 
 ## Spécifications
 
-| Spécification                                                                            | État                             | Commentaires         |
-| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS4 Images', '#cross-fade-function', 'cross-fade()')}} | {{Spec2('CSS4 Images')}} | Définition initiale. |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.types.image.cross-fade")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("image")}}
-- {{cssxref("url")}}
-- {{cssxref("_image", "image()")}}
-- {{cssxref("image-set")}}
-- {{cssxref("element()")}}
-- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients "Using gradients")
-- Fonctions de création de dégradés : {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("conic-gradient", "conic-gradient()")}},
+- [`<image>`](/fr/docs/Web/CSS/image)
+- [`url()`](/fr/docs/Web/CSS/url())
+- [`image()`](/fr/docs/Web/CSS/image/image())
+- [`image-set()`](/fr/docs/Web/CSS/image/image-set())
+- [`element()`](/fr/docs/Web/CSS/element())
+- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
+- Fonctions de création de dégradés&nbsp;:
+  - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient)
+  - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient)
+  - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient)
+  - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient)
+  - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient)
diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
index b284c2f329..44a9d63373 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md
@@ -1,1592 +1,9 @@
 ---
 title: Générateur de border-radius
 slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
-tags:
-  - CSS
-  - Outil
 translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
 ---
-Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.
+Cet outil peut être utilisé afin de générer du code pour la propriété [`border-radius`](/fr/docs/Web/CSS/border-radius).
 
-## border-radius-generator
-
-```html hidden
-<div id="container">
-    <div class="group section">
-        <div id="preview" class="col span_12">
-            <div id="subject">
-                <div id="top-left" class="radius-container"
-                    data-X="left" data-Y="top">
-                </div>
-                <div id="top-right" class="radius-container"
-                    data-X="right" data-Y="top">
-                </div>
-                <div id="bottom-right" class="radius-container"
-                    data-X="right" data-Y="bottom">
-                </div>
-                <div id="bottom-left" class="radius-container"
-                    data-X="left" data-Y="bottom">
-                </div>
-
-                <div id="radius-ui-sliders">
-                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trr" class="ui-input-slider" data-topic="top-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
-                        data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
-                         data-unit=" px" data-sensivity="2"></div>
-
-                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
-                        data-unit=" px" data-sensivity="2"></div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="controls" class="group section">
-
-        <div class="group section">
-            <div id="dimensions">
-                <div class="ui-input-slider" data-topic="width" data-info="width"
-                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
-
-                <div class="ui-input-slider" data-topic="height" data-info="height"
-                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
-            </div>
-
-            <div id="output"></div>
-        </div>
-
-        <div class="group section">
-            <div id="radius-lock">
-                <div class="info"> Coins arrondis </div>
-                <div class="ui-checkbox" data-topic='top-left'></div>
-                <div class="ui-checkbox" data-topic='top-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-right'></div>
-                <div class="ui-checkbox" data-topic='bottom-left'></div>
-            </div>
-
-            <div id="unit-selection">
-                <div class="info"> Unités pour la bordure </div>
-            </div>
-        </div>
-
-    </div>
-</div>
-```
-
-```css hidden
-/*  GRID OF TEN
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider-container {
-	height: 20px;
-	margin: 10px 0;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider-container * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 3px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-/*
- * Preview Area
- */
-
-#preview {
-	height: 500px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	text-align: center;
-	overflow: hidden;
-	position: relative;
-}
-
-#preview .content {
-	width: 100%;
-	height: 100%;
-	display: block;
-}
-
-#preview input {
-	color: #333;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-}
-
-#subject {
-	width: 400px;
-	height: 150px;
-	margin: 0 auto;
-	border: 3px solid #C60;
-	background: #FFF;
-	position: relative;
-}
-
-.radius {
-	width: 50%;
-	height: 50%;
-	border: 1px solid #CCC;
-	display: none;
-	position: absolute;
-	z-index: 1;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.handle {
-	width: 16px;
-	height: 16px;
-	position: absolute;
-	z-index: 2;
-}
-
-.handle-top-left {
-	top: -12px;
-	left: -12px;
-	cursor: se-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
-}
-
-.handle-top-right {
-	top: -12px;
-	right: -12px;
-	cursor: sw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
-}
-
-.handle-bottom-right {
-	bottom: -12px;
-	right: -12px;
-	cursor: nw-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
-}
-
-.handle-bottom-left {
-	bottom: -12px;
-	left: -12px;
-	cursor: ne-resize;
-	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
-}
-
-
-.radius-container {
-	position: absolute;
-	display : block;
-	z-index: 1;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-
-/* TOP LEFT */
-#top-left {
-	top: 0;
-	left: 0;
-}
-
-#top-left .radius {
-	border-top-left-radius: 100%;
-	top: 0;
-	left: 0;
-}
-
-/* TOP RIGHT */
-#top-right {
-	top: 0;
-	right: 0;
-}
-
-#top-right .radius {
-	border-top-right-radius: 100%;
-	top: 0;
-	right: 0;
-}
-
-/* BOTTOM RIGHT */
-#bottom-right {
-	bottom: 0;
-	right: 0;
-}
-
-#bottom-right .radius {
-	border-bottom-right-radius: 100%;
-	bottom: 0;
-	right: 0;
-}
-
-/* BOTTOM lEFT */
-#bottom-left {
-	bottom: 0;
-	left: 0;
-}
-
-#bottom-left .radius {
-	border-bottom-left-radius: 100%;
-	bottom: 0;
-}
-
-/* INPUT SLIDERS */
-
-#preview .ui-input-slider {
-	margin: 10px;
-	position: absolute;
-	z-index: 10;
-}
-
-#radius-ui-sliders {
-	width: 100%;
-	height: 100%;
-	min-height: 75px;
-	min-width: 150px;
-	padding: 20px 50px;
-	top: -20px;
-	left: -50px;
-	position: relative;
-}
-
-#tlr {
-	top: -30px;
-	left: -50px;
-	display: none;
-}
-
-#tlw {
-	top: -30px;
-	left: 30px;
-}
-
-#tlh {
-	top: 20px;
-	left: -50px;
-}
-
-#trr {
-	top: -30px;
-	right: -50px;
-	display: none;
-}
-
-#trw {
-	top: -30px;
-	right: 30px;
-}
-
-#trh {
-	top: 20px;
-	right: -50px;
-}
-
-#brr {
-	bottom: -30px;
-	right: -50px;
-	display: none;
-}
-
-#brw {
-	bottom: -30px;
-	right: 30px;
-}
-
-#brh {
-	bottom: 20px;
-	right: -50px;
-}
-
-#blr {
-	bottom: -30px;
-	left: -50px;
-	display: none;
-}
-
-#blw {
-	bottom: -30px;
-	left: 30px;
-}
-
-#blh {
-	bottom: 20px;
-	left: -50px;
-}
-
-#preview .ui-input-slider-left, #preview .ui-input-slider-right {
-	visibility: hidden;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-left {
-	visibility: visible;
-}
-
-#preview .ui-input-slider-container:hover .ui-input-slider-right {
-	visibility: visible;
-}
-
-/*
- *
- */
-
-#unit-selection {
-	width: 200px;
-	height: 75px;
-	margin: 30px 30px 0 0;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: right;
-}
-
-#unit-selection .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#unit-selection .dropdown {
-	width: 50px;
-	height: 20px;
-	margin: 10px;
-	padding: 0;
-	border-radius: 3px;
-	position: absolute;
-	overflow: hidden;
-}
-
-#unit-selection select {
-	width: 50px;
-	height: 20px;
-	marign: 0;
-	padding: 0 0 0 10px;
-	background: #555;
-	border: 1px solid #555;
-	border: none;
-	color: #FFF;
-	float: left;
-}
-
-#unit-selection select option {
-	background: #FFF;
-	color: #333;
-}
-
-#unit-selection select:hover {
-	cursor: pointer;
-}
-
-#unit-selection .dropdown:before {
-	content: "";
-	width: 18px;
-	height: 20px;
-	display: block;
-	background-color: #555;
-	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-	top: 0px;
-	right: 0px;
-	position: absolute;
-	z-index: 1;
-	pointer-events: none;
-}
-
-#unit-selection .unit-top-left {
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-left-w {
-	top: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-top-left-h {
-	top: 20px;
-	left: -37px;
-}
-
-#unit-selection .unit-top-right {
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-top-right-w {
-	top: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-top-right-h {
-	top: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-right {
-	bottom: 0;
-	right: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-right-w {
-	bottom: -22px;
-	right: 30px;
-}
-
-#unit-selection .unit-bottom-right-h {
-	bottom: 20px;
-	right: -37px;
-}
-
-#unit-selection .unit-bottom-left {
-	bottom: 0;
-	left: 0;
-	display: none;
-}
-
-#unit-selection .unit-bottom-left-w {
-	bottom: -22px;
-	left: 30px;
-}
-
-#unit-selection .unit-bottom-left-h {
-	bottom: 20px;
-	left: -37px;
-}
-
-/******************************************************************************/
-/******************************************************************************/
-
-
-#radius-lock {
-	width: 200px;
-	height: 75px;
-	margin: 30px 0 0 30px;
-	padding: 30px;
-	border: 3px solid #555;
-	border-radius: 10px;
-	position: relative;
-	float: left;
-}
-
-#radius-lock .ui-checkbox {
-	color: #FFF;
-	position: absolute;
-}
-
-#radius-lock .ui-checkbox > label {
-	height: 20px;
-	width: 34px;
-	padding: 0;
-}
-
-#radius-lock .info {
-	height: 20%;
-	width: 100%;
-	line-height: 20%;
-	font-size: 20px;
-	text-align: center;
-	position: relative;
-	top: 40%;
-}
-
-#radius-lock [data-topic="top-left"] {
-	top: 10px;
-	left: 10px;
-}
-
-#radius-lock [data-topic="top-right"] {
-	top: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-right"] {
-	bottom: 10px;
-	right: 10px;
-}
-
-#radius-lock [data-topic="bottom-left"] {
-	bottom: 10px;
-	left: 10px;
-}
-
-/**
- * Controls
- */
-
-#dimensions {
-	width: 200px;
-	color: #444;
-	float:left;
-}
-
-#dimensions input {
-	background: #555;
-	color: #FFF;
-	border: none;
-	border-radius: 3px;
-}
-
-#output {
-	width: 500px;
-	padding: 10px 0;
-	margin: 10px 0;
-	color: #555;
-	text-align: center;
-	border: 1px dashed #999;
-	border-radius: 3px;
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-
-	float: right;
-}
-```
-
-```js hidden
-'use strict';
-
-
-/**
- * UI-InputSliderManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseInt(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		subscribe(obj.topic, function(value) {
-			input.value = value + obj.unit;
-		});
-
-		return input;
-	}
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		document.addEventListener("mouseup", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		});
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		}
-
-		return slider;
-	}
-
-	var InputSlider = function(node) {
-		var min		= node.getAttribute('data-min') | 0;
-		var max		= node.getAttribute('data-max') | 0;
-		var step	= node.getAttribute('data-step') | 0;
-		var value	= node.getAttribute('data-value') | 0;
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-
-		this.min = min;
-		this.max = max > 0 ? max : 100;
-		this.step = step === 0 ? 1 : step;
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-		node.className = 'ui-input-slider ui-input-slider-container';
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	}
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		if (send_notify !== undefined && send_notify === false) {
-			slider.input.value = value + slider.unit;
-			return;
-		}
-
-		notify.call(slider);
-	}
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	}
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	}
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	}
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	}
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		getNode : getNode,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	}
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	}
-
-	var setValue = function setValue(topic, value) {
-		try {
-			buttons[topic].checkbox.checked = value;
-		}
-		catch(error) {
-			console.log(error);
-		}
-	}
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	}
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	}
-
-	var notify = function notify() {
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	}
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	}
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	}
-
-})();
-
-
-window.addEventListener("load", function() {
-	BorderRadius.init();
-});
-
-var BorderRadius = (function BorderRadius() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	/**
-	 * Shadow dragging
-	 */
-	var PreviewMouseTracking = (function Drag() {
-		var active = false;
-		var lastX = 0;
-		var lastY = 0;
-		var subscribers = [];
-
-		var init = function init(id) {
-			var elem = getElemById(id);
-			elem.addEventListener('mousedown', dragStart, false);
-			document.addEventListener('mouseup', dragEnd, false);
-		}
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			active = true;
-			lastX = e.clientX;
-			lastY = e.clientY;
-			document.addEventListener('mousemove', mouseDrag, false);
-		}
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			if (active === true) {
-				active = false;
-				document.removeEventListener('mousemove', mouseDrag, false);
-			}
-		}
-
-		var mouseDrag = function mouseDrag(e) {
-			notify(e.clientX - lastX, e.clientY - lastY);
-			lastX = e.clientX;
-			lastY = e.clientY;
-		}
-
-		var subscribe = function subscribe(callback) {
-			subscribers.push(callback);
-		}
-
-		var unsubscribe = function unsubscribe(callback) {
-			var index = subscribers.indexOf(callback);
-			subscribers.splice(index, 1);
-		}
-
-		var notify = function notify(deltaX, deltaY) {
-			for (var i in subscribers)
-				subscribers[i](deltaX, deltaY);
-		}
-
-		return {
-			init : init,
-			subscribe : subscribe,
-			unsubscribe : unsubscribe
-		}
-
-	})();
-
-	var subject;
-	var units = ['px', '%'];
-	var output = null;
-
-	var UnitSelector = function UnitSelector(topic) {
-
-		this.container = document.createElement("div");
-		this.select = document.createElement("select");
-		for (var i in units) {
-			var option = document.createElement("option");
-			option.value = i;
-			option.textContent = units[i];
-			this.select.appendChild(option);
-		}
-
-		this.container.className = 'dropdown ' + 'unit-' + topic;
-		this.container.appendChild(this.select);
-	}
-
-	UnitSelector.prototype.setValue = function setValue(value) {
-		this.salect.value = value;
-	}
-
-
-	var RadiusContainer = function RadiusContainer(node) {
-		var radius = document.createElement('div');
-		var handle = document.createElement('div');
-		var x = node.getAttribute('data-x');
-		var y = node.getAttribute('data-y');
-		var active = false;
-
-		this.id = node.id;
-		this.node = node;
-		this.radius = radius;
-		this.handle = handle;
-		this.width = 100;
-		this.height = 50;
-		this.size = 0;
-		this.rounded = false;
-
-		this.unitX = 0;
-		this.unitY = 0;
-		this.unitR = 0;
-
-		this.maxW = 100;
-		this.maxH = 100;
-		this.maxR = 100;
-
-		this.topic = y + '-' + x;
-
-		var sliderW = InputSliderManager.getNode(this.topic + '-w');
-		var sliderH = InputSliderManager.getNode(this.topic + '-h');
-		var sliderR = InputSliderManager.getNode(this.topic);
-
-		this.setUnitX(this.unitX);
-		this.setUnitY(this.unitY);
-		this.setUnitR(this.unitR);
-
-		this.updateWidth();
-		this.updateHeight();
-		this.updateRadius();
-
-		if (x === 'left')	this.resizeX =  1;
-		if (x === 'right')	this.resizeX = -1;
-		if (y === 'top')	this.resizeY =  1;
-		if (y === 'bottom')	this.resizeY = -1;
-
-		radius.className = 'radius';
-
-		var unit_selector = document.getElementById("unit-selection");
-		var unitW = new UnitSelector(this.topic + '-w');
-		var unitH = new UnitSelector(this.topic + '-h');
-		var unitR = new UnitSelector(this.topic);
-
-		unit_selector.appendChild(unitW.container);
-		unit_selector.appendChild(unitH.container);
-		unit_selector.appendChild(unitR.container);
-		node.appendChild(radius);
-		subject.appendChild(handle);
-
-		unitW.select.addEventListener('change', function(e) {
-			this.setUnitX(e.target.value | 0);
-		}.bind(this));
-
-		unitH.select.addEventListener('change', function(e) {
-			this.setUnitY(e.target.value | 0);
-		}.bind(this));
-
-		unitR.select.addEventListener('change', function(e) {
-			this.setUnitR(e.target.value | 0);
-		}.bind(this));
-
-		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
-		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
-		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
-		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
-
-		handle.addEventListener("mousedown", function(e) {
-			active = true;
-			this.radius.style.display = 'block';
-			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		document.addEventListener("mouseup", function(e) {
-			this.radius.style.display = 'none';
-			if (active === true)
-				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
-		}.bind(this));
-
-		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
-		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
-		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
-
-		ButtonManager.subscribe(this.topic, function(value) {
-			this.rounded = value;
-			if (value === true) {
-				unitW.container.style.display = 'none';
-				unitH.container.style.display = 'none';
-				unitR.container.style.display = 'block';
-				sliderW.style.display = 'none';
-				sliderH.style.display = 'none';
-				sliderR.style.display = 'block';
-				this.setUnitR(this.unitR);
-				this.updateRadius();
-			}
-
-			if (value === false) {
-				unitW.container.style.display = 'block';
-				unitH.container.style.display = 'block';
-				unitR.container.style.display = 'none';
-				sliderW.style.display = 'block';
-				sliderH.style.display = 'block';
-				sliderR.style.display = 'none';
-				this.setUnitX(this.unitX);
-				this.setUnitY(this.unitY);
-				this.updateWidth();
-				this.updateHeight();
-			}
-
-			this.updateBorderRadius();
-
-		}.bind(this));
-
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.updateWidth = function updateWidth() {
-		this.node.style.width = this.width + units[this.unitX];
-		var value = Math.round(this.width / 2);
-		InputSliderManager.setValue(this.topic + '-w', value, false);
-	}
-
-	RadiusContainer.prototype.updateHeight = function updateHeight() {
-		this.node.style.height = this.height + units[this.unitY];
-		var value = Math.round(this.height / 2);
-		InputSliderManager.setValue(this.topic + '-h', value, false);
-	}
-
-	RadiusContainer.prototype.updateRadius = function updateRadius() {
-		var value = Math.round(this.size / 2);
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		InputSliderManager.setValue(this.topic, value, false);
-	}
-
-	RadiusContainer.prototype.setWidth = function setWidth(value) {
-		this.radius.style.display = 'block';
-		this.width = 2 * value;
-		this.node.style.width = this.width + units[this.unitX];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setHeight = function setHeight(value) {
-		this.radius.style.display = 'block';
-		this.height = 2 * value;
-		this.node.style.height = this.height + units[this.unitY];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setRadius = function setRadius(value) {
-		this.radius.style.display = 'block';
-		this.size = 2 * value;
-		this.node.style.width = this.size + units[this.unitR];
-		this.node.style.height = this.size + units[this.unitR];
-		this.updateBorderRadius();
-	}
-
-	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
-		this.unitX = value;
-		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
-		if (this.unitX === 1) this.maxW = 200;
-		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
-		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
-	}
-
-	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
-		this.unitY = value;
-		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
-		if (this.unitY === 1) this.maxH = 200;
-		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
-		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
-	}
-
-	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
-		this.unitR = value;
-
-		if (this.unitR === 0)
-			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
-
-		if (this.unitR === 1)
-			this.maxR = 200;
-
-		InputSliderManager.setUnit(this.topic, units[this.unitR]);
-		InputSliderManager.setMax(this.topic, this.maxR / 2);
-	}
-
-	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
-		if (this.rounded) {
-			this.setUnitR(this.unitR);
-			return;
-		}
-
-		if (unit === 0)
-			this.setUnitX(this.unitX);
-
-		if (unit === 1)
-			this.setUnitY(this.unitY);
-	}
-
-	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
-
-		if (this.rounded === true) {
-			var unit = units[this.unitR];
-			var value = Math.round(this.size / 2);
-			return value + unit;
-		}
-
-		var unitX = units[this.unitX];
-		var unitY = units[this.unitY];
-		var valueX = Math.round(this.width / 2);
-		var valueY = Math.round(this.height / 2);
-
-		if (valueX === valueY && this.unitX === this.unitY)
-			return valueX + unitX;
-
-		return valueX + unitX + ' ' + valueY + unitY;
-	}
-
-	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
-		var radius = this.composeBorderRadius();
-		var corner = 0;
-
-		if (this.topic === 'top-left') {
-			subject.style.borderTopLeftRadius = radius;
-			corner = 0;
-		}
-
-		if (this.topic === 'top-right') {
-			subject.style.borderTopRightRadius = radius;
-			corner = 1;
-		}
-
-		if (this.topic === 'bottom-right') {
-			subject.style.borderBottomRightRadius = radius;
-			corner = 2;
-		}
-
-		if (this.topic === 'bottom-left') {
-			subject.style.borderBottomLeftRadius = radius;
-			corner = 3;
-		}
-
-		Tool.updateOutput(corner, radius);
-	}
-
-	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
-
-		if (this.rounded === true) {
-			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
-			if (this.size < 0)	this.size = 0;
-			if (this.size > this.maxR)	this.size = this.maxR;
-			this.updateRadius();
-			this.updateBorderRadius();
-			return;
-		}
-
-		if (deltaX) {
-			this.width += this.resizeX * deltaX;
-			if (this.width < 0)	this.width = 0;
-			if (this.width > this.maxW)	this.width = this.maxW;
-			this.updateWidth();
-		}
-
-		if (deltaY) {
-			this.height += this.resizeY * deltaY;
-			if (this.height < 0) this.height = 0;
-			if (this.height > this.maxH)	this.height = this.maxH;
-			this.updateHeight();
-		}
-
-		if (deltaX || deltaY)
-			this.updateBorderRadius();
-	}
-
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview;
-		var preview_ui;
-		var radius_containers = [];
-		var border_width = 3;
-		var borders1 = [null, null, null, null];
-		var borders2 = [0, 0, 0, 0];
-
-		var updateUIWidth = function updateUIWidth(value) {
-			var pwidth = subject.parentElement.clientWidth;
-			var left = (pwidth - value) / 2;
-			subject.style.width = value + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(0);
-		}
-
-		var updateUIHeight = function updateUIHeight(value) {
-			var pheight = subject.parentElement.clientHeight;
-			var top = (pheight - value) / 2;
-			subject.style.height = value + "px";
-			subject.style.top = top - border_width + "px";
-
-			for (var i = 0; i < 4; i++)
-				radius_containers[i].updateUnits(1);
-		}
-
-		var updatePreviewUIWidth = function updatePreviewUIWidth() {
-			var p = subject.parentElement.clientWidth;
-			var v = preview_ui.clientWidth;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.left = (p - v) / 2 + "px" ;
-		}
-
-		var updatePreviewUIHeight = function updatePreviewUIHeight() {
-			var p = subject.parentElement.clientHeight;
-			var v = preview_ui.clientHeight;
-			console.log(p, v, (p - v ) / 2);
-			preview_ui.style.top = (p - v) / 2 + "px" ;
-		}
-
-		var updateOutput = function updateOutput(corner, radius) {
-			var values = radius.split(" ");
-
-			borders1[corner] = values[0];
-			borders2[corner] = values[0];
-
-			if (values.length === 2)
-				borders2[corner] = values[1];
-
-			var border_1_value = borders1.join(" ");
-			var border_2_value = borders2.join(" ");
-			var border_radius = 'border-radius: ' + border_1_value;
-
-			if (border_2_value !== border_1_value)
-				border_radius += ' / ' + border_2_value;
-
-			border_radius += ';';
-			output.textContent = border_radius;
-		}
-
-		var init = function init() {
-			preview = getElemById("preview");
-			subject = getElemById("subject");
-			output = getElemById("output");
-			preview_ui = getElemById("radius-ui-sliders");
-
-			var elem = document.querySelectorAll('.radius-container');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				radius_containers[i] = new RadiusContainer(elem[i]);
-
-			InputSliderManager.subscribe("width", updateUIWidth);
-			InputSliderManager.subscribe("height", updateUIHeight);
-
-			InputSliderManager.setValue("width", subject.clientWidth);
-			InputSliderManager.setValue("height", subject.clientHeight);
-		}
-
-		return {
-			init : init,
-			updateOutput : updateOutput
-		}
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		ButtonManager.init();
-		InputSliderManager.init();
-		PreviewMouseTracking.init("preview");
-		Tool.init();
-	}
-
-	return {
-		init : init
-	}
-
-})();
-```
-
-{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}
+{{EmbedGHLiveSample("css-examples/tools/border-radius-generator/", '100%', 900)}}
diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
index 62d06d5d45..6d3cc49836 100644
--- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
+++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md
@@ -6,9 +6,9 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-p
 ---
 {{CSSRef}}
 
-Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.
+Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus «&nbsp;haut&nbsp;» dans la pile et le dernier étant le plus «&nbsp;bas&nbsp;». Seul le dernier arrière-plan peut décrire une couleur.
 
-Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :
+Pour cela, il suffit d'utiliser une liste de valeur avec [`background`](/fr/docs/Web/CSS/background)&nbsp;:
 
 ```css
 .maClasse {
@@ -16,38 +16,37 @@ Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("b
 }
 ```
 
-Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.
+Cela fonctionne aussi bien avec la propriété raccourcie [`background`](/fr/docs/Web/CSS/background) qu'avec les propriétés détaillées, exception faite de [`background-color`](/fr/docs/Web/CSS/background-color). On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes&nbsp;: [`background`](/fr/docs/Web/CSS/background), [`background-attachment`](/fr/docs/Web/CSS/background-attachment), [`background-clip`](/fr/docs/Web/CSS/background-clip), [`background-image`](/fr/docs/Web/CSS/background-image), [`background-origin`](/fr/docs/Web/CSS/background-origin), [`background-position`](/fr/docs/Web/CSS/background-position), [`background-repeat`](/fr/docs/Web/CSS/background-repeat), [`background-size`](/fr/docs/Web/CSS/background-size).
 
 ## Exemples
 
-Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.
+Dans cet exemple, on cumule trois arrière-plans&nbsp;: le logo de Firefox, une image de bulles et un dégradé linéaire (cf. [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient())).
+
+### HTML
+
+```html
+<div class="multi-bg-example"></div>
+```
 
 ### CSS
 
 ```css
-.exemple_multi_ar {
+.multi-bg-example {
   width: 100%;
   height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-image: url(firefox.png), url(bubbles.png), 
+                    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
   background-repeat: no-repeat, no-repeat, no-repeat;
   background-position: bottom right, left, right;
 }
 ```
 
-### HTML
-
-```html
-<div class="exemple_multi_ar"></div>
-```
-
 ### Résultat
 
-{{EmbedLiveSample('Exemples','100%','400')}}
-
-Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).
+{{EmbedLiveSample('','100%','440')}}
 
-> **Note :** Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton _Tidy_ de la section CSS.
+Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en haut, il est suivi par les bulles puis par le dégradé. Chacune des propriétés ([`background-repeat`](/fr/docs/Web/CSS/background-repeat) et [`background-position`](/fr/docs/Web/CSS/background-position)) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).
 
 ## Voir aussi
 
-- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS)
+- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md
index 48f6374f00..8fc173d8ac 100644
--- a/files/fr/web/css/css_images/using_css_gradients/index.md
+++ b/files/fr/web/css/css_images/using_css_gradients/index.md
@@ -6,11 +6,15 @@ original_slug: Web/CSS/Utilisation_de_dégradés_CSS
 ---
 {{CSSRef}}
 
-Les **dégradés CSS** sont représentés par le type de donnée {{cssxref("&lt;gradient&gt;")}} qui est un sous-ensemble du type {{cssxref("&lt;image&gt;")}}. L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de degradés : les dégradés linéaires (cf. {{cssxref("linear-gradient")}}, les dégradés radiaux (cf. {{cssxref("radial-gradient")}}) et les dégradés coniques (cf. {{cssxref("conic-gradient")}}).
+Les **dégradés CSS** sont représentés par le type de donnée [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un sous-ensemble du type [`<image>`](/fr/docs/Web/CSS/image). L'utilisation de dégradés CSS permet d'afficher des transitions douces entre deux couleurs ou plus. Il existe trois sortes de dégradés&nbsp;:
 
-Les dégradés peuvent être répétés avec {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}}.
+- Les dégradés linéaires (créés avec la fonction [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient())),
+- Les dégradés radiaux (créés avec la fonction [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())),
+- Les dégradés coniques (créés avec la fonction [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())).
 
-Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). En évitant d'utiliser des images pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.
+Les dégradés peuvent être répétés avec les fonctions respectives [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()).
+
+Les dégradés peuvent être utilisés à chaque endroit où on peut utiliser une image (par exemple les arrière-plans). Les dégradés étant générés dynamiquement, ils permettent d'éviter d'utiliser des images matricielles pour ces effets, le temps de téléchargement et la bande passante utilisée sont réduits. En outre, comme le dégradé est généré par le navigateur, les objets concernés se comporteront mieux en cas de zoom et votre mise en page peut être ajustée de manière plus flexible.
 
 Dans cet article, nous verrons d'abord les dégradés linéaires et détaillerons les fonctionnalités associées avant de passer aux dégradés radiaux, coniques et à leurs formes répétées.
 
@@ -18,15 +22,21 @@ Dans cet article, nous verrons d'abord les dégradés linéaires et détailleron
 
 Pour créer un dégradé linéaire, définissez un point de départ et une direction (sous la forme d'un angle) selon laquelle l'effet de dégradé sera appliqué.
 
-### Dégradés linéaires simples
+### Un dégradé linéaire simple
+
+Pour définir un dégradé sous sa forme la plus simple, il suffit d'avoir deux couleurs. Celles-ci permettent de placer ce qu'on appellera des arrêts de couleur (<i lang="en">color stops</i> en anglais). Il est nécessaire d'en avoir au moins deux, mais il est possible d'en avoir plus.
 
-Voici un dégradé linéaire qui commence au centre (horizontalement) et en haut (verticalement), du bleu vers le blanc.
+#### HTML
+
+```html
+<div class="lineaire-simple"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
-  background: linear-gradient(blue, white);
+.lineaire-simple {
+  background: linear-gradient(blue, pink);
 }
 
 div {
@@ -35,23 +45,25 @@ div {
 }
 ```
 
-#### HTML
+#### Résultat
 
-```html
-<div class="linear-gradient"></div>
-```
+{{EmbedLiveSample("",150,150)}}
 
-#### Résultat
+### Changer la direction
 
-{{EmbedLiveSample("Dégradés_linéaires_simples",120,120)}}
+Par défaut, les dégradés linéaires vont du haut vers le bas. Il est possible de changer leur orientation en indiquant une direction.
 
-### Appliquer un dégradé de gauche à droite
+#### HTML
+
+```html
+<div class="degrade-horizontal"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
-  background: linear-gradient(to right, blue, white);
+.degrade-horizontal {
+  background: linear-gradient(to right, blue, pink);
 }
 
 div {
@@ -60,23 +72,25 @@ div {
 }
 ```
 
-#### HTML
-
-```html
-<div class="linear-gradient"></div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Appliquer_un_dégradé_de_gauche_à_droite",120,120)}}
+{{EmbedLiveSample("",150,150)}}
 
 ### Appliquer un dégradé en diagonale
 
+Il est également possible d'orienter le dégradé sur une diagonale allant d'un coin à un autre.
+
+#### HTML
+
+```html
+<div class="degrade-diagonal"></div>
+```
+
 #### CSS
 
 ```css
-.linear-gradient {
-  background: linear-gradient(to bottom right, blue, white);
+.degrade-diagonal {
+  background: linear-gradient(to bottom right, blue, pink);
 }
 
 div {
@@ -85,24 +99,24 @@ div {
 }
 ```
 
-#### HTML
+#### Résultat
 
-```html
-<div class="linear-gradient"></div>
-```
+{{EmbedLiveSample("",200,130)}}
 
-#### Résultat
+### Utilisation d'angles
 
-{{EmbedLiveSample("Appliquer_un_dégradé_en_diagonale",200,100)}}
+Si on veut choisir plus précisément la direction, on pourra fournir un angle au dégradé.
 
-### Utilisation d’angles
+#### HTML
 
-Si aucun angle n'est spécifié, il sera déterminé automatiquement à partir de la position de départ. Si vous désirez un meilleur contrôle sur la direction du dégradé, vous pouvez définir cet angle précisément.
+```html
+<div class="degrade-angulaire"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
+.degrade-angulaire {
   background: linear-gradient(70deg, blue, pink);
 }
 
@@ -112,34 +126,32 @@ div {
 }
 ```
 
-#### HTML
-
-```html
-<div class="linear-gradient"></div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Utilisation_d’angles",120,120)}}
+{{EmbedLiveSample("",150,150)}}
 
-L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens inverse des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite :
+L'angle est spécifié entre une ligne verticale et la ligne de dégradé, dans le sens des aiguilles d'une montre. Autrement dit, `0deg` crée un dégradé vertical de bas en haut, tandis que `90deg` génère un dégradé horizontal de la gauche vers la droite. Les valeurs négatives font progresser l'angle dans le sens inverse des aiguilles d'une montre&nbsp;:
 
 ![](linear_red_angles.png)
 
-```css
-background: linear-gradient(<angle>, red, white);
-```
-
 ## Créer des effets et manipuler les couleurs
 
+L'ensemble des types de dégradés CSS sont décrits par une suite de couleurs avec chacune une position. Les couleurs produites par les dégradés CSS peuvent varier progressivement selon un axe et créer des transitions douces. Il est aussi possible de créer des bandes de couleurs avec des transitions vives entre deux couleurs. Ce qui suit est valable pour l'ensemble des fonctions de dégradés&nbsp;:
+
 ### Utiliser plus de deux couleurs
 
-Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité :
+Les dégradés CSS ne sont pas limités à deux couleurs, il est possible d'en utiliser autant que souhaité. Par défaut, les couleurs sont espacées de façon homogène&nbsp;:
+
+#### HTML
+
+```html
+<div class="degrade-espacement-auto"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
+.degrade-espacement-auto {
   background: linear-gradient(red, yellow, blue, orange);
 }
 
@@ -149,24 +161,24 @@ div {
 }
 ```
 
-#### HTML
-
-```html
-<div class="linear-gradient"></div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Utiliser_plus_de_deux_couleurs",120,120)}}
+{{EmbedLiveSample("",150,150)}}
 
 ### Arrêts de couleurs
 
-Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme d'un pourcentage de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée ; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré.
+Les arrêts de couleurs sont des points sur la ligne de dégradé qui doivent avoir une couleur précise. Leur emplacement peut être spécifié sous la forme de zéro, un ou deux pourcentages de la longueur de la ligne, ou d'une longueur absolue. Vous pouvez en spécifier autant que vous voulez pour obtenir l'effet désiré. Si vous spécifiez un pourcentage, `0%` indique le point de départ, et `100%` le point d'arrivée&nbsp;; il est cependant possible d'utiliser des valeurs en dehors de cet intervalle si nécessaire pour obtenir l'effet désiré. Si une position n'est pas définie, la position de cet arrêt de couleur sera automatiquement calculée (par défaut le premier arrêt est situé à 0%, le dernier à 100% et les autres répartis de façon homogène par rapport à leurs voisins).
+
+#### HTML
+
+```html
+<div class="degrade-multicolore"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
+.degrade-multicolore {
   background: linear-gradient(to left, lime, lime 28px, red 77%, cyan);
 }
 
@@ -176,108 +188,74 @@ div {
 }
 ```
 
-#### HTML
-
-```html
-<div class="linear-gradient"></div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Arrêts_de_couleurs",120,120)}}
+{{EmbedLiveSample("",150,150)}}
 
-Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas.
+### Créer des lignes franches
 
-### Utiliser des indications de couleurs
+Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%`&nbsp;:
 
-Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.
+#### HTML
+
+```html
+<div class="ligne-franche"></div>
+```
 
 #### CSS
 
 ```css
 div {
-  width:120px;
+  width: 120px;
   height: 120px;
-  float: left;
-  margin-right: 10px;
 }
 
-.color-hint {
-  background: linear-gradient(blue, 10%, pink);
-}
-
-.simple-linear {
-  background: linear-gradient(blue, pink);
+.ligne-franche {
+  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
 }
 ```
 
-#### HTML
-
-```html
-<div class="color-hint"></div>
-<div class="simple-linear"></div>
-```
-
 #### Résultat
 
-{{EmbedLiveSample("Utiliser_des_indications_de_couleurs",120,120)}}
-
-### Transparence et dégradés
+{{EmbedLiveSample("", 150, 150)}}
 
-Les gradients gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple :
-
-#### CSS
-
-```css
-.linear-gradient {
-  background: linear-gradient(to right, transparent, mistyrose),
-    url("https://mdn.mozillademos.org/files/15525/critters.png");
-}
+### Utiliser des indications de couleurs
 
-div {
-  width: 300px;
-  height: 150px;
-}
-```
+Par défaut, les dégradés passent linéairement d'une couleur à une autre. On peut également utiliser une indication afin de définir l'emplacement où la couleur médiane sera atteinte. Dans l'exemple qui suit, plutôt que d'attendre la moitié de la transition au milieu, on la place à 10% de l'axe.
 
 #### HTML
 
 ```html
-<div class="linear-gradient"></div>
+<div class="indication-couleur"></div>
+<div class="degrade-lineaire"></div>
 ```
 
-#### Résultat
-
-{{EmbedLiveSample("Transparence_et_dégradés",300,150)}}
-
-Les fonds sont superposés avec le premier fond spécifié au dessus, et chaque fond supplémentaire par dessous.
-
-### Créer des lignes franches
-
-Pour créer une ligne franche entre deux couleurs et avoir deux bandes plutôt qu'un dégradé progressif, on peut définir deux points d'arrêt de couleur au même endroit. Dans l'exemple suivant, on a deux couleurs pour un même emplacement de point d'arrêt situé à `50%`:
-
-```html hidden
-<div class="striped"></div>
-```
+#### CSS
 
-```css hidden
+```css
 div {
   width: 120px;
   height: 120px;
+  float: left;
+  margin-right: 10px;
 }
-```
 
-```css
-.striped {
-   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+.indication-couleur {
+  background: linear-gradient(blue, 10%, pink);
+}
+
+.degrade-lineaire {
+  background: linear-gradient(blue, pink);
 }
 ```
 
-{{EmbedLiveSample('Créer_des_lignes_franches', 120, 120)}}
+#### Résultat
+
+{{EmbedLiveSample("",150,150)}}
 
 ### Créer des bandes de couleur
 
-Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successif avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.
+Pour inclure une bande d'une couleur donnée, sans transition au sein du dégradé, on utilisera deux points d'arrêt successifs avec la même couleur. Ainsi, la couleur sera atteinte au premier point d'arrêt puis sera conservée jusqu'au suivant.
 
 ```html hidden
 <div class="multiposition-stops"></div>
@@ -288,31 +266,35 @@ Pour inclure une bande d'une couleur donnée, sans transition au sein du dégrad
 div {
   width: 120px;
   height: 120px;
-  float: left; margin-right: 10px; box-sizing: border-box;
+  float: left;
+  margin-right: 10px;
+  box-sizing: border-box;
 }
 ```
 
 ```css
 .multiposition-stops {
-   background: linear-gradient(to left,
-       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
-   background: linear-gradient(to left,
-       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+  background: linear-gradient(to left,
+      lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+  background: linear-gradient(to left,
+      lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
 }
 .multiposition-stop2 {
-   background: linear-gradient(to left,
+  background: linear-gradient(to left,
       lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
-   background: linear-gradient(to left,
+  background: linear-gradient(to left,
       lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
 }
 ```
 
-{{EmbedLiveSample('Créer_des_bandes_de_couleur', 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 Dans le premier exemple ci-avant, le bleu vert commence au début puis progresse jusqu'à 20% avant de transitionner vers le rouge pendant les 10% qui suivent. Le rouge reste vif entre 30% et 45% avant de transitionner vers un cyan pendant 15% etc.
 
 Dans le deuxième exemple, le deuxième point d'arrêt pour chaque couleur est situé au même emplacement que le premier point d'arrêt pour la couleur suivante et on obtient donc des bandes successives.
 
+Dans les deux exemples, le dégradé est écrit deux fois&nbsp;: la première correspond à la méthode décrite par la spécification CSS de niveau 3 pour répéter les couleurs des arrêts et la seconde correspond à la méthode de la spécification CSS de niveau 4 pour inclure deux longueurs.
+
 ### Contrôler la progression du dégradé
 
 Par défaut, un dégradé progresse linéairement entre les deux couleurs et la couleur médiane est atteinte à la moitié du parcours. Toutefois, si on veut atteindre cette couleur médiane plus tôt ou plus tard, on peut fournir une indication permettant de définir l'emplacement du milieu de la transition. Dans l'exemple qui suit, la couleur est à la moitié de la transition entre le vert et le cyan à 20% du dégradé (et non à 50%). Le deuxième exemple ne contient pas de telle indication et la transition s'effectue linéairement. Vous pouvez ainsi observer l'impact d'une telle indication.
@@ -325,86 +307,116 @@ Par défaut, un dégradé progresse linéairement entre les deux couleurs et la
 div {
   width: 120px;
   height: 120px;
-  float: left; margin-right: 10px; box-sizing: border-box;
+  float: left;
+  margin-right: 10px;
+  box-sizing: border-box;
 }
 ```
 
 ```css
 .colorhint-gradient {
-  background: linear-gradient(to top, black, 20%, cyan);
+  background: linear-gradient(to top, lime, 20%, cyan);
 }
 .regular-progression {
-  background: linear-gradient(to top, black, cyan);
+  background: linear-gradient(to top, lime, cyan);
 }
 ```
 
-{{EmbedLiveSample("Contrôler_la_progression_du_dégradé", 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
-### Empilement de dégradés
+### Transparence et dégradés
+
+Les dégradés gèrent la transparence. Vous pouvez l'utiliser, par exemple, en superposant plusieurs fonds pour créer des effets sur les images. Par exemple&nbsp;:
 
-Il est possible d' « empiler » différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.
+#### HTML
+
+```html
+<div class="superposition"></div>
+```
 
 #### CSS
 
 ```css
-.linear-gradient {
-  background:
-    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
-    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
-    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+.superposition {
+  background: linear-gradient(to right, transparent, mistyrose),
+    url("critters.png");
 }
 
 div {
-  width: 100px;
-  height: 100px;
+  width: 300px;
+  height: 150px;
 }
 ```
 
+#### Résultat
+
+{{EmbedLiveSample("",300,180)}}
+
+### Empilement de dégradés
+
+Il est possible d'empiler différents dégradés. Il suffit que les dégradés sur les couches supérieures ne soient pas complètement opaques pour qu'on puisse voir ceux des couches inférieures.
+
 #### HTML
 
 ```html
 <div class="linear-gradient"></div>
 ```
 
+#### CSS
+
+```css
+.linear-gradient {
+  background:
+    linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+div {
+  width: 200px;
+  height: 200px;
+}
+```
+
 #### Résultat
 
-{{EmbedLiveSample("Empilement_de_dégradés")}}
+{{EmbedLiveSample("",230,230)}}
 
 ## Dégradés radiaux
 
-Les dégradés radiaux sont similaire aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.
+Les dégradés radiaux sont similaires aux dégradés linéaires mais permettent d'obtenir un effet qui rayonne à partir d'un point. Il est possible de créer des dégradés circulaires ou elliptiques.
 
 ### Un dégradé radial simple
 
-> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même {{HTMLElement("div")}} et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.
+> **Note :** Dans les exemples suivants, nous continuons d'utiliser le même [`<div>`](/fr/docs/Web/HTML/Element/div) et, pour ne pas surcharger la lecture, n'afficherons plus que la règle CSS spécifique au dégradé.
 
 De la même façon qu'avec les dégradés linéaires, il suffit de deux couleurs pour créer un dégradé radial.
 
 ```html hidden
-<div class="simple-radial"></div>
+<div class="radial-simple"></div>
 ```
 
 ```css hidden
 div {
-  width: 120px;
+  width: 240px;
   height: 120px;
 }
 ```
 
 ```css
-.simple-radial {
+.radial-simple {
   background: radial-gradient(red, blue);
 }
 ```
 
-{{EmbedLiveSample('Un_dégradé_radial_simple', 120, 120)}}
+{{EmbedLiveSample("", 270, 150)}}
 
-### Positionner les points d’arrêt
+### Positionner les points d'arrêt
 
 À nouveau, comme pour les dégradés linéaires, il est possible de placer des arrêts de couleur en précisant un pourcentage ou une distance.
 
 ```html hidden
-<div class="radial-gradient"></div>
+<div class="degrade-radial"></div>
 ```
 
 ```css hidden
@@ -415,19 +427,19 @@ div {
 ```
 
 ```css
-.radial-gradient {
+.degrade-radial {
   background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
 }
 ```
 
-{{EmbedLiveSample("Positionner_les_points_d’arrêt", 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 ### Positionner le centre du dégradé
 
-La position du centre du dégradé peut être définie avec des mots-clés, des pourcetages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.
+La position du centre du dégradé peut être définie avec des mots-clés, des pourcentages ou des longueurs. Deux valeurs permettent de placer le centre sur les deux axes. Si une seule valeur est fournie, elle sera utilisée pour les deux axes.
 
 ```html hidden
-<div class="radial-gradient"></div>
+<div class="degrade-radial"></div>
 ```
 
 ```css hidden
@@ -438,16 +450,16 @@ div {
 ```
 
 ```css
-.radial-gradient {
+.degrade-radial {
   background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
 }
 ```
 
-{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}
+{{EmbedLiveSample("", 240, 270)}}
 
 ### Dimensionner les dégradés radiaux
 
-À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial.
+À la différence des dégradés linéaires, il est possible de définir la taille d'un dégradé radial. Pour cela, on pourra utiliser les valeurs `closest-corner`, `closest-side`, `farthest-corner`, et `farthest-side`, avec `farthest-corner` qui est la valeur par défaut. Les cercles peuvent aussi être dimensionnés avec une longueur et les ellipses avec une longueur ou un pourcentage.
 
 #### Utiliser `closest-side` pour les ellipses
 
@@ -471,11 +483,11 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Utiliser_closest-side_pour_les_ellipses', 240, 100)}}
+{{EmbedLiveSample("", 270, 130)}}
 
 #### Utiliser `farthest-corner` pour les ellipses
 
-Cet exemple ressemble fortement au précédent mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.
+Cet exemple ressemble fortement au précédent, mais on utilise ici `farthest-corner` qui crée un dégradé dont la distance est celle entre le point de départ central et le côté le plus éloigné de la boîte englobante.
 
 ```html hidden
 <div class="radial-ellipse-far"></div>
@@ -495,11 +507,11 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Utiliser_farthest-corner_pour_les_ellipses', 240, 100)}}
+{{EmbedLiveSample("", 240, 130)}}
 
 #### Utiliser `closest-side` pour les cercles
 
-Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Ici, le rayon du cercle est donc la moitié de la hauteur de la boîte car les bords haut et bas sont équidistants du point de départ et plus proches que les côtés gauche et droit.
+Pour cet exemple, on utilise `closest-side` qui permet de créer un cercle dont le rayon est la distance entre le point de départ central et le côté le plus proche de la boîte englobante. Le rayon est la distance entre le centre du dégradé et le bord le plus proche. Avec le positionnement indiqué ici, c'est le bas le plus proche.
 
 ```html hidden
 <div class="radial-circle-close"></div>
@@ -514,12 +526,60 @@ div {
 
 ```css
 .radial-circle-close {
-  background: radial-gradient(circle closest-side,
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+```
+
+{{EmbedLiveSample("", 240, 150)}}
+
+#### Longueur ou pourcentage pour le dimensionnement des ellipses
+
+Les ellipses peuvent être dimensionnées avec une longueur ou un pourcentage. La première valeur représentera le rayon horizontal et la seconde représentera le rayon vertical. Les pourcentages utilisés pour ces valeurs sont relatifs à la dimension de la boîte sur l'axe correspondant. Dans l'exemple qui suit, on utilise un pourcentage pour le rayon horizontal.
+
+```html hidden
+<div class="radial-ellipse-size"></div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-ellipse-size {
+  background: radial-gradient(ellipse 50% 50px,
       red, yellow 10%, #1e90ff 50%, beige);
 }
 ```
 
-{{EmbedLiveSample('Utiliser_closest-side_pour_les_cercles', 240, 120)}}
+{{EmbedLiveSample('', 240, 150)}}
+
+#### Longueur pour le dimensionnement des cercles
+
+Les cercles sont dimensionnés via une longueur (une valeur de type [<length>](/fr/docs/Web/CSS/length)) qui indique le rayon du cercle.
+
+```html hidden
+<div class="radial-circle-size"></div>
+```
+
+```css hidden
+div {
+  width: 240px;
+  height: 120px;
+}
+```
+
+```css
+.radial-circle-size {
+  background: radial-gradient(circle 50px,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+```
+
+{{EmbedLiveSample('', 240, 150)}}
 
 ### Empiler des dégradés radiaux
 
@@ -552,7 +612,7 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Empiler_des_dégradés_radiaux', 200, 200)}}
+{{EmbedLiveSample("", 230, 230)}}
 
 ## Dégradés coniques
 
@@ -564,7 +624,7 @@ Pour un dégradé radial, la transition entre les couleurs forme une ellipse qui
 
 ### Un dégradé conique simple
 
-Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut :
+Comme pour les dégradés linéaires et radiaux, il suffit de deux couleurs pour créer un dégradé conique. Par défaut, le centre du dégradé sera situé au centre (point 50% 50%) et le début du dégradé commencera vers le haut&nbsp;:
 
 ```html hidden
 <div class="simple-conic"></div>
@@ -583,7 +643,7 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Un_dégradé_conique_simple', 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 ### Positionner le centre
 
@@ -606,9 +666,11 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Positionner_le_centre', 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
+
+### Modifier l'angle
 
-### Modifier l’angle
+Par défaut, les différents arrêts de couleur indiqués sont répartis à équidistance autour du cercle. On peut positionner l'angle de départ du dégradé à l'aide du mot-clé `from`, suivi d'un angle ou d'une longueur. On peut indiquer différentes positions pour les différents arrêts de couleur en précisant un angle ou une longueur à leur suite.
 
 ```html hidden
 <div class="conic-gradient"></div>
@@ -627,17 +689,17 @@ div {
 }
 ```
 
-{{EmbedLiveSample("Modifier_l’angle", 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 ## Répéter des dégradés
 
-Les propriétés {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}} et {{cssxref("conic-gradient")}} ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}} et {{cssxref("repeating-conic-gradient")}} offrent cette fonctionnalité.
+Les propriétés [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient()), [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) et [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) ne permettent pas automatiquement de répéter les arrêts de couleur. Toutefois, les fonctions [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()), [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) et [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) offrent cette fonctionnalité.
 
-La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Aussi, le motif unitaire couvrira l'ensemble du dégradé et il n'y aura pas de répétition. Il faut donc indiquer au moins un des deux arrêts (entre le premier et le dernier) pour créer une répétition.
+La taille de la portion (ligne ou arc) répétée est donnée par la longueur (ou l'arc) entre le premier arrêt de couleur et le dernier arrêt de couleur. Si on n'indique pas de coordonnées pour le premier et le dernier arrêts, ceux-ci prendront respectivement 0 et 100%. Si aucun n'est déclaré, la ligne du dégradé occupera 100%, ce qui signifie que les dégradés linéaires et coniques ne se répèteront pas et que le dégradé radial ne se répètera que si le rayon du dégradé est plus petit que la distance entre le centre du dégradé et le coin le plus proche. Si le premier arrêt de couleur est déclaré et que la valeur est supérieure à 0, le dégradé se répètera, car la taille de la ligne ou de l'arc est donnée par la différence entre le premier et le dernier arrêt de couleur, qui vaudra alors ici moins de 100% ou 360 degrés.
 
 ### Répéter un dégradé linéaire
 
-Dans cet exemple, on utilise la fonction {{cssxref("repeating-linear-gradient")}} afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.
+Dans cet exemple, on utilise la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) afin de créer un dégradé linéaire qui se répète le long d'une ligne. Les couleurs forment un cycle lorsque le motif se répète.
 
 ```html hidden
 <div class="repeating-linear"></div>
@@ -656,10 +718,14 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Répéter_un_dégradé_linéaire', 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 ### Répéter plusieurs dégradés linéaires
 
+Comme les dégradés linéaires et radiaux, il est possible de déclarer plusieurs dégradés, situés les uns sur les autres. Cela n'a d'intérêt que si les dégradés sont partiellement transparents afin de pouvoir voir les couches formées par les autres dégradés. Pour voir les différents dégradés, il est aussi possible d'utiliser des tailles d'arrière-plan différentes ([`background-size`](/fr/docs/Web/CSS/background-size)) et avec des positions ([`background-position`](/fr/docs/Web/CSS/background-position)) différentes pour chaque image de dégradé. Dans l'exemple qui suit, on utilise la transparence.
+
+Ici, les lignes de dégradé mesurent 300px, 230px, et 300px de long.
+
 ```html hidden
 <div class="multi-repeating-linear"></div>
 ```
@@ -690,10 +756,12 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Répéter_plusieurs_dégradés_linéaires', 600, 400)}}
+{{EmbedLiveSample("", 600, 430)}}
 
 ### Créer un tartan
 
+Pour créer un tartan, on utilise plusieurs dégradés qui se chevauchent avec de la transparence. Dans la première déclaration, on liste les différents arrêts de couleur séparément et dans la seconde déclaration, on utilise la syntaxe avec les positions multiples.
+
 ```html hidden
 <div class="plaid-gradient"></div>
 ```
@@ -727,11 +795,11 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Créer_un_tartan', 200, 200)}}
+{{EmbedLiveSample("", 230, 230)}}
 
 ### Répéter des dégradés radiaux
 
-Ici, on utilise la fonction {{cssxref("repeating-radial-gradient")}} afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.
+Ici, on utilise la fonction [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) afin de créer un dégradé radial qui se répète. Les couleurs utilisées forment un cycle lorsque le motif unitaire recommence.
 
 ```html hidden
 <div class="repeating-radial"></div>
@@ -750,7 +818,7 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Répéter_des_dégradés_radiaux', 120, 120)}}
+{{EmbedLiveSample("", 150, 150)}}
 
 ### Répéter plusieurs dégradés radiaux
 
@@ -778,21 +846,28 @@ div {
 }
 ```
 
-{{EmbedLiveSample('Répéter_plusieurs_dégradés_radiaux', 250, 150)}}
+{{EmbedLiveSample("", 250, 180)}}
 
 ## Voir aussi
 
-- Les fonctions de manipulation des dégradés
+- Les fonctions de manipulation des dégradés&nbsp;:
 
-  - {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
+  - [`linear-gradient`](/fr/docs/Web/CSS/gradient/linear-gradient()),
+  - [`radial-gradient`](/fr/docs/Web/CSS/gradient/radial-gradient()),
+  - [`conic-gradient`](/fr/docs/Web/CSS/gradient/conic-gradient()),
+  - [`repeating-linear-gradient`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()),
+  - [`repeating-radial-gradient`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()),
+  - [`repeating-conic-gradient`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient())
 
-- Les types de donnée CSS relatifs aux dégradés
+- Les types de donnée CSS relatifs aux dégradés&nbsp;:
 
-  - {{cssxref("&lt;gradient&gt;")}}, {{cssxref("&lt;image&gt;")}}
+  - [`<gradient>`](/fr/docs/Web/CSS/gradient),
+  - [`<image>`](/fr/docs/Web/CSS/image)
 
-- Certaines propriétés CSS qui permettent d'utiliser des dégradés
+- Certaines propriétés CSS qui permettent d'utiliser des dégradés&nbsp;:
 
-  - {{cssxref("background")}}, {{cssxref("background-image")}}
+  - [`background`](/fr/docs/Web/CSS/background),
+  - [`background-image`](/fr/docs/Web/CSS/background-image)
 
 - [Une bibliothèque de motifs de dégradés CSS, créée par Lea Verou](https://lea.verou.me/css3patterns/)
 - [Un générateur de dégradé CSS](https://cssgenerator.org/gradient-css-generator.html)
diff --git a/files/fr/web/css/font-stretch/index.md b/files/fr/web/css/font-stretch/index.md
index e90bc46dfa..39232c5d9d 100644
--- a/files/fr/web/css/font-stretch/index.md
+++ b/files/fr/web/css/font-stretch/index.md
@@ -1,15 +1,16 @@
 ---
 title: font-stretch
 slug: Web/CSS/font-stretch
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/font-stretch
+browser-compat: css.properties.font-stretch
 ---
 {{CSSRef}}
 
-La propriété **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police.
+La propriété [CSS](/fr/docs/Web/CSS) **`font-stretch`** permet de choisir entre la forme normale, condensée ou étendue d'une police.
+
+{{EmbedInteractiveExample("pages/css/font-stretch.html")}}
+
+## Syntaxe
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -31,18 +32,11 @@ font-stretch: 200%;
 /* Valeurs globales */
 font-stretch: inherit;
 font-stretch: initial;
+font-stretch: revert;
 font-stretch: unset;
 ```
 
-Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_).
-
-`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.
-
-Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.
-
-## Syntaxe
-
-Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).
+Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. [`<percentage>`](/fr/docs/Web/CSS/percentage)).
 
 ### Valeurs
 
@@ -53,66 +47,37 @@ Cette propriété peut être définie avec un mot-clé ou avec une valeur exprim
 - `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`
   - : Permet de choisir une fonte plus étendue que la normale, `ultra-expanded` correspond à la forme la plus étirée.
 - `<percentage>`
-  - : Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.
+  - : Une valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage) entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette propriété.
 
-Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification _CSS Fonts_ de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).
+Dans les anciennes versions de la spécification de `font-stretch`, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification [_CSS Fonts_ de niveau 4](https://drafts.csswg.org/css-fonts-4/#propdef-font-stretch), cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables. Attention toutefois à la compatibilité, car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. [la section en fin d'article sur la compatibilité des navigateurs](#compatibilité_des_navigateurs)).
 
 ### Correspondance entre les mots-clés et les valeurs numériques
 
-Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :
+Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages&nbsp;:
 
-<table class="fullwidth-table standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Mot-clé</th>
-      <th scope="col">Pourcentage</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>ultra-condensed</code></td>
-      <td>50%</td>
-    </tr>
-    <tr>
-      <td><code>extra-condensed</code></td>
-      <td>62.5%</td>
-    </tr>
-    <tr>
-      <td><code>condensed</code></td>
-      <td>75%</td>
-    </tr>
-    <tr>
-      <td><code>semi-condensed</code></td>
-      <td>87.5%</td>
-    </tr>
-    <tr>
-      <td><code>normal</code></td>
-      <td>100%</td>
-    </tr>
-    <tr>
-      <td><code>semi-expanded</code></td>
-      <td>112.5%</td>
-    </tr>
-    <tr>
-      <td><code>expanded</code></td>
-      <td>125%</td>
-    </tr>
-    <tr>
-      <td><code>extra-expanded</code></td>
-      <td>150%</td>
-    </tr>
-    <tr>
-      <td><code>ultra-expanded</code></td>
-      <td>200%</td>
-    </tr>
-  </tbody>
-</table>
+| Mot-clé           | Pourcentage |
+| ----------------- | ----------- |
+| `ultra-condensed` | 50%         |
+| `extra-condensed` | 62.5%       |
+| `condensed`       | 75%         |
+| `semi-condensed`  | 87.5%       |
+| `normal`          | 100%        |
+| `semi-expanded`   | 112.5%      |
+| `expanded`        | 125%        |
+| `extra-expanded`  | 150%        |
+| `ultra-expanded`  | 200%        |
+
+## Description
+
+Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes _condensées_) et d'autres pour lesquelles les caractères sont plus amples (fontes _étendues_).
+
+`font-stretch` permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.
 
 ### Sélection de la fonte
 
 La fonte sélectionnée pour une valeur `font-stretch` dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.
 
-Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :
+Le tableau qui suit illustre l'effet des différents pourcentages avec deux polices possédant différentes fontes&nbsp;:
 
 <table class="standard-table">
   <thead>
@@ -160,104 +125,28 @@ Le tableau qui suit illustre l'effet des différents pourcentage avec deux polic
 - Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de `font-stretch` inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.
 - [League Mono Variable](https://tylerfinck.com/leaguemonovariable/) est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de `font-stretch` selon les pourcentages choisis.
 
-Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wdth` qui implémente ces largeurs variables.
-
 ### Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### Avec un mot-clé
-
-#### HTML
-
-```html
-<p class="stretch">Le texte est plus étiré.</p>
-<p class="condensed">Le texte est plus resserré.</div>
-```
-
-#### CSS
-
-```css
-.stretch {
-  font-stretch: extra-expanded;
-}
-
-.condensed {
-  font-stretch: condensed;
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample('Avec_un_mot-clé', '500')}}
-
 ### Avec un pourcentage
 
-Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs `<percentage>`.
-
-#### HTML
-
-```html
-<div class="container">
-  <p class="condensed">an elephantine lizard</p>
-  <p class="normal">an elephantine lizard</p>
-  <p class="expanded">an elephantine lizard</p>
-</div>
-```
-
-#### CSS
-
-```css
-/*
-Cet exemple utilise la police League Mono Variable, développée par
-Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
-la licence SIL Open Font, Version 1.1 :
-http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
-  font-family:'LeagueMonoVariable';
-  font-style: normal;
-  font-stretch: 1% 500%; /* Nécessaire pour Chrome */
-}
-
-.container {
-  border: 10px solid #f5f9fa;
-  padding: 0 1rem;
-  font: 1.5rem 'LeagueMonoVariable', sans-serif;
-}
-
-.condensed {
-  font-stretch: 50%;
-}
-
-.normal {
-  font-stretch: 100%;
-}
-
-.expanded {
-  font-stretch: 200%;
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample("Avec_un_pourcentage", 1200, 250, "", "", "example-outcome-frame")}}
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-stretch.html", '100%', 950)}}
 
 ## Spécifications
 
-| Spécification                                                                            | État                             | Commentaires                                                 |
-| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------ |
-| {{SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS4 Fonts')}} | Ajout des valeurs `<percentage>` pour les polices variables. |
-| {{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale.                                         |
+{{Specifications}}
 
 > **Note :** La propriété CSS `font-stretch` fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.
 
-{{cssinfo}}
-
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.font-stretch")}}
+{{Compat}}
+
+## Voir aussi
+
+- [`font-style`](/fr/docs/Web/CSS/font-style)
+- [`font-weight`](/fr/docs/Web/CSS/font-weight)
+- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals)
diff --git a/files/fr/web/css/font-variant-numeric/index.md b/files/fr/web/css/font-variant-numeric/index.md
index ad8967a4dd..d553d0d3cf 100644
--- a/files/fr/web/css/font-variant-numeric/index.md
+++ b/files/fr/web/css/font-variant-numeric/index.md
@@ -1,15 +1,12 @@
 ---
 title: font-variant-numeric
 slug: Web/CSS/font-variant-numeric
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/font-variant-numeric
+browser-compat: css.properties.font-variant-numeric
 ---
 {{CSSRef}}
 
-La propriété **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.
+La propriété [CSS](/fr/docs/Web/CSS) **`font-variant-numeric`** permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, fractions et les marqueurs ordinaux.
 
 {{EmbedInteractiveExample("pages/css/font-variant-numeric.html")}}
 
@@ -30,10 +27,11 @@ font-variant-numeric: oldstyle-nums stacked-fractions;
 /* Valeurs globales */
 font-variant-numeric: inherit;
 font-variant-numeric: initial;
+font-variant-numeric: revert;
 font-variant-numeric: unset;
 ```
 
-La valeur de cette propriété peut être définie selon deux formes :
+La valeur de cette propriété peut être définie selon deux formes&nbsp;:
 
 - la première avec le mot-clé `normal`
 - la seconde avec une ou plusieurs valeurs parmi celles définies ci-après, séparées par des espaces et dans n'importe quel ordre.
@@ -43,90 +41,52 @@ La valeur de cette propriété peut être définie selon deux formes :
 - `normal`
   - : Ce mot-clé désactive l'utilisation des glyphes alternatifs.
 - `ordinal`
-
-  - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1
-
-    <sup>er</sup>
-
-    , 2
-
-    <sup>e</sup>
-
-    , 3
-
-    <sup>e</sup>
-
-    , etc. Il correspond aux valeurs OpenType values `ordn`.
-
+  - : Ce mot-clé permet de forcer l'utilisation de glyphes spéciaux pour les marqueurs ordinaux utilisés par exemple pour 1<sup>er</sup>, 2<sup>e</sup>, 3<sup>e</sup>, etc. Il correspond aux valeurs OpenType values `ordn`.
 - `slashed-zero`
-  - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs  OpenType `zero`.
-- _\<numeric-figure-values_>
+  - : Ce mot-clé permet de forcer l'application d'une barre oblique après un 0. Cela peut être utile quand on cherche à distinguer un O majuscule d'un 0. Il correspond aux valeurs OpenType `zero`.
+- `<numeric-figure-values>`
 
-  - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées :
+  - : Ces valeurs contrôlent les chiffres utilisés pour les nombres. Deux valeurs peuvent être utilisées&nbsp;:
 
     - `lining-nums` permet d'activer l'ensemble de chiffres pour lequel tous les nombres sont apposés sur la ligne de base. Elle correspond aux valeurs OpenType `lnum`.
     - `oldstyle-nums` permet d'activer l'ensemble de chiffres pour lequel certains nombres, comme 3, 4, 7, 9, ont un jambage. Elle correspond aux valleurs OpenType `onum`.
 
-- _\<numeric-spacing-values_>
-
-  - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valelurs :
+- `<numeric-spacing-values>`
 
+  - : Ces valeurs permettent de contrôler la taille des chiffres utilisés pour les nombres. On peut utiliser deux valeurs&nbsp;:
     - `proportional-nums` permet d'activer l'ensemble où les chiffres ne sont pas tous de la même taille. Elle correspond aux valeurs OpenType `pnum`.
     - `tabular-nums` permet d'activer l'ensemble où les chiffres ont la même taille (ce qui leur permet d'être facilement alignés dans des tableaux). Elle correspond aux valeurs OpenType `tnum`.
 
-- _\<numeric-fraction-values_>
-
-  - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions :
+- `<numeric-fraction-values>`
 
+  - : Ces valeurs permettent de contrôler les glyphes utilisés pour afficher les fractions&nbsp;:
     - `diagonal-fractions` permet d'utiliser l'ensemble où le numérateur et le dénominateur sont plus petits et séparés par une barre oblique. Elle correspond aux valeurs OpenType `frac`.
     - `stacked-fractions` permet d'utiliser l'ensemble où les chiffres du numérateur et du dénominateur sont plus petits et séparés par une ligne horizontale. Elle correspond aux valeurs OpenType `afrc`.
 
-### Syntaxe formelle
+## Définition formelle
 
-{{csssyntax}}
-
-## Exemples
-
-### CSS
-
-```css
-/*
-Cet exemple utilise la police Source Sans Pro OpenType développée par Adobe
-et utilisée ici sous les termes de la licence SIL Open Font en Version 1.1 :
-http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
-*/
-
-@font-face {
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-weight: 400;
-  src: url("https://mdn.mozillademos.org/files/15757/SourceSansPro-Regular.otf") format("opentype");
-}
-
-.ordinal {
-  font-variant-numeric: ordinal;
-  font-family: "Source Sans Pro";
-}
-```
+{{cssinfo}}
 
-### HTML
+## Syntaxe formelle
 
-```html
-<p class="ordinal">Premier, deuxième, troisième, quatrième, cinquième</p>
-```
+{{csssyntax}}
 
-### Résultat
+## Exemples
 
-{{EmbedLiveSample("Exemples")}}
+{{EmbedGHLiveSample("css-examples/font-features/font-variant-numeric-example.html", '100%', 600)}}
 
 ## Spécifications
 
-| Spécification                                                                                                    | État                             | Commentaires         |
-| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Fonts', '#propdef-font-variant-numeric', 'font-variant-numeric')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.font-variant-numeric")}}
+{{Compat}}
+
+## Voir aussi
+
+- [`font-variant-alternates`](/fr/docs/Web/CSS/font-variant-alternates)
+- [`font-variant-caps`](/fr/docs/Web/CSS/font-variant-caps)
+- [`font-variant-east-asian`](/fr/docs/Web/CSS/font-variant-east-asian)
+- [`font-variant-ligatures`](/fr/docs/Web/CSS/font-variant-ligatures)
+- [`font-variant`](/fr/docs/Web/CSS/font-variant)
diff --git a/files/fr/web/css/font-weight/index.md b/files/fr/web/css/font-weight/index.md
index 1ce9243e2f..80aa0926dd 100644
--- a/files/fr/web/css/font-weight/index.md
+++ b/files/fr/web/css/font-weight/index.md
@@ -1,15 +1,12 @@
 ---
 title: font-weight
 slug: Web/CSS/font-weight
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/font-weight
+browser-compat: css.properties.font-weight
 ---
 {{CSSRef}}
 
-La propriété CSS **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. {{cssxref("font-family")}}). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`.
+La propriété [CSS](/fr/docs/Web/CSS) **`font-weight`** permet de définir la graisse utilisée pour le texte. Les niveaux de graisse disponibles dépendent de la police (cf. [`font-family`](/fr/docs/Web/CSS/font-family)). Certaines fontes n'existent qu'avec les niveaux de graisses `normal` et `bold`.
 
 {{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
@@ -25,24 +22,20 @@ font-weight: lighter;
 font-weight: bolder;
 
 /* Valeurs numériques */
-font-weight: 1;
 font-weight: 100;
-font-weight: 100.6;
-font-weight: 123;
 font-weight: 200;
 font-weight: 300;
-font-weight: 321;
-font-weight: 400;
+font-weight: 400; /* normal */
 font-weight: 500;
 font-weight: 600;
-font-weight: 700;
+font-weight: 700; /* gras */
 font-weight: 800;
 font-weight: 900;
-font-weight: 1000;
 
 /* Valeurs globales */
 font-weight: inherit;
 font-weight: initial;
+font-weight: revert;
 font-weight: unset;
 ```
 
@@ -59,26 +52,29 @@ La propriété `font-weight` peut être définie grâce à l'une des valeurs sui
 - `bolder`
   - : On augmente la graisse d'un niveau par rapport à l'élément parent (selon les fontes / graisses disponibles pour la police utilisée). Le texte est plus gras.
 - `<number>`
-  - : Une valeur numérique (type {{cssxref("&lt;number&gt;")}}) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`.
+  - : Une valeur numérique (type [`<number>`](/fr/docs/Web/CSS/number)) comprise entre 1 et 1000. Plus la valeur est grande, plus le niveau de graisse est élevé. Ces valeurs permettent de couvrir un éventail de valeurs plus larges qu'avec `normal` et `bold`.
 
 Pour d'anciennes versions de la spécification, `font-weight` n'acceptait que les mots-clés et les valeurs numériques 100, 200, 300, 400, 500, 600, 700, 800 et 900. Les polices non-variables ne peuvent utiliser que ces valeurs (les valeurs plus fines seront converties cf. ci-après).
 
-Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleur précision quant aux tailles utilisables. On notera que cette fonctionnalité n'est pas encore prise en charge (à date de juin 2018) par tous les navigateurs.
+Le module de spécification _CSS Fonts_ de niveau 4 a étendu la syntaxe afin de pouvoir utiliser n'importe quel nombre entre 1 et 1000. Cela permet aux polices variables d'avoir une meilleure précision quant aux tailles utilisables.
 
 ### Conversion des valeurs
 
-Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée :
+Si une fonte avec la graisse demandée n'est pas disponible, le moteur suit la méthode suivante pour déterminer la fonte qui sera affichée&nbsp;:
 
 - Si un niveau supérieur à `500` est utilisé, c'est la graisse la plus sombre et la plus proche qui sera utilisée (la plus proche s'il n'y a pas de graisse plus forte)
 - Si un niveau inférieur à `400` est utilisé, c'est la graisse la plus claire la plus proche qui est utilisée (la plus proche s'il n'y a pas de graisse plus claire)
-- Si un niveau égal à `400` est utilisé, `500` sera utilisé. Si `500` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à 400.
-- Si un niveau égal à `500` est utilisé, `400` sera utilisé. Si `400` n'est pas disponible, on utilisera la méthode de calcul sur un niveau inférieur à `400`.
+- Si c'est un niveau entre `400` et `500` (inclus) qui est utilisé&nbsp;:
 
-Autrement dit, pour les fontes dont les niveaux de graisse sont uniquement `normal` et `bold`, `100`-`500` seront considérés équivalents à `normal` et `600`-`900` à `bold`.
+  - On cherche les niveaux les plus proches entre la cible et `500`, dans l'ordre croissant.
+  - Si aucune correspondance n'est trouvée, on cherche les niveaux inférieurs, dans l'ordre décroissant.
+  - Si aucune correspondance n'est trouvée, on cherche les niveaux supérieurs à `500`, dans l'ordre croissant.
 
 ### Signification des poids relatifs
 
-Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément :
+Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau suivant pour calculer le poids absolu de l'élément.
+
+On notera que lorsqu'on utilise des niveaux de graisse relatifs, seuls quatre niveaux sont considérés&nbsp;: fin (100), normal (400), gras (700) et épais (900). Si une police dispose de plus de niveaux de graisse, ceux-ci sont ignorés pour le calcul des niveaux relatifs.
 
 <table class="standard-table">
   <thead>
@@ -139,7 +135,7 @@ Lorsqu'on utilise les valeurs `lighter` ou `bolder`, on peut utiliser le tableau
 
 ### Correspondance entre les valeurs numériques et les noms communément utilisés
 
-Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT : les noms sont laissés en anglais car généralement utilisés tels quels_) :
+Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, communément utilisés pour désigner les variantes de fonte, selon la graisse, d'une même police (_NdT&nbsp;: les noms sont laissés en anglais car généralement utilisés tels quels_) (voir [la spécification OpenType](https://docs.microsoft.com/typography/opentype/spec/os2#usweightclass))&nbsp;:
 
 | Valeur | Nom communément utilisé     |
 | ------ | --------------------------- |
@@ -152,112 +148,34 @@ Les valeurs allant de 100 à 900 correspondent environ aux noms suivants, commun
 | 700    | _Bold_                      |
 | 800    | _Extra Bold (Ultra Bold)_   |
 | 900    | _Black (Heavy)_             |
-
-### Interpolation
-
-Une valeur `font-weight` est interpolée de façon discrète (par multiple de 100). L'interpolation se produit sur des valeurs réelles puis la valeur est convertie au multiple de 100 le plus proche. Les valeurs à égale distance entre deux multiples de 100 sont arrondies à la valeur supérieure.
+| 950    | _Extra Black (Ultra Black)_ |
 
 ### Polices variables
 
-La plupart des polices possèdent des niveaux de graisses qui correspondent aux [niveaux communément utilisés](#communs). Toutefois, certaines polices, appelées « polices variables » prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.
+La plupart des polices possèdent des niveaux de graisses qui correspondent aux niveaux communément utilisés (voir tableau précédent). Toutefois, certaines polices, appelées «&nbsp;polices variables&nbsp;» prennent en charge un intervalle de niveaux avec plus ou moins de détail, ce qui permet à l'éditeur du document de mieux contrôler la graisse utilisée.
 
 Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `wght` qui est utilisé afin d'implémenter les variations de largeur.
 
-Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4.
-
-{{EmbedLiveSample("Polices_variables", 1200, 180, "", "", "example-outcome-frame")}}
-
-#### HTML
-
-```html
-<header>
-    <input type="range" id="weight" name="weight" min="1" max="1000" />
-    <label for="weight">Weight</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-```
-
-#### CSS
-
-```css
-/*
-Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
-and is used here under the terms of its license:
-https://github.com/LettError/mutatorSans/blob/master/LICENSE
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
-  font-family:'MutatorSans';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-  white-space: nowrap;
-}
-
-.container {
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.sample {
-  text-transform: uppercase;
-  font: 1.5rem 'MutatorSans', sans-serif;
-}
-```
-
-```css hidden
-html, body {
-  max-height: 100vh;
-  max-width: 100vw;
-  overflow: hidden;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-header {
-  margin-bottom: 1.5rem;
-}
+Pour que l'exemple suivant fonctionne, il est nécessaire d'utiliser un navigateur qui prend en charge la spécification _CSS Fonts_ de niveau 4 pour laquelle `font-weight` peut prendre une valeur numérique entre 1 et 1000. La démonstration commence avec `font-weight: 500;` et vous pouvez changer la valeur pour voir l'effet sur le texte.
 
-.container {
-  flex-grow: 1;
-}
-
-.container > p {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-```
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}}
 
-#### JavaScript
+## Accessibilité
 
-```js
-let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
+Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité).
 
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Comprendre les critères de succès 1.4.8 — Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
 
-weightInput.addEventListener('input', update);
+## Définition formelle
 
-update();
-```
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
-## Exemples
+## Exemple
 
 ### HTML
 
@@ -266,8 +184,8 @@ update();
   Alice was beginning to get very tired of sitting by her sister on the
   bank, and of having nothing to do: once or twice she had peeped into the
   book her sister was reading, but it had no pictures or conversations in
-  it, 'and what is the use of a book,' thought Alice 'without pictures or
-  conversations?'
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
 </p>
 
 <div>I'm heavy<br/>
@@ -278,19 +196,19 @@ update();
 ### CSS
 
 ```css
-/* Le texte du paragraphe est gras. */
+/* Le texte du paragraphe est en gras. */
 p {
   font-weight: bold;
 }
 
-/* Le texte du div est deux niveaux plus sombres
-   mais moins gras qu'une graisse normale. */
+/* Le texte du div utilise plus fort que
+   normal mais moins fort que standard. */
 div {
  font-weight: 600;
 }
 
-/* Le texte dans le span est un niveau plus
-   clair que le parent. */
+/* Le texte du span utilise un niveau de graisse
+   plus léger que son parent. */
 span {
   font-weight: lighter;
 }
@@ -298,27 +216,18 @@ span {
 
 ### Résultat
 
-{{EmbedLiveSample("Exemples","400","300")}}
-
-## Accessibilité
-
-Pour les personnes ayant une vision faible, il peut être extrêmement difficile de lire un texte avec `font-weight` qui vaut `100` ou `200`, notamment [si le contraste entre le texte et l'arrière-plan est faible](/fr/docs/Web/CSS/color#accessibilité).
-
-- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [_Understanding Success Criterion 1.4.8 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+{{EmbedLiveSample("","400","300")}}
 
 ## Spécifications
 
-| Spécification                                                                                    | État                                     | Commentaires                                                                                                      |
-| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS4 Fonts')}}         | Définition de `font-weight` qui précise que la propriété peut utiliser des valeurs comprises entre `1` et `1000`. |
-| {{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}             | {{Spec2('CSS3 Fonts')}}         | Aucun changement.                                                                                                 |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}         | {{Spec2('CSS3 Transitions')}} | `font-weight` peut désormais être animée.                                                                         |
-| {{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}} | {{Spec2('CSS2.1')}}                 | Aucun changement.                                                                                                 |
-| {{SpecName('CSS1', '#font-weight', 'font-weight')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                              |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.font-weight")}}
+{{Compat}}
+
+## Voir aussi
+
+- [`font-style`](/fr/docs/Web/CSS/font-style)
+- [`font-family`](/fr/docs/Web/CSS/font-family)
+- [Apprendre — Notions fondamentales sur le texte et la mise en forme avec les polices](/fr/docs/Learn/CSS/Styling_text/Fundamentals)
diff --git a/files/fr/web/css/image-orientation/index.md b/files/fr/web/css/image-orientation/index.md
index af3f7d39c3..9b6da870a6 100644
--- a/files/fr/web/css/image-orientation/index.md
+++ b/files/fr/web/css/image-orientation/index.md
@@ -1,40 +1,23 @@
 ---
 title: image-orientation
 slug: Web/CSS/image-orientation
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/image-orientation
+browser-compat: css.properties.image-orientation
 ---
 {{CSSRef}}
 
-La propriété **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document. Cette propriété ne doit pas être utilisée afin de tourner l'image pour d'autres cas, si besoin, on pourra utiliser la propriété {{cssxref("transform")}} avec la fonction `rotate`.
+La propriété [CSS](/fr/docs/Web/CSS) **`image-orientation`** décrit la façon d'obtenir l'orientation correcte d'une image quelle que soit la disposition du document.
 
-> **Attention :** Cette propriété sera vraisemblablement dépréciée prochainement. Les fonctionnalités associées deviendront des propriétés de l'élément {{HTMLElement("img")}} et/ou de l'élément {{HTMLElement("picture")}} (excepté peut-être `from-image`).
 
 ```css
-/* Valeurs d'angle */
-/* Type <angle>    */
-image-orientation: 0deg;
-image-orientation: 6.4deg;     /* Arrondie à 0deg */
-image-orientation: -90deg;     /* Équivalent à 270deg, la
-                                  valeur calculée normalisée */
-
 /* Valeurs avec un mot-clé */
-image-orientation: from-image; /* Utilise les données EXIF
-                                  de l'image */
-image-orientation: flip;       /* Pas de rotation mais un
-                                  retournement horizontal */
-
-/* Valeurs avec deux arguments */
-image-orientation: 90deg flip; /* Rotation de 90deg, puis
-                                  retournement horizontal */
+image-orientation: none;
+image-orientation: from-image; /* Les données EXIF de l'image sont utilisées. */
 
 /* Valeurs globales */
 image-orientation: inherit;
 image-orientation: initial;
+image-orientation: revert;
 image-orientation: unset;
 ```
 
@@ -42,74 +25,91 @@ image-orientation: unset;
 
 ### Valeurs
 
+- `none`
+  - : Aucune rotation supplémentaire n'est appliquée. L'image est orientée telle quelle ou comme indiquée par les autres propriétés CSS.
 - `from-image`
-  - : Les informations EXIF contenues dans l'image seront utilisées pour tourner l'image de façon appropriée.
-- `<angle>`
-  - : Une valeur de type {{cssxref("&lt;angle&gt;")}} qui indique la rotation à appliquer à l'image. Cette valeur est arrondie au quart de tour le plus proche.
-- `flip`
-  - : L'image est retournée horizontalement (comme une réflexion) après que la rotation d'angle indiqué par le premier paramètre ait été appliquée. Si aucun argument d'angle n'a été fourni, la valeur `0deg` sera utilisée.
+  - : La valeur initiale par défaut. Ce sont [les informations EXIF](https://fr.wikipedia.org/wiki/Exchangeable_image_file_format) contenues dans l'image qui sont utilisées afin de tourner l'image correctement.
 
-### Syntaxe formelle
+## Description
 
-{{csssyntax}}
+Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger une orientation erronée.
 
-## Notes d'utilisation
+Pour tout autre usage, on utilisera la propriété [`transform`](/fr/docs/Web/CSS/transform) avec le mot-clé `rotate` afin d'indiquer une rotation. Ces autres usages incluent les modifications volontaires de l'orientation de l'image ou les changements nécessaires à l'impression portrait/paysage.
 
-Cette propriété n'est pas conçue pour appliquer une rotation arbitraire sur une image. Elle permet uniquement de corriger un orientation erronée. C'est pour cette raison que la valeur est arrondie au quart de tour le plus proche.
+Lorsqu'elle est utilisée avec d'autres propriétés CSS (comme [`transform-function`](/fr/docs/Web/CSS/transform-function)), la rotation fournie par `image-orientation` est appliquée avant toute autre transformation.
 
-De la même façon, cette propriété n'est pas conçue pour gérer le passage de paysage en portrait. `image-orientation` ne modifie que les images, il faudrait apporter les modifications au niveau de la disposition.
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
+
+{{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Orienter une image à partir des données qu'elle contient
+
+L'image suivante a suivi une rotation de 180° et la propriété `image-orientation` est utilisée pour corriger son orientation à partir des données EXIF de l'image. En passant la valeur de la propriété `image-orientation` à `none`, vous pourrez voir l'effet de la propriété.
+
+#### CSS
 
 ```css
 #image {
-  /* Peut-être modifiée dans l'exemple */
-  image-orientation: flip;
+  image-orientation: from-image; /* Peut être édité dans l'exemple */
+}
+```
+
+```css hidden
+img {
+  margin: .5rem 0;
+}
+
+label {
+  font-family: monospace;
 }
 ```
 
 ```html hidden
-<img id="image" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
-    alt="Orientation déterminée à partir de l'image"/>
-<select id="imageOrientation">
-  <option value="from-image">from-image</option>
-  <option value="90deg">90deg</option>
-  <option value="flip" selected>flip</option>
-</select>
+<img id="image" src="oriole.jpg"
+    alt="Orientation obtenue à partir de l'image">
+
+<div>
+  <input type="radio" id="from-image" name="orientation" value="from-image"
+         checked>
+  <label for="from-image">from-image</label>
+</div>
+
+<div>
+  <input type="radio" id="none" name="orientation" value="none">
+  <label for="none">none</label>
+</div>
 ```
 
 ```js hidden
-var imageOrientation = document.getElementById("imageOrientation");
-imageOrientation.addEventListener("change", function (evt) {
+document.addEventListener('change', evt => {
   document.getElementById("image").style.imageOrientation = evt.target.value;
 });
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample("Exemples", "100%", 240)}}
+{{EmbedLiveSample("", "100%", 900)}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                             | Commentaires                                |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------- |
-| {{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS4 Images')}} | Ajout des mots-clés `from-image` et `flip`. |
-| {{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}} | {{Spec2('CSS3 Images')}} | Définition initiale.                        |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.image-orientation")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("object-fit")}}
-- {{cssxref("object-position")}}
-- {{cssxref("image-orientation")}}
-- {{cssxref("image-rendering")}}
-- {{cssxref("image-resolution")}}
-- {{cssxref("transform")}}
-- {{cssxref("rotate")}}
+- Les autres propriétés CSS associées aux images&nbsp;:
+  - [`object-fit`](/fr/docs/Web/CSS/object-fit)
+  - [`object-position`](/fr/docs/Web/CSS/object-position)
+  - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering)
+  - [`image-resolution`](/fr/docs/Web/CSS/image-resolution)
+- [`transform`](/fr/docs/Web/CSS/transform)
+- [`rotate`](/fr/docs/Web/CSS/rotate)
diff --git a/files/fr/web/css/image-rendering/index.md b/files/fr/web/css/image-rendering/index.md
index c5e83f68db..754b1d9b9e 100644
--- a/files/fr/web/css/image-rendering/index.md
+++ b/files/fr/web/css/image-rendering/index.md
@@ -1,17 +1,16 @@
 ---
 title: image-rendering
 slug: Web/CSS/Image-rendering
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/image-rendering
+browser-compat: css.properties.image-rendering
 ---
 {{CSSRef}}
 
-La propriété **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments fils.
+La propriété [CSS](/fr/docs/Web/CSS) **`image-rendering`** fournit une indication au navigateur à propos de l'algorithme qui devrait être utilisé pour redimensionner les images. Elle s'applique à l'élément visé, aux images fournies via les autres propriétés CSS et aux éléments descendants de l'élément ciblé.
 
-L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes que la taille naturelle de l'image ou si l'utilisateur interagit en zoomant par exemple. Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées. Si, par exemple, la taille naturelle de l'image est `100px` par `100px` et que l'auteur indique les dimensions `200px` par `200px` (ou `50px` par `50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple).
+{{EmbedInteractiveExample("pages/css/image-rendering.html")}}
+
+L'agent utilisateur redimensionnera une image si l'auteur de la page indique des dimensions différentes de la taille naturelle de l'image, ou si la personne visualisant l'image interagit en zoomant par exemple. Si, par exemple, la taille naturelle de l'image est `100×100px` et que l'auteur indique les dimensions `200×200px` (ou `50×50px`), l'image sera agrandie (ou réduite) aux nouvelles dimensions via l'algorithme indiqué. Le redimensionnement peut aussi avoir lieu suite aux interactions utilisateurs (avec un zoom par exemple). Cette propriété n'a aucun effet sur les images qui ne sont pas redimensionnées.
 
 ## Syntaxe
 
@@ -24,86 +23,87 @@ image-rendering: pixelated;
 /* Valeurs globales */
 image-rendering: inherit;
 image-rendering: initial;
+image-rendering: revert;
 image-rendering: unset;
 ```
 
 ### Valeurs
 
-- **`auto`**
-  - : L'image devrait être redimensionnée grâce à un algorithme qui optimise l'apparence de l'image. Les algorithmes de redimensionnement « doux » comme l'interpolation bilinéaire, sont acceptables. Ces algorithmes sont destinés à être utilisés sur des images comme des photos. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.
-- **`crisp-edges`**
-  - : L'algorithme utilisé doit avant tout préserver le contraste et les bords de l'image, il ne doit pas ajouter de couleur intermédiaire ou de flou. Cette valeur est conçue pour être utilisée sur du _pixel art_. Les algorithmes éligibles sont par exemple l'interpolation au plus proche voisin, les familles d'algorithmes 2×SaI et [hqx](https://en.wikipedia.org/wiki/Hqx).
-- `high-quality`{{Experimental_inline}}
+- `auto`
+  - : L'algorithme utilisé dépend de l'agent utilisateur. Depuis la version 1.9 (Firefox 3.0), Gecko utilise un algorithme de rééchantillonnage bilinéaire.
+- `crisp-edges`
+  - : L'algorithme utilisé est l'interpolation au plus proche voisin.
+- `high-quality` {{Experimental_inline}}
   - : Cette valeur est proche de `smooth` mais favorise un redimensionnement avec une qualité élevée. Si les ressources du système sont limitées, ce sont les images ciblées avec `high-quality` qui devraient être priorisées par rapport aux autres s'il est nécessaire de dégrader la qualité.
-- **`pixelated`**
-  - : Lorsque l'image est agrandie c'est l'algorithme « du plus proche voisin » qui doit être utilisé afin que l'image apparaisse comme composée de grands pixels. Lorsque l'image est réduite, le comportement est le même que `auto`.
-- `smooth`{{Experimental_inline}}
-  - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (ex. l'interpolation bilinéaire) sont acceptables. Cette valeur est destinée aux images telles que les photos.
+- `pixelated`
+  - : L'algorithme utilisé est l'interpolation au plus proche voisin. L'image est agrandie au multiple entier de taille qui est supérieur ou égal à sa taille originale puis réduite à la taille cible, comme pour `smooth`. Lorsque l'agrandissement demandé est un multiple entier de la taille originale, l'effet obtenu sera le même qu'avec `crisp-edges`
+- `smooth` {{Experimental_inline}}
+  - : L'algorithme utilisé pour le redimensionnement doit maximiser l'apparence de l'image. Les algorithmes qui adoucissent les couleurs (l'interpolation bilinéaire par exemple) sont acceptables. Cette valeur est destinée aux images telles que les photos.
 
 > **Note :** Les valeurs `optimizeQuality` et `optimizeSpeed` qui étaient présentes dans un brouillon de la spécification (et qui provenaient de la spécification équivalente pour SVG) sont synonymes respectifs de `smooth` et `pixelated`.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Paramétrer l'algorithme de redimensionnement des images
 
-```css
-.pixels_petits {
-  height: 50px;
-  width: 50px;
-}
+En pratique, les valeurs `pixelated` et `crisp-edges` peuvent être combinées afin de fournir des alternatives l'une à l'autre. L'API [Canvas](/fr/docs/Web/API/Canvas_API) peut fournir [une solution alternative pour `pixelated`](http://phrogz.net/tmp/canvas_image_zoom.html) via une manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).
 
-.pixels_grands {
-  height: 69px;
-  width: 69px;
-}
+```html hidden
+<div>
+  <img class="auto" alt="auto" src="blumen.jpg" />
+  <img class="pixelated" alt="pixelated" src="blumen.jpg" />
+  <img class="crisp-edges" alt="crisp-edges" src="blumen.jpg" />
+</div>
+```
 
-.chapeau_petit {
-  height: 89px;
-  width: 89px;
+```css hidden
+img {
+  height: 200px;
 }
-.defaut {
+```
+
+#### CSS
+
+```css
+.auto {
   image-rendering: auto;
 }
 
-.contraste {
-  image-rendering: crisp-edges;
+.pixelated {
+  -ms-interpolation-mode: nearest-neighbor;
+  image-rendering: pixelated;
 }
-```
 
-### HTML
-
-```html
-<p>Avec <code>auto</code> :</p>
-<img class="pixels_petits defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
-<img class="pixels_grands defaut" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
-<img class="chapeau_petit defaut" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
-
-<p>Avec <code>crisp-edges</code> :</p>
-<img class="pixels_petits contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
-<img class="pixels_grands contraste" alt="damier" src="https://mdn.mozillademos.org/files/2766/squares.gif"/>
-<img class="chapeau_petit contraste" alt="chapeau" src="https://mdn.mozillademos.org/files/2767/hut.jpg"/>
+.crisp-edges {
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+}
 ```
 
-### Résultat
-
-{{EmbedLiveSample("Exemples","100%","100%")}}
+#### Résultat
 
-> **Note :** En pratique, les règles `pixelated` et `crisp-edges` peuvent être combinées en cas de besoin (l'une pouvant combler les éventuelles manques de l'autre et _vice versa_). Si besoin, un {{HTMLElement("canvas")}} peut fournir [une alternative pour les valeurs `crisp-edge` et `optimize-contrast`](http://phrogz.net/tmp/canvas_image_zoom.html) via la manipulation manuelle des données de l'image ou avec [`imageSmoothingEnabled`](/fr/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled).
+{{EmbedLiveSample('',200,250)}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                             | Commentaires         |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
+{{Specifications}}
 
-> **Note :** Cette valeur était, initialement, proche de la propriété SVG `image-rendering`. Cependant, ces valeurs ont « divergé » et sont assez différentes désormais.
+## Compatibilité des navigateurs
 
-{{cssinfo}}
+{{Compat}}
 
-## Compatibilité des navigateurs
+## Voir aussi
 
-{{Compat("css.properties.image-rendering")}}
+- D'autres propriétés CSS utilisées avec les images&nbsp;:
+  - [`object-fit`](/fr/docs/Web/CSS/object-fit)
+  - [`object-position`](/fr/docs/Web/CSS/object-position)
+  - [`image-orientation`](/fr/docs/Web/CSS/image-orientation)
+  - [`image-resolution`](/fr/docs/Web/CSS/image-resolution)
diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md
index f7c9dc9012..a9a4a8862d 100644
--- a/files/fr/web/css/list-style-image/index.md
+++ b/files/fr/web/css/list-style-image/index.md
@@ -2,14 +2,17 @@
 title: list-style-image
 slug: Web/CSS/list-style-image
 translation_of: Web/CSS/list-style-image
+browser-compat: css.properties.list-style-image
 ---
 {{CSSRef}}
 
-La propriété **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](fr/HTML/%c3%89l%c3%a9ment/li). On peut également utiliser la propriété raccourcie {{cssxref("list-style")}}.
+La propriété [CSS](/fr/docs/Web/CSS) **`list-style-image`** définit l'image utilisée comme puce devant les [éléments de listes](/fr/docs/Web/HTML/Element/li).
+
+On peut également utiliser la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style).
 
 {{EmbedInteractiveExample("pages/css/list-style-image.html")}}
 
-> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).
+> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). Par défaut, cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/li). Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)).
 
 ## Syntaxe
 
@@ -20,62 +23,91 @@ list-style-image: none;
 /*  Valeurs pointant vers une image */
 list-style-image: url('starsolid.gif');
 
+/* Valeurs avec une image */
+list-style-image: linear-gradient(to left bottom, red, blue);
+
 /* Valeurs globales */
 list-style-image: inherit;
 list-style-image: initial;
+list-style-image: revert;
 list-style-image: unset;
 ```
 
 ### Valeurs
 
-- `url`
-  - : Emplacement de l'image à utiliser comme puce (cf. {{cssxref("&lt;url&gt;")}} pour plus de détails sur les valeurs possibles pour ce type).
+- [`<image>`](/fr/docs/Web/CSS/image)
+  - : Une valeur représentant une image valide, qui sera utilisée comme puce.
 - `none`
-  - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec {{cssxref("list-style-type")}} sera utilisé à la place.
+  - : Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec [`list-style-type`](/fr/docs/Web/CSS/list-style-type) sera utilisé à la place.
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
+### Utiliser une URL
+
+#### HTML
+
+```html
+<ul>
+  <li>Élément 1</li>
+  <li>Élément 2</li>
+</ul>
+```
+
+#### CSS
 
 ```css
 ul {
-  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
+  list-style-image: url("starsolid.gif");
 }
 ```
 
-### HTML
+#### Résultat
+
+{{EmbedLiveSample('')}}
+
+### Utiliser un dégradé
+
+#### HTML
 
 ```html
 <ul>
-    <li>Élément 1</li>
-    <li>Élément 2</li>
+  <li>Élément 1</li>
+  <li>Élément 2</li>
 </ul>
 ```
 
-### Résultat
+#### CSS
 
-{{EmbedLiveSample('Exemples')}}
+```css
+ul {
+  font-size: 200%;
+  list-style-image: linear-gradient(to left bottom, red, blue);
+}
+```
 
-## Spécifications
+#### Résultat
 
-| Spécification                                                                                                    | État                             | Commentaires                                                                               |
-| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ |
-| {{SpecName('CSS3 Lists', '#propdef-list-style-image', 'list-style-image')}}             | {{Spec2('CSS3 Lists')}} | Propriété étendue pour supporter n'importe quel type {{cssxref("&lt;image&gt;")}}. |
-| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image')}} | {{Spec2('CSS2.1')}}         | Définition initiale.                                                                       |
+{{EmbedLiveSample('')}}
 
-{{cssinfo}}
+## Spécifications
+
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.list-style-image")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("list-style")}}
-- {{cssxref("list-style-type")}}
-- {{cssxref("list-style-position")}}
-- La fonction {{cssxref("url()", "url()")}}
+- [`list-style`](/fr/docs/Web/CSS/list-style)
+- [`list-style-type`](/fr/docs/Web/CSS/list-style-type)
+- [`list-style-position`](/fr/docs/Web/CSS/list-style-position)
+- La fonction [`url()`](/fr/docs/Web/CSS/url())
diff --git a/files/fr/web/css/mask-border/index.md b/files/fr/web/css/mask-border/index.md
index 6b765250be..29151b0da1 100644
--- a/files/fr/web/css/mask-border/index.md
+++ b/files/fr/web/css/mask-border/index.md
@@ -4,11 +4,20 @@ slug: Web/CSS/mask-border
 translation_of: Web/CSS/mask-border
 browser-compat: css.properties.mask-border
 ---
-{{cssref}}{{SeeCompatTable}}
+{{cssref}}
 
-La propriété CSS **`mask-border`** permet de créer un masque le long de la bordure d'un élément.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-border`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de créer un masque le long de la bordure d'un élément.
 
-Cette propriété est une propriété [raccourcie](/fr/docs/Web/CSS/Shorthand_properties) pour les propriétés {{cssxref("mask-border-source")}}, {{cssxref("mask-border-slice")}}, {{cssxref("mask-border-width")}}, {{cssxref("mask-border-outset")}}, {{cssxref("mask-border-repeat")}} et {{cssxref("mask-border-mode")}}. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur [valeur initiale](/fr/docs/Web/CSS/initial_value).
+## Propriétés détaillées correspondantes
+
+Cette propriété est une propriété raccourcie pour les propriétés suivantes&nbsp;:
+
+- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode).
+- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset)
+- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat)
+- [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice)
+- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source)
+- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width)
 
 ## Syntaxe
 
@@ -24,24 +33,34 @@ mask-border: url('border-mask.png') 25 / 35px;
 
 /* source | slice | width | outset | repeat | mode */
 mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
+
+/* Valeurs globales */
+mask-border: inherit;
+mask-border: initial;
+mask-border: revert;
+mask-border: unset;
 ```
 
 ### Valeurs
 
 - `<'mask-border-source'>`
-  - : L'image source, pour plus d'informations, voir {{cssxref("mask-border-source")}}.
+  - : L'image source. Voir [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source).
 - `<'mask-border-slice'>`
-  - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-slice")}}.
+  - : Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-slice`](/fr/docs/Web/CSS/mask-border-slice).
 - `<'mask-border-width'>`
-  - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-width")}}.
+  - : La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width).
 - `<'mask-border-outset'>`
-  - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir {{cssxref("mask-border-outset")}}.
+  - : La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset).
 - `<'mask-border-repeat'>`
-  - : Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir {{cssxref("mask-border-repeat")}}.
+  - : Cette valeur indique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat).
 - `<'mask-border-mode'>`
-  - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir {{cssxref("mask-border-mode")}}.
+  - : Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode).
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -49,41 +68,13 @@ mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;
 
 ### Image matricielle (_bitmap_)
 
-Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :
+Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large&nbsp;:
 
 ![](mask-border-diamonds.png)
 
-#### HTML
-
-```html
-<div id="bitmap">
-  Cet élément est entouré d'un masque de bordure
-  matriciel. C'est pas mal.
-</div>
-```
-
-#### CSS
-
 Pour avoir un seul losange, on divise le carré en 3 (avec la valeur `30`). On utilise la valeur `round` pour que le masque soit réparti également de part et d'autre.
 
-```css
-div {
-  width: 200px;
-  background-color: lavender;
-  border: 18px solid salmon;
-  padding: 10px;
-
-  mask-border:
-    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
-    30 /         /* slice */
-    36px 18px    /* width */
-    round;       /* repeat */
-}
-```
-
-#### Résultat
-
-{{EmbedLiveSample("Image_matricielle_(bitmap)")}}
+{{EmbedGHLiveSample("css-examples/masking/mask-border.html", '100%', 800)}}
 
 ## Spécifications
 
@@ -92,3 +83,11 @@ div {
 ## Compatibilité des navigateurs
 
 {{Compat}}
+
+## Voir aussi
+
+- [`mask-border-mode`](/fr/docs/Web/CSS/mask-border-mode)
+- [`mask-border-outset`](/fr/docs/Web/CSS/mask-border-outset)
+- [`mask-border-repeat`](/fr/docs/Web/CSS/mask-border-repeat)
+- [`mask-border-source`](/fr/docs/Web/CSS/mask-border-source)
+- [`mask-border-width`](/fr/docs/Web/CSS/mask-border-width)
diff --git a/files/fr/web/css/mask-clip/index.md b/files/fr/web/css/mask-clip/index.md
index fd5257c0ad..13e84c6be1 100644
--- a/files/fr/web/css/mask-clip/index.md
+++ b/files/fr/web/css/mask-clip/index.md
@@ -1,20 +1,12 @@
 ---
 title: mask-clip
 slug: Web/CSS/mask-clip
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-clip
+browser-compat: css.properties.mask-clip
 ---
 {{CSSRef}}
 
-La propriété **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu « peint » sera restreint à cette zone.
-
-{{cssinfo}}
-
-## Syntaxe
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-clip`** définit la zone qui est modifiée par un masque. Le contenu «&nbsp;peint&nbsp;» sera restreint à cette zone.
 
 ```css
 /* Valeurs de type <geometry-box> */
@@ -29,19 +21,20 @@ mask-clip: view-box;
 /* Valeurs avec un mot-clé */
 mask-clip: no-clip;
 
-/* Valeurs multiples */
-mask-clip: padding-box, no-clip;
-mask-clip: view-box, fill-box, border-box;
-
 /* Mots-clés non-standards */
 -webkit-mask-clip: border;
 -webkit-mask-clip: padding;
 -webkit-mask-clip: content;
 -webkit-mask-clip: text;
 
+/* Valeurs multiples */
+mask-clip: padding-box, no-clip;
+mask-clip: view-box, fill-box, border-box;
+
 /* Valeurs globales */
 mask-clip: inherit;
 mask-clip: initial;
+mask-clip: revert;
 mask-clip: unset;
 ```
 
@@ -52,65 +45,52 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une
 ### Valeurs
 
 - `content-box`
-  - : La partie qui est « peinte » est rognée sur la boîte de contenu.
+  - : La partie qui est peinte est rognée sur la boîte de contenu.
 - `padding-box`
-  - : La partie qui est « peinte » est rognée sur la boîte de _padding_.
+  - : La partie qui est peinte est rognée sur la boîte de remplissage (<i lang="en">padding</i>).
 - `border-box`
-  - : La partie qui est « peinte » est rognée sur la boîte de bordure.
+  - : La partie qui est peinte est rognée sur la boîte de bordure.
 - `margin-box`
-  - : La partie qui est « peinte » est rognée sur la boîte de marge.
+  - : La partie qui est peinte est rognée sur la boîte de marge.
 - `fill-box`
-  - : La partie qui est « peinte » est rognée sur la boîte contenant l'objet.
+  - : La partie qui est peinte est rognée sur la boîte contenant l'objet.
 - `stroke-box`
-  - : La partie qui est « peinte » est rognée sur la boîte contenant le contour.
+  - : La partie qui est peinte est rognée sur la boîte contenant le contour.
 - `view-box`
-  - : C'est le _viewport_ du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le _viewport_, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîtes sont basées sur la hauteur et la largeur de l'attribut `viewBox`.
+  - : C'est le <i lang="en">viewport</i> du plus proche SVG qui est utilisé comme boîte de référence. Si l'attribut [`viewBox`](/fr/docs/Web/SVG/Attribute/viewBox) est défini pour l'élément qui crée le <i lang="en">viewport</i>, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte sont basées sur la hauteur et la largeur de l'attribut `viewBox`.
 - `no-clip`
-  - : La partie qui est « peinte » n'est pas rognée.
+  - : La partie qui est peinte n'est pas rognée.
+- `border` {{non-standard_inline}}
+  - : Synonyme de `border-box`.
+- `padding` {{non-standard_inline}}
+  - : Synonyme de `padding-box`.
+- `content` {{non-standard_inline}}
+  - : Synonyme de `content-box`.
+- `text` {{non-standard_inline}}
+  - : L'image est rognée selon la forme du texte de l'élément.
+
+## Définition formelle
 
-### Syntaxe formelle
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### CSS
-
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  margin: 20px;
-  border: 20px solid #8ca0ff;
-  padding: 20px;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-clip: border;
-  mask-clip: border-box;
-}
-```
-
-### HTML
-
-```html
-<div id="masked"></div>
-```
-
-### Résultat
+Vous pouvez modifier la valeur `mask-clip` dans l'exemple qui suit. Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de `-webkit-mask-clip`.
 
-{{EmbedLiveSample("Exemples", "220px", "250px")}}
+{{EmbedGHLiveSample("css-examples/masking/mask-clip.html", '100%', 800)}}
 
 ## Spécifications
 
-| Spécification                                                                | État                         | Commentaires        |
-| ---------------------------------------------------------------------------- | ---------------------------- | ------------------- |
-| {{SpecName("CSS Masks", "#the-mask-clip", "mask-clip")}} | {{Spec2("CSS Masks")}} | Définition initiale |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-clip")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage en CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
\ No newline at end of file
diff --git a/files/fr/web/css/mask-composite/index.md b/files/fr/web/css/mask-composite/index.md
index 1843872679..0bd2f96551 100644
--- a/files/fr/web/css/mask-composite/index.md
+++ b/files/fr/web/css/mask-composite/index.md
@@ -1,16 +1,12 @@
 ---
 title: mask-composite
 slug: Web/CSS/mask-composite
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-composite
+browser-compat: css.properties.mask-composite
 ---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-La propriété **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.
 
 ```css
 /* Valeurs avec un mot-clé*/
@@ -22,6 +18,7 @@ mask-composite: exclude;
 /* Valeurs globales */
 mask-composite: inherit;
 mask-composite: initial;
+mask-composite: revert;
 mask-composite: unset;
 ```
 
@@ -40,59 +37,30 @@ La couche du masque de l'élément est appelée _source_ et les couches inférie
 - `intersect`
   - : Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.
 - `exclude`
-  - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.The non-overlapping regions of source and destination are combined.
+  - : Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.
 
-### Syntaxe formelle
+## Définition formelle
 
-{{csssyntax}}
-
-## Exemples
+{{cssinfo}}
 
-### CSS
+## Syntaxe formelle
 
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
-                      url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg),
-              url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-size: 100% 100%;
-  -webkit-mask-composite: add;
-  mask-composite: add; /* peut-être modifiée dans la démo */
-}
-```
+{{csssyntax}}}
 
-```html hidden
-<div id="masked">
-</div>
-<select id="compositeMode">
-  <option value="add">add</option>
-  <option value="subtract">subtract</option>
-  <option value="intersect">intersect</option>
-  <option value="exclude">exclude</option>
-</select>
-```
+## Exemples
 
-```js hidden
-var clipBox = document.getElementById("compositeMode");
-clipBox.addEventListener("change", function (evt) {
-  document.getElementById("masked").style.maskClip = evt.target.value;
-});
-```
+### Composer des couches de masques de façon additive
 
-{{EmbedLiveSample("Exemples", "200px", "200px")}}
+{{EmbedGHLiveSample("css-examples/masking/mask-composite.html", '100%', 550)}}
 
 ## Spécifications
 
-| Spécification                                                                            | État                         | Commentaires        |
-| ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------- |
-| {{SpecName("CSS Masks", "#the-mask-composite", "mask-composite")}} | {{Spec2("CSS Masks")}} | Définition initiale |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-composite")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
diff --git a/files/fr/web/css/mask-image/index.md b/files/fr/web/css/mask-image/index.md
index 701f385f6b..6d3402ebc7 100644
--- a/files/fr/web/css/mask-image/index.md
+++ b/files/fr/web/css/mask-image/index.md
@@ -1,18 +1,14 @@
 ---
 title: mask-image
 slug: Web/CSS/mask-image
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-image
+browser-compat: css.properties.mask-image
 ---
 {{CSSRef}}
 
-La propriété CSS **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-image`** définit l'image qui sera utilisée comme masque pour un élément.
 
-## Syntaxe
+Par défaut, cela signifie que le canal alpha de l'image du masque sera multiplié par le canal alpha de l'élément. Cette combinaison peut être contrôlée avec la propriété [`mask-mode`](/fr/docs/Web/CSS/mask-mode).
 
 ```css
 /* Valeur avec un mot-clé */
@@ -26,57 +22,49 @@ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
 mask-image: image(url(mask.png), skyblue);
 
 /* Gestion de plusieurs masques */
-mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);
 
 /* Valeurs globales */
 mask-image: inherit;
 mask-image: initial;
+mask-image: revert;
 mask-image: unset;
 ```
 
+## Syntaxe
+
 ### Valeurs
 
 - `none`
   - : Le masque défini par ce mot-clé sera une image noire transparente.
 - `<mask-source>`
-  - : Une référence {{cssxref("&lt;url&gt;")}} vers un masque ({{SVGElement("mask")}}) ou une image CSS.
-- {{cssxref("&lt;image&gt;")}}
+  - : Une référence [`url()`](/fr/docs/Web/CSS/url()) vers un masque SVG ([`<mask>`](/fr/docs/Web/SVG/Element/mask)) ou une image CSS.
+- [`<image>`](/fr/docs/Web/CSS/image)
   - : Une image utilisée pour le masque.
 
-### Syntaxe formelle
-
-{{csssyntax}}
+## Définition formelle
 
-## Exemples
+{{cssinfo}}
 
-### CSS
+## Syntaxe formelle
 
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-}
-```
+{{csssyntax}}
 
-### HTML
+## Exemples
 
-```html
-<div id="masked"></div>
-```
+### Définir une image de masque avec une URL
 
-{{EmbedLiveSample("Exemples", "100px", "100px",'', '', 'hide-codepen-jsfiddle') }}
+{{EmbedGHLiveSample("css-examples/masking/mask-image.html", '100%', 560)}}
 
 ## Spécifications
 
-| Spécification                                                                | État                         | Commentaires         |
-| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
-| {{SpecName("CSS Masks", "#the-mask-image", "mask-image")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-image")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
+- [Appliquer des effets à des images avec la propriété CSS `mask-image` (en anglais)](https://web.dev/css-masking/)
diff --git a/files/fr/web/css/mask-mode/index.md b/files/fr/web/css/mask-mode/index.md
index a6d59e866f..6e1515cfc9 100644
--- a/files/fr/web/css/mask-mode/index.md
+++ b/files/fr/web/css/mask-mode/index.md
@@ -1,16 +1,12 @@
 ---
 title: mask-mode
 slug: Web/CSS/mask-mode
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-mode
+browser-compat: css.properties.mask-mode
 ---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-La propriété **`mask-mode`** détermine si le masque défini par {{cssxref("mask-image")}} est considéré comme un masque de luminance ou un masque alpha (transparence).
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-mode`** détermine si le masque défini par [`mask-image`](/fr/docs/Web/CSS/mask-image) est considéré comme un masque de luminance ou un masque alpha (transparence).
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -24,6 +20,7 @@ mask-mode: alpha, match-source;
 /* Valeurs globales */
 mask-mode: inherit;
 mask-mode: initial;
+mask-mode: revert;
 mask-mode: unset;
 ```
 
@@ -34,85 +31,37 @@ La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ce
 ### Valeurs
 
 - `alpha`
-  - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal de transparence) qui sont utilisées comme valeurs de masque.
+  - : Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque.
 - `luminance`
   - : Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.
 - `match-source`
 
-  - : Si la propriété {{cssxref("mask-image")}} est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisée comme valeurs pour le masque.
+  - : Si la propriété [`mask-image`](/fr/docs/Web/CSS/mask-image) est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque.
 
-    Si elle est de type {{cssxref("&lt;image&gt;")}}, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.
+    Si elle est de type [`<image>`](/fr/docs/Web/CSS/image), ce seront les valeurs de transparence (canal alpha) qui seront utilisées.
 
-### Syntaxe formelle
+## Définition formelle
 
-{{csssyntax}}
-
-## Exemples
-
-### Alpha
-
-#### CSS
-
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  background: blue linear-gradient(red, blue);
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-mode: alpha;
-  mask-mode: alpha;
-}
-```
-
-#### HTML
-
-```html
-<div id="masked"></div>
-```
-
-#### Résultat
-
-{{EmbedLiveSample("Alpha", "110px", "130px")}}
-
-### Luminance
-
-#### CSS
+{{cssinfo}}
 
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  background-color: #8cffa0;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  -webkit-mask-size: 100% 100%;
-  mask-size: 100% 100%;
-  -webkit-mask-mode: luminance;
-  mask-mode: luminance;
-}
-```
+## Syntaxe formelle
 
-#### HTML
+{{csssyntax}}
 
-```html
-<div id="masked"></div>
-```
+## Exemples
 
-#### Résultat
+### Utiliser le mode de masque alpha
 
-{{EmbedLiveSample("Luminance", "110px", "130px")}}
+{{EmbedGHLiveSample("css-examples/masking/mask-mode.html", '100%', 760)}}
 
 ## Spécifications
 
-| Spécification                                                                | État                         | Commentaires         |
-| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
-| {{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-mode")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
diff --git a/files/fr/web/css/mask-origin/index.md b/files/fr/web/css/mask-origin/index.md
index 20424606ee..9a0e4a7d98 100644
--- a/files/fr/web/css/mask-origin/index.md
+++ b/files/fr/web/css/mask-origin/index.md
@@ -1,16 +1,12 @@
 ---
 title: mask-origin
 slug: Web/CSS/mask-origin
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-origin
+browser-compat: css.properties.mask-origin
 ---
 {{CSSRef}}
 
-La propriété **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque.
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -27,17 +23,18 @@ mask-origin: padding-box, content-box;
 mask-origin: view-box, fill-box, border-box;
 
 /* Valeurs non-standards */
- -webkit-mask-origin: content;
- -webkit-mask-origin: padding;
- -webkit-mask-origin: border;
+-webkit-mask-origin: content;
+-webkit-mask-origin: padding;
+-webkit-mask-origin: border;
 
 /* Valeurs globales */
 mask-origin: inherit;
 mask-origin: initial;
+mask-origin: revert;
 mask-origin: unset;
 ```
 
-Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via {{cssxref("mask-image")}}. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes _inline_ ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles {{cssxref("box-decoration-break")}} agira pour déterminer la zone de positionnement du masque.
+Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via [`mask-image`](/fr/docs/Web/CSS/mask-image). Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes en lignes ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles [`box-decoration-break`](/fr/docs/Web/CSS/box-decoration-break) agira pour déterminer la zone de positionnement du masque.
 
 ## Syntaxe
 
@@ -48,22 +45,22 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une
 - `content-box`
   - : La position de la zone est relative à la boîte de contenu.
 - `padding-box`
-  - : La position de la zone est relative à la boîte de remplissage (_padding_). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite.
+  - : La position de la zone est relative à la boîte de remplissage (<i lang="en">padding</i>). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite.
 - `border-box`
   - : La position de la zone est relative à la boîte de bordure.
 - `margin-box`
   - : La position de la zone est relative à la boîte de marge.
 - `fill-box`
-  - : La position de la zone est relative à la boîte liée à l'objet (_[bounding box](https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#__svg__SVGLocatable__getBBox)_).
+  - : La position de la zone est relative à la boîte liée à l'objet.
 - `stroke-box`
-  - : La position de la zone est relative à la boîte de contour de l'objet (_[stroke bounding box](https://www.w3.org/TR/css-masking/#stroke-bounding-box)_).
+  - : La position de la zone est relative à la boîte de contour de l'objet.
 - `view-box`
-  - : La zone d'affichage (_viewport_) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut {{svgattr("viewBox")}} est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`.
-- `content`{{non-standard_inline}}
+  - : La zone d'affichage (<i lang="en">viewport</i>) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut `viewBox` est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`.
+- `content` {{non-standard_inline}}
   - : Synonyme de `content-box`.
-- `padding`{{non-standard_inline}}
+- `padding` {{non-standard_inline}}
   - : Synonyme de `padding-box`.
-- `border`{{non-standard_inline}}
+- `border` {{non-standard_inline}}
   - : Synonyme de `border-box`.
 
 ### Syntaxe formelle
@@ -72,60 +69,20 @@ Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une
 
 ## Exemples
 
-### CSS
+### Définir l'origine du masque avec `border-box`
 
-```css
-#masked {
-  width: 100px;
-  height: 100px;
-  margin: 10px;
-  border: 10px solid blue;
-  background-color: #8cffa0;
-  padding: 10px;
-  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  -webkit-mask-origin: border-box; /* À modifier dans le résultat. */
-  mask-origin: border-box; /* À modifier dans le résultat. */
-}
-```
-
-### HTML
-
-```html
-<div id="masked">
-</div>
-<select id="origin">
-  <option value="content-box">content-box</option>
-  <option value="padding-box">padding-box</option>
-  <option value="border-box" selected>border-box</option>
-  <option value="margin-box">margin-box</option>
-  <option value="fill-box">fill-box</option>
-  <option value="stroke-box">stroke-box</option>
-  <option value="view-box">view-box</option>
-</select>
-```
-
-### JavaScript
+Vous pouvez également essayer d'autres valeurs en éditant le code CSS qui suit.
 
-```js
-var origin = document.getElementById("origin");
-origin.addEventListener("change", function (evt) {
-  document.getElementById("masked").style.maskOrigin = evt.target.value;
-});
-```
-
-### Résultat
-
-{{EmbedLiveSample("Exemples", 160, 200)}}
+{{EmbedGHLiveSample("css-examples/masking/mask-origin.html", '100%', 600)}}
 
 ## Spécifications
 
-| Spécification                                                                    | État                         | Commentaires         |
-| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
-| {{SpecName("CSS Masks", "#the-mask-origin", "mask-origin")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-origin")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
diff --git a/files/fr/web/css/mask-position/index.md b/files/fr/web/css/mask-position/index.md
index e249dbfe7b..49cc3448e8 100644
--- a/files/fr/web/css/mask-position/index.md
+++ b/files/fr/web/css/mask-position/index.md
@@ -1,16 +1,12 @@
 ---
 title: mask-position
 slug: Web/CSS/mask-position
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-position
+browser-compat: css.properties.mask-position
 ---
 {{CSSRef}}
 
-La propriété **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété {{cssxref("mask-origin")}}.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété [`mask-origin`](/fr/docs/Web/CSS/mask-origin).
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -20,94 +16,57 @@ mask-position: left;
 mask-position: right;
 mask-position: center;
 
-/*  Valeurs en pourcentage */
-/* Type <percentage>       */
+/* Valeurs de <position> */
 mask-position: 25% 75%;
-
-/* Valeurs en longueur */
-/* Type <length>       */
 mask-position: 0px 0px;
-mask-position: 1cm 2cm;
-mask-position: 10ch 8em;
+mask-position: 10% 8em;
 
 /* Valeurs multiples */
-mask-position: 0px 0px, center;
+mask-position: top right;
+mask-position: 1rem 1rem, center;
 
 /* Valeurs globales */
 mask-position: inherit;
 mask-position: initial;
+mask-position: revert;
 mask-position: unset;
 ```
 
 ## Syntaxe
 
+Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules.
+
 ### Valeurs
 
 - `<position>`
-  - : Une position CSS (type {{cssxref("&lt;position&gt;")}}) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.
+  - : Une position CSS (type [`<position>`](/fr/docs/Web/CSS/position_value)) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.
 
-### Syntaxe formelle
+## Définition formelle
 
-{{csssyntax}}
+{{cssinfo}}
 
-## Exemples
+## Syntaxe formelle
 
-### CSS
+{{csssyntax}}
 
-```css
-#wrapper {
-  border: 1px solid black;
-  width: 250px;
-  height: 250px;
-}
-
-#masked {
-  width: 250px;
-  height: 250px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
-  mask-repeat: no-repeat;
-  mask-position: top right; /* Can be changed in the live sample */
-  margin-bottom: 10px;
-}
-```
+## Exemples
 
-```html hidden
-<div id="wrapper">
-  <div id="masked">
-  </div>
-</div>
-<select id="maskPosition">
-  <option value="top">top</option>
-  <option value="center">center</option>
-  <option value="bottom">bottom</option>
-  <option value="top right" selected>top right</option>
-  <option value="center center">center center</option>
-  <option value="bottom left">bottom left</option>
-  <option value="10px 20px">10px 20px</option>
-  <option value="60% 20%">60% 20%</option>
-</select>
-```
+### Définir la position du masque
 
-```js hidden
-var maskPosition = document.getElementById("maskPosition");
-maskPosition.addEventListener("change", function (evt) {
-  document.getElementById("masked").style.maskPosition = evt.target.value;
-});
-```
+Dans le fragment de code qui suit, vous pouvez modifier la valeur de `mask-position` avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété.
 
-### Résultat
+Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété `-webkit-mask-position`.
 
-{{EmbedLiveSample("Exemples",200,200)}}
+{{EmbedGHLiveSample("css-examples/masking/mask-position.html", '100%', 760)}}
 
 ## Spécifications
 
-| Spécification                                                                        | État                         | Commentaires         |
-| ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- |
-| {{SpecName("CSS Masks", "#the-mask-position", "mask-position")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.mask-position")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
diff --git a/files/fr/web/css/mask-size/index.md b/files/fr/web/css/mask-size/index.md
index 52a1b29e82..78555fe987 100644
--- a/files/fr/web/css/mask-size/index.md
+++ b/files/fr/web/css/mask-size/index.md
@@ -1,16 +1,12 @@
 ---
 title: mask-size
 slug: Web/CSS/mask-size
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/mask-size
+browser-compat: css.properties.mask-size
 ---
-{{CSSRef}}{{SeeCompatTable}}
+{{CSSRef}}
 
-La propriété **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.
+La propriété [CSS](/fr/docs/Web/CSS) **`mask-size`** définit les dimensions des images utilisées comme masques. La taille de l'image peut être contrainte, partiellement ou complètement, afin de conserver ses proportions intrinsèques.
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -43,93 +39,76 @@ mask-size: 6px, auto, contain;
 /* Valeurs globales */
 mask-size: inherit;
 mask-size: initial;
+mask-size: revert;
 mask-size: unset;
 ```
 
-> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie {{cssxref("mask")}} et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.
+> **Note :** Si la valeur de cette propriété n'est pas définie avec la propriété raccourcie [`mask`](/fr/docs/Web/CSS/mask) et que celle-ci est appliquée après `mask-size`, la valeur sera réinitialisée avec sa valeur initiale à cause de la propriété raccourcie.
 
 ## Syntaxe
 
-Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons :
+Une ou plusieurs valeurs `<bg-size>`, séparées par des virgules. Une valeur `<bg-size>` peut être définie de trois façons&nbsp;:
 
-- avec le mot-clé [`contain`](#contain)
-- avec le mot-clé [`cover`](#cover)
+- avec le mot-clé `contain`
+- avec le mot-clé `cover`
 - avec des valeurs pour la hauteur et la largeur.
 
-Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs :
+Pour indiquer une taille avec une largeur et une hauteur, il est possible de fournir une ou deux valeurs&nbsp;:
 
 - Si une seule valeur est fournie, elle servira à définir la largeur, la hauteur vaudra alors `auto`
-- Si deux valeurs sont fournies, la première définira la largeur et la seonde définira la hauteur.
+- Si deux valeurs sont fournies, la première définira la largeur et la seconde définira la hauteur.
 
 Chaque valeur peut être une longueur (`<length>`), un pourcentage (`<percentage>`) ou `auto`.
 
 ### Valeurs
 
 - `<length>`
-  - : Une valeur de longueur (type {{cssxref("&lt;length&gt;")}} qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.
+  - : Une valeur de longueur (type [`<length>`](/fr/docs/Web/CSS/length) qui redimensionne l'image avec la longueur indiquée dans l'axe correspondant. Les longueurs négatives ne sont pas autorisées.
 - `<percentage>`
-  - : Une valeur de pourcentage ({{cssxref("&lt;percentage&gt;")}} qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par {{cssxref("mask-origin")}} par rapport à la taille  de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (_padding_) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.
+  - : Une valeur de pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) qui indique le redimensionnement à appliquer dans l'axe correspondant à partir de l'origine définie par [`mask-origin`](/fr/docs/Web/CSS/mask-origin) par rapport à la taille de la zone du masque. Par défaut, cette zone contient la boîte de contenu et la boîte de remplissage (<i lang="en">padding</i>) (on peut modifier cette zone pour choisir les boîtes concernées). Les valeurs négatives ne sont pas autorisées.
 - `auto`
   - : Un mot-clé qui permet de redimensionner l'image du masque dans l'axe correspondant tout en conservant ses proportions.
 - `contain`
-  - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le contenur. Par défaut, l'image est centrée sauf si {{cssxref("mask-position")}} indique un autre paramètre.
+  - : Un mot-clé qui redimensionne l'image afin qu'elle soit aussi grande que possible et conserve ses proportions tout en étant contenue dans le conteneur. Par défaut, l'image est centrée sauf si [`mask-position`](/fr/docs/Web/CSS/mask-position) indique un autre paramètre.
 - `cover`
   - : Un mot-clé qui se comporte à l'inverse de `contain`. L'image est agrandie autant que possible et ses proportions sont conservées et elle couvre toute la surface du conteneur, si les dimensions du conteneur sont différentes, l'image est rognée sur les côtés (haut et bas ou droite et gauche).
 
-L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (_bitmap_) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.
+L'interprétation des valeurs se fera en fonction des dimensions intrinsèques de l'image (sa hauteur et sa largeur) et de ses proportions intrinsèques (le ratio entre la largeur et la hauteur). Une image matricielle (<i lang="en">bitmap</i>) possèdera toujours des dimensions intrinsèques et des proportions intrinsèques. Une image vectorielle pourra avoir des dimensions intrinsèques (et donc, _de facto_, des proportions intrinsèques) ou également n'avoir qu'une ou aucune dimension intrinsèque et des proportions intrinsèques ou non. Les gradients sont considérés comme des images sans dimensions ni proportions intrinsèques.
 
-La taille de l'image affichée pour le masque est calculée de la façon suivante :
+La taille de l'image affichée pour le masque est calculée de la façon suivante&nbsp;:
 
-- Si les deux composants de `mask-size` sont définis et sont différents de `auto` :
+- Si les deux composants de `mask-size` sont définis et sont différents de `auto`&nbsp;:
   - : L'image est affichée avec la taille indiquée.
-- Si `mask-size` vaut `contain` ou `cover` :
-  - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrire toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.
+- Si `mask-size` vaut `contain` ou `cover`&nbsp;:
+  - : L'image est affichée en conservant ses proportions avec la plus grande taille possible pour être contenue ou couvrir toute la zone du masque. Si l'image ne possède pas de proportions intrinsèques, sa taille d'affichage sera la taille de la zone du masque.
 - Si `mask-size` vaut `auto` ou `auto auto`&nbsp;:
   - : Si l'image possède deux dimensions intrinsèques, elle sera affichée avec cette taille. Si elle ne possède pas de dimensions intrinsèques ni de proportions intrinsèques, elle sera affichée à la taille de la zone du masque. Si elle n'a aucune dimension intrinsèque mais possède des proportions intrinsèques elle sera affichée comme si `contain` avait été utilisé. Si l'image possède une dimension intrinsèque et des proportions intrinsèques, sa taille sera déterminée grâce à ses informations. Si l'image possède une dimension intrinsèque mais aucune proportion intrinsèque, la dimension connue sera utilisée pour cet axe et la seconde sera celle de la zone pour le masque.
-- Si `mask-size` possède un composant `auto` et un autre composant différent de `auto` :
+- Si `mask-size` possède un composant `auto` et un autre composant différent de `auto`&nbsp;:
   - : Si l'image possède des proportions intrinsèques, elle sera affichée avec la dimension connue et la deuxième sera calculée à partir de la proportion. Si l'image ne possède pas de proportions intrinsèques, la valeur définie sera utilisée pour l'axe correspondant et pour l'autre axe, on utilisera la dimension intrinsèque si elle est connue, sinon, on utilisera la dimension (sur cet axe) de la zone du masque.
 
-### Syntaxe formelle
+## Définition formelle
 
-{{csssyntax}}
-
-## Exemples
-
-### CSS
-
-```css
-.exemple {
-  height: 100px;
-  width: 100px;
-  background-color: rgb(128,128,128);
+{{cssinfo}}
 
-  -webkit-mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
-  mask-image: url('https://mdn.mozillademos.org/files/13024/masque2.png');
+## Syntaxe formelle
 
-  -webkit-mask-size: auto 50%;
-  mask-size: auto 50%;
+{{csssyntax}}
 
-}
-```
+## Exemples
 
-### HTML
+### Définir la taille du masque en pourcentages
 
-```html
-<div class="exemple"></div>
-```
+{{EmbedGHLiveSample("css-examples/masking/mask-size.html", '100%', 700)}}
 
-### Résultat
+## Spécifications
 
-{{EmbedLiveSample("Exemples",200,200)}}
+{{Specifications}}
 
-## Spécifications
+## Compatibilité des navigateurs
 
-| Spécification                                                                | État                         | Commentaires         |
-| ---------------------------------------------------------------------------- | ---------------------------- | -------------------- |
-| {{SpecName("CSS Masks", "#the-mask-size", "mask-size")}} | {{Spec2("CSS Masks")}} | Définition initiale. |
+{{Compat}}
 
-{{cssinfo}}
+## Voir aussi
 
-## Compatibilité des navigateurs
+- [Rognage et masquage avec CSS (en anglais)](https://css-tricks.com/clipping-masking-css/)
 
-{{Compat("css.properties.mask-size")}}
diff --git a/files/fr/web/css/object-fit/index.md b/files/fr/web/css/object-fit/index.md
index c07c52479d..bd4a88b602 100644
--- a/files/fr/web/css/object-fit/index.md
+++ b/files/fr/web/css/object-fit/index.md
@@ -1,35 +1,33 @@
 ---
 title: object-fit
 slug: Web/CSS/object-fit
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/object-fit
+browser-compat: css.properties.object-fit
 ---
 {{CSSRef}}
 
-La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) ({{HTMLElement("img")}} ou {{HTMLElement("video")}} par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.
+La propriété CSS **`object-fit`** définit la façon dont le contenu d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) ([`<img>`](/fr/docs/Web/HTML/Element/Img) ou [`<video>`](/fr/docs/Web/HTML/Element/video) par exemple) doit s'adapter à son conteneur en utilisant sa largeur et sa hauteur.
 
 {{EmbedInteractiveExample("pages/css/object-fit.html")}}
 
 Selon la valeur utilisée pour `object-fit`, l'élément peut être rogné, mis à l'échelle ou étiré, afin de remplir la boîte qui le contient.
 
-> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-position")}}.
+> **Note :** Il est possible de modifier l'alignement du contenu de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-position`](/fr/docs/Web/CSS/object-position).
 
 ## Syntaxe
 
 ```css
 /* Valeurs avec un mot-clé */
-object-fit: fill;
 object-fit: contain;
 object-fit: cover;
+object-fit: fill;
 object-fit: none;
 object-fit: scale-down;
 
 /* Valeurs globales */
 object-fit: inherit;
 object-fit: initial;
+object-fit: revert;
 object-fit: unset;
 ```
 
@@ -38,9 +36,9 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su
 ### Valeurs
 
 - `contain`
-  - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu : sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
+  - : Le contenu remplacé est dimensionné pour maintenir ses proportions tout en étant ajusté à la boîte de contenu&nbsp;: sa taille réelle est résolue en utilisant la largeur et la hauteur de l'élément comme contraintes de contenant.
 - `cover`
-  - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
+  - : Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute la boîte de contenu. La taille réelle est calculée pour couvrir la zone décrite par la hauteur et la largeur de l'élément. Si les ratios de l'objet et de la boîte ne correspondent pas, le contenu remplacé sera rogné.
 - `fill`
   - : Le contenu remplacé est dimensionné pour remplir la boîte de contenu. La taille réelle de l'objet est déterminée grâce à la hauteur et à la largeur de l'élément. Il est donc étiré afin de remplir la boîte.
 - `none`
@@ -48,117 +46,109 @@ La propriété `object-fit` peut être définie grâce à l'un des mots-clés su
 - `scale-down`
   - : Le contenu est dimensionné comme si `none` ou `contain` étaient spécifiés, on prend celui qui aboutirait à une taille réelle plus petite.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{cssinfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
 ## Exemples
 
-### HTML
+### Appliquer `object-fit` à une image
 
-```html
-<div>
-  <h2>object-fit: fill</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+#### HTML
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+```html
+<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <h2>object-fit: contain</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+  <img class="fill narrow" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <h2>object-fit: cover</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+  <img class="contain narrow" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <h2>object-fit: none</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+  <img class="cover narrow" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+  <h2>object-fit: none</h2>
+  <img class="none" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <h2>object-fit: scale-down</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+  <img class="none narrow" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="mdn_logo_only_color.png" alt="Logo MDN">
 
-</div>
+  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="Logo MDN">
+</section>
 ```
 
-### CSS
+#### CSS
 
 ```css
 h2 {
-  font-family: 'Courier New', monospace;
-  font-size: 1em;
-  margin: 1em 0 0.3em;
-}
-
-div {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  height: 940px;
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
 }
 
 img {
-  width: 150px;
-  height: 100px;
-  border: 1px solid #000;
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  margin: 10px 0;
 }
 
 .narrow {
   width: 100px;
-  height: 150px;
-  margin-top: 10px;
+  height: 150px;
 }
 
 .fill {
-  object-fit: fill;
+  object-fit: fill;
 }
 
 .contain {
-  object-fit: contain;
+  object-fit: contain;
 }
 
 .cover {
-  object-fit: cover;
+  object-fit: cover;
 }
 
 .none {
-  object-fit: none;
+  object-fit: none;
 }
 
 .scale-down {
-  object-fit: scale-down;
+  object-fit: scale-down;
 }
 ```
 
-### Résultat
+#### Résultat
 
-{{EmbedLiveSample('Exemples', 500, 450)}}
+{{EmbedLiveSample('', 500, 1100)}}
 
 ## Spécifications
 
-| Spécification                                                                    | État                             | Commentaires                                          |
-| -------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- |
-| {{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS4 Images')}} | Les mots-clés `from-image` et `flip` ont été ajoutés. |
-| {{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} | {{Spec2('CSS3 Images')}} | Définition initiale.                                  |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.object-fit")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("background-size")}}
-- Les autres propriétés CSS liées aux images :
+- [`background-size`](/fr/docs/Web/CSS/background-size)
 
-  - {{cssxref("object-position")}}
-  - {{cssxref("image-orientation")}}
-  - {{cssxref("image-rendering")}}
-  - {{cssxref("image-resolution")}}
+- Les autres propriétés CSS liées aux images&nbsp;:
+  - [`object-position`](/fr/docs/Web/CSS/object-position)
+  - [`image-orientation`](/fr/docs/Web/CSS/image-orientation)
+  - [`image-rendering`](/fr/docs/Web/CSS/Image-rendering)
+  - [`image-resolution`](/fr/docs/Web/CSS/image-resolution)
diff --git a/files/fr/web/css/object-position/index.md b/files/fr/web/css/object-position/index.md
index 6028bcbbfd..0198ad2fdf 100644
--- a/files/fr/web/css/object-position/index.md
+++ b/files/fr/web/css/object-position/index.md
@@ -1,19 +1,16 @@
 ---
 title: object-position
 slug: Web/CSS/object-position
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/object-position
+browser-compat: css.properties.object-position
 ---
 {{CSSRef}}
 
-La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9) au sein de sa boîte. Les zones de la boîtes qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.
+La propriété **`object-position`** détermine l'alignement d'un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) au sein de sa boîte. Les zones de la boîte qui ne sont pas recouvertes par le contenu de l'élément remplacé montreront l'arrière-plan de l'élément.
 
-{{EmbedInteractiveExample("pages/css/object-position.html")}}
+> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété [`object-fit`](/fr/docs/Web/CSS/object-fit).
 
-> **Note :** Il est possible d'ajuster la taille de l'élément remplacé au sein de la boîte de l'élément grâce à la propriété {{cssxref("object-fit")}}.
+{{EmbedInteractiveExample("pages/css/object-position.html")}}
 
 ## Syntaxe
 
@@ -26,15 +23,20 @@ object-position: 100px 50px;
 /* Valeurs globales */
 object-position: inherit;
 object-position: initial;
+object-position: revert;
 object-position: unset;
 ```
 
 ### Valeurs
 
 - `<position>`
-  - : Une valeur de type {{cssxref("&lt;position&gt;")}}, c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
+  - : Une valeur de type [`<position>`](/fr/docs/Web/CSS/position_value), c'est-à-dire une à quatre valeurs permettant de définir une position en deux dimensions par rapport aux limites de la boîte dans laquelle est placé l'élément. On peut donner des décalages absolus ou relatifs. On notera que la position peut être définie en dehors de la boîte de l'élément.
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -42,21 +44,25 @@ object-position: unset;
 
 ### HTML
 
+Dans ce fragment HTML, on a deux éléments [`<img>`](/fr/docs/Web/HTML/Element/img), chacun affichant le logo de MDN.
+
 ```html
-<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
-<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-1" src="mdn.svg" alt="Logo MDN"/>
+<img id="object-position-2" src="mdn.svg" alt="Logo MDN"/>
 ```
 
 ### CSS
 
+Le code CSS implique la mise en forme par défaut pour les éléments `<img>` et des styles différents pour les deux images.
+
 ```css
 img {
-   width: 300px;
-   height: 250px;
-   border: 1px solid black;
-   background-color: silver;
-   margin-right: 1em;
-   object-fit: none;
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
 }
 
 #object-position-1 {
@@ -68,27 +74,25 @@ img {
 }
 ```
 
+La première image est positionnée avec son bord gauche situé à 10 pixels du bord gauche de la boîte de l'élément. La seconde image est positionnée avec son bord droit poussé sur le bord droit de la boîte de l'élément et est située vers le bas de 10% de la hauteur de la boîte de l'élément.
+
 ### Résultat
 
-{{EmbedLiveSample('Exemples', '100%','300px')}}
+{{EmbedLiveSample('', '100%','600px')}}
 
 ## Spécifications
 
-| Spécification                                                                                | État                             | Commentaires         |
-| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
-| {{SpecName('CSS3 Images', '#the-object-position', 'object-position')}} | {{Spec2('CSS3 Images')}} | Définition initiale. |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.object-position")}}
+{{Compat}}
 
 ## Voir aussi
 
-- Les autres propriétés CSS liées aux images :
+- Les autres propriétés CSS liées aux images&nbsp;:
 
-  - {{cssxref("object-fit")}}
-  - {{cssxref("image-orientation")}}
-  - {{cssxref("image-rendering")}}
-  - {{cssxref("image-resolution")}}
+  - [`object-fit`](/fr/docs/Web/CSS/object-fit)
+  - [`image-orientation`](/fr/docs/Web/CSS/image-orientation)
+  - [`image-rendering`](/fr/docs/Web/CSS/image-rendering)
+  - [`image-resolution`](/fr/docs/Web/CSS/image-resolution)
diff --git a/files/fr/web/css/position/index.md b/files/fr/web/css/position/index.md
index bbd7c79d26..a10ada64c1 100644
--- a/files/fr/web/css/position/index.md
+++ b/files/fr/web/css/position/index.md
@@ -1,64 +1,88 @@
 ---
 title: position
 slug: Web/CSS/position
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/position
+browser-compat: css.properties.position
 ---
 {{CSSRef}}
 
-La propriété **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} et {{cssxref("left")}} déterminent l'emplacement final de l'élément positionné.
+La propriété [CSS](/fr/docs/Web/CSS) **`position`** définit la façon dont un élément est positionné dans un document. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom) et [`left`](/fr/docs/Web/CSS/left) déterminent l'emplacement final de l'élément positionné.
 
 {{EmbedInteractiveExample("pages/css/position.html")}}
 
-### Types de positionnement
-
-- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`.
-- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés {{cssxref("top")}} ou {{cssxref("bottom")}} indiquent le décalage vertical à appliquer et {{cssxref("left")}} ou {{cssxref("right")}} indiquent le décalage horizontal.
-- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("right")}} et {{cssxref("left")}} indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
-- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de {{cssxref("top")}}) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.
-
-La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés {{cssxref("height")}} et {{cssxref("width")}} qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant {{cssxref("top")}} et {{cssxref("bottom")}} tout en laissant {{cssxref("height")}} indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés {{cssxref("left")}} et {{cssxref("right")}}.
-
-Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace :
-
-- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité
-- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).
-
 ## Syntaxe
 
 ```css
-/* Valeurs avec un mot-clé */
 position: static;
 position: relative;
 position: absolute;
 position: fixed;
 position: sticky;
 
-/* Valeurs globales*/
+/* Valeurs globales */
 position: inherit;
 position: initial;
+position: revert;
 position: unset;
 ```
 
-La propriété `position` peut être définie avec l'un des mots-clés de la liste suivante.
-
 ### Valeurs
 
 - `static`
-  - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("z-index")}} ne s'appliquent pas.
+  - : Comportement normal (par défaut). L'élément est alors positionné dans le flux avec sa position. Les propriétés [`top`](/fr/docs/Web/CSS/top), [`right`](/fr/docs/Web/CSS/right), [`bottom`](/fr/docs/Web/CSS/bottom), [`left`](/fr/docs/Web/CSS/left) et [`z-index`](/fr/docs/Web/CSS/z-index) ne s'appliquent pas.
+
 - `relative`
-  - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`.
+  - : L'élément est positionné dans le flux normal du document puis décalé, par rapport à lui-même, selon les valeurs fournies par `top`, `right`, `bottom` et `left`. Le décalage n'a pas d'impact sur la position des éléments. Aussi, l'espace fourni à l'élément sur la page est le même que celui fourni avec `static`.
+
+    Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. L'effet de cette valeur n'est pas défini pour les éléments `table-*-group`, `table-row`, `table-column`, `table-cell` et `table-caption`.
+
 - `absolute`
-  - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.
+  - : L'élément est retiré du flux normal et aucun espace n'est créé pour l'élément sur la page. Il est ensuite positionné par rapport à son ancêtre le plus proche qui est positionné s'il y en a un ou par rapport au bloc englobant initial sinon. La position finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`.
+
+    Cette valeur crée un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context) lorsque `z-index` ne vaut pas `auto`. Les éléments positionnés de façon absolue peuvent avoir des marges, ces marges ne fusionnent pas avec les autres marges.
+
 - `fixed`
-  - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (_viewport_), sauf si un des ancêtres a une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)) ; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certains incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`. Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_.
+  - : L'élément est retiré du flux normal et aucun espace n'est laissé pour l'élément. L'élément est positionné relativement au bloc englobant initial formé par la zone d'affichage (<i lang="en">viewport</i>), sauf si un des ancêtres a une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none` (voir [la spécification sur les transformations CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform))&nbsp;; dans ce cas, c'est l'élément ancêtre qui joue le rôle de bloc englobant. Cela empêche le défilement lorsque la page est parcourue (ou lors de l'impression, le positionne à cette position fixe pour _chaque page_). Cette valeur crée toujours un nouveau contexte d'empilement. Certaines incohérences existent entre les navigateurs quant au rôle de `perspective` et `filter` pour la définition du bloc englobant. La valeur finale de l'élément est déterminée par les valeurs de `top`, `right`, `bottom` et `left`.
+
+    Cette valeur crée toujours un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). Pour les documents imprimés, cela se traduit par le placement de l'élément au même endroit pour _chacune des pages_.
+
 - `sticky`
-  - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments. Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément « adhèrera » à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche : cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf.: cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)).
+  - : La position de la boîte est calculée en fonction du flux normal du document. Ensuite, la boîte est décalée par rapport à son ancêtre de défilement le plus proche et par rapport à [son bloc englobant](/fr/docs/Web/CSS/Containing_block) selon les valeurs de `top`, `right`, `bottom` et `left`. Dans tous les cas, y compris avec les éléments `table`, cela n'affecte pas la position des autres éléments.
+
+    Cette valeur entraîne toujours la création d'un nouveau [contexte d'empilement](/fr/docs/Glossary/Stacking_context). On notera qu'un tel élément «&nbsp;adhèrera&nbsp;» à l'ancêtre le plus proche qui dispose d'un mécanisme de défilement (c'est-à-dire quand `overflow` vaut `hidden`, `scroll`, `auto` ou `overlay`) même si cet ancêtre n'est pas nécessairement l'ancêtre de défilement le plus proche&nbsp;: cette valeur ne fonctionnera pas dans un élément pour lequel la propriété vaut `overflow: hidden` ou `auto` ([cf. cette _issue_ GitHub](https://github.com/w3c/csswg-drafts/issues/865)).
+
+## Description
+
+### Types de positionnement
+
+- Un **élément positionné** est un élément dont la propriété de position [calculée](/fr/docs/Web/CSS/computed_value) est `relative`, `absolute`, `fixed` ou `sticky`.
+- Un **élément positionné de façon relative** est un élément dont la propriété de position calculée est `relative`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top) ou [`bottom`](/fr/docs/Web/CSS/bottom) indiquent le décalage vertical à appliquer et [`left`](/fr/docs/Web/CSS/left) ou [`right`](/fr/docs/Web/CSS/right) indiquent le décalage horizontal.
+- Un **élément positionné de façon absolue** est un élément dont la propriété de position calculée est `absolute` ou `fixed`. Dans ce cas, les propriétés [`top`](/fr/docs/Web/CSS/top), [`bottom`](/fr/docs/Web/CSS/bottom), [`right`](/fr/docs/Web/CSS/right) et [`left`](/fr/docs/Web/CSS/left) indiquent les distances entre les bords de l'élément et les bords du bloc englobant (c'est-à-dire l'ancêtre par rapport auquel l'élément est positionné). Si l'élément possède des marges, elles sont ajoutées aux décalages.
+- Un **élément positionné en adhérence** est un élément dont la propriété de position calculée vaut `sticky`. Un tel élément se comporte comme un élément positionné de façon relative jusqu'à ce que son bloc englobant dépasse un seuil donné (par exemple fourni par la valeur de [`top`](/fr/docs/Web/CSS/top)) au sein du conteneur puis il se comporte ensuite comme un élément fixe jusqu'à atteindre le bord opposé du bloc englobant.
+
+La plupart du temps, les éléments positionnés de façon absolue ont leurs propriétés [`height`](/fr/docs/Web/CSS/height) et [`width`](/fr/docs/Web/CSS/width) qui valent `auto` afin que le contenu ait suffisamment d'espace. Toutefois, les éléments positionnés de façon absolue et qui ne sont pas des éléments remplacés peuvent remplir l'espace vertical en utilisant [`top`](/fr/docs/Web/CSS/top) et [`bottom`](/fr/docs/Web/CSS/bottom) tout en laissant [`height`](/fr/docs/Web/CSS/height) indéfini (c'est-à-dire avec la valeur `auto`). On pourra faire de même pour l'espace horizontal avec les propriétés [`left`](/fr/docs/Web/CSS/left) et [`right`](/fr/docs/Web/CSS/right).
+
+Sauf dans le cas précédemment énoncé des éléments positionnés de façon absolue et qui remplissent l'espace&nbsp;:
+
+- Si `top` et `bottom` sont tous les deux définis (enfin, s'ils ne valent pas `auto`), c'est `top` qui aura la priorité
+- Si `left` et `right` sont tous les deux définis, c'est `left` qui aura la priorité si la direction du texte est de gauche à droite (LTR) et `right` qui aura la priorité si la direction du texte est de droite à gauche (RTL) (par exemple en perse, arabe, hébreu).
+
+## Accessibilité
+
+Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.
+
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Présentation visuelle&nbsp;: comprendre les critères de succès 1.4.8 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
+
+### Performance et accessibilité
+
+Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisatrice ou l'utilisateur fait défiler le contenu, le navigateur doit «&nbsp;repeindre&nbsp;» le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. [`will-change`](/fr/docs/Web/CSS/will-change)) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.
+
+## Définition formelle
+
+{{cssinfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -66,6 +90,8 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis
 
 ### Positionnement relatif
 
+Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si «&nbsp;Deux&nbsp;» prenait l'espace de sa position normale.
+
 #### HTML
 
 ```html
@@ -78,46 +104,56 @@ La propriété `position` peut être définie avec l'un des mots-clés de la lis
 #### CSS
 
 ```css
+* {
+  box-sizing: border-box;
+}
+
 .box {
-   display: inline-block;
-   background: red;
-   width: 100px;
-   height: 100px;
-   color: white;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
 }
 
 #deux {
-   position: relative;
-   top: 20px;
-   left: 20px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
 }
 ```
 
 #### Résultat
 
-Dans cet exemple, on voit comment les autres éléments sont positionnés, comme si « Deux » prenait l'espace de sa position normale.
-
-{{EmbedLiveSample('Positionnement_relatif', '600px', '200px')}}
+{{EmbedLiveSample('', '600px', '200px')}}
 
 ### Positionnement absolu
 
-Les éléments qui sont positionnés de façon relatives sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolu est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)).
+Les éléments qui sont positionnés de façon relative sont toujours pris en compte dans le flux normal des éléments du document. En revanche, les éléments positionnés de façon absolue sont retirés du flux et ne prennent donc plus d'espace lorsqu'il s'agit de positionner les autres éléments. Un élément positionné de façon absolue est positionné par rapport à son plus proche ancêtre positionné. S'il n'y a pas de tel ancêtre, c'est le conteneur initial, le bloc englobant la racine du document, qui est utilisé (voir [la définition du W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)).
 
-Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte « Trois » est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici) :
+Dans l'exemple qui suit, on n'a pas d'ancêtre positionné et la boîte «&nbsp;Trois&nbsp;» est positionnée de façon absolue par rapport à l'ancêtre immédiat (l'élément `<body>` de l'`iframe` générée ici)&nbsp;:
 
 #### HTML
 
 ```html
 <h1>Positionnement absolu</h1>
-<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en-dessous.</p>
+
+<p>Un élément de bloc simple. Les éléments de bloc adjacents sont sur de nouvelles lignes en dessous.</p>
+
 <p class="positioned">Par défaut, on occupe 100% de la largeur de l'élément parent et on est aussi grand que notre contenu.</p>
 <p>Nous sommes séparés par nos marges (une seule marge en raison de la fusion des marges).</p>
-<p>Les éléments <em>inline</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les noeuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+
+<p>Les éléments <em>en ligne (inline)</em> <span>comme celui-ci</span> et <span>celui-là</span> se situent sur la même ligne avec également les nœuds texte. S'il y a de l'espace sur la même ligne. Les éléments qui dépassent <span>passent à la ligne si possible — comme pour ce texte.</span> ou cette image <img src="long.jpg"></p>
 ```
 
 #### CSS
 
 ```css
+* {
+  box-sizing: border-box;
+}
+
 body {
   width: 500px;
   margin: 0 auto;
@@ -145,11 +181,11 @@ span {
 
 #### Résultat
 
-{{EmbedLiveSample('Positionnement_absolu', '100%', 420)}}
+{{EmbedLiveSample('', '100%', 420)}}
 
 ### Positionnement fixe
 
-Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond au _viewport_ si aucun ancêtre de l'élément ne possède une propriété {{cssxref("transform")}}, {{cssxref("perspective")}} ou {{cssxref("filter")}} qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte « Un » est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.
+Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bloc englobant correspond à la zone d'affichage (<i lang="en">viewport</i>) si aucun ancêtre de l'élément ne possède une propriété [`transform`](/fr/docs/Web/CSS/transform), [`perspective`](/fr/docs/Web/CSS/perspective) ou [`filter`](/fr/docs/Web/CSS/filter) qui est différente de `none`. On utilise souvent ce positionnement pour créer un élément flottant qui reste à la même position, même lorsqu'on fait défiler la page. Dans l'exemple qui suit, la boîte «&nbsp;Un&nbsp;» est fixée à 80 pixels du haut de la page et à 20 pixels du bord gauche.
 
 #### HTML
 
@@ -180,18 +216,24 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl
 #### CSS
 
 ```css
+* {
+  box-sizing: border-box;
+}
+
 .box {
-  background: red;
   width: 100px;
   height: 100px;
-  margin: 20px;
+  background: red;
   color: white;
 }
+
 #un {
   position: fixed;
   top: 80px;
   left: 10px;
+  background: blue;
 }
+
 .outer {
   width: 500px;
   height: 300px;
@@ -202,13 +244,13 @@ Le positionnement fixe est semblable au positionnement absolu sauf qu'ici, le bl
 
 #### Résultat
 
-Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport au _viewport_ :
+Lorsqu'on regarde le haut de la page, la boîte apparaît en haut à gauche, même après avoir défilé, elle reste à la même place par rapport à la zone d'affichage (<i lang="en">viewport</i>)&nbsp;:
 
-{{EmbedLiveSample('Positionnement_fixe', '800px', '300px')}}
+{{EmbedLiveSample('', '800px', '300px')}}
 
-### Positionnement adhérent (_sticky_)
+### Positionnement adhérent (<i lang="en">sticky</i>)
 
-Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple :
+Le positionnement adhérent est un mélange de positionnement relatif et de positionnement fixe. L'élément est considéré comme positionné de façon relative, jusqu'à ce qu'un seuil soit franchi. À partir de ce seuil, l'élément est positionné de façon fixe. Par exemple&nbsp;:
 
 ```css
 #un {
@@ -217,11 +259,11 @@ Le positionnement adhérent est un mélange de positionnement relatif et de posi
 }
 ```
 
-se comportera comme un élément positionné de façon relative jusqu'à ce que le _viewport_ défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que le _viewport_ redéfile jusqu'avant ce seuil.
+positionnera l'élément avec l'identifiant `un` de façon relative jusqu'à ce que la zone d'affichage défile au point où l'élément est à moins de 10 pixels du haut. Ensuite, il sera fixé à 10 pixels du haut, jusqu'à ce que la zone d'affichage redéfile jusqu'avant ce seuil.
 
-Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut du _viewport_ jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).
+Le positionnement adhérent est souvent utilisé pour gérer les niveaux de titre dans les listes alphabétiques. Le titre pour B apparaîtra sous les éléments commençant par A jusqu'à ce que ceux-ci disparaissent de l'écran. Plutôt que de défiler avec le reste de l'écran, la lettre B restera affichée en haut de la zone d'affichage jusqu'à ce que tous les éléments commençant par B aient défilés sur l'écran (ce sera ensuite le tour de la lettre C et ainsi de suite).
 
-Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")}} ou {{cssxref("bottom")}} ou {{cssxref("left")}} pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.
+Il faut définir un seuil avec au moins [`top`](/fr/docs/Web/CSS/top) ou [`right`](/fr/docs/Web/CSS/right) ou [`bottom`](/fr/docs/Web/CSS/bottom) ou [`left`](/fr/docs/Web/CSS/left) pour que le positionnement adhérent fonctionne comme attendu. Sinon, on ne pourra pas le distinguer du positionnement relatif.
 
 #### HTML
 
@@ -264,8 +306,9 @@ Il faut définir un seuil avec au moins {{cssxref("top")}} ou {{cssxref("right")
 * {
   box-sizing: border-box;
 }
+
 dl > div {
-  margin: 0;
+  background: #FFF;
   padding: 24px 0 0 0;
 }
 
@@ -279,7 +322,6 @@ dt {
   padding: 2px 0 0 12px;
   position: -webkit-sticky;
   position: sticky;
-  width: 99%;
   top: -1px;
 }
 
@@ -297,28 +339,16 @@ dd + dd {
 
 #### Résultat
 
-{{EmbedLiveSample('Positionnement_adhérent_(sticky)', '500px', '300px')}}
-
-## Accessibilité
-
-Il faut s'assurer que les éléments positionnés avec `absolute` ou `fixed` ne masquent pas d'autre contenu sur la page lorsqu'on zoome sur la page afin d'augmenter la taille du texte.
-
-- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
-- [_Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
-
-### Performance et accessibilité
-
-Les éléments qui défilent avec du contenu utilisant `fixed` ou `sticky` peuvent entraîner des problèmes de performance et d'accessibilité. Lorsque l'utilisateur fait défiler le contenu, le navigateur doit « repeindre » le contenu adhérant ou fixé à un nouvel emplacement. Selon le contenu qui doit être repeint, les performances du navigateur et celles de l'appareil, il est possible que le contenu ne soit pas affiché de façon fluide (60fps), créant ainsi des saccades. Une solution consiste à ajouter `will-change: transform` (cf. {{cssxref("will-change")}}) aux éléments positionnés afin que le rendu de l'élément soit géré à part, améliorant ainsi les performances et l'accessibilité.
+{{EmbedLiveSample('', '500px', '300px')}}
 
 ## Spécifications
 
-| Spécification                                                                            | État                                     | Commentaires                |
-| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- |
-| {{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}} | {{Spec2('CSS2.1')}}                 |                             |
-| {{SpecName('CSS3 Positioning','#position-property','position')}}     | {{Spec2('CSS3 Positioning')}} | Ajout de la valeur `sticky` |
-
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.position")}}
+{{Compat}}
+
+## Voir aussi
+
+- [Apprendre le CSS&nbsp;: le positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning)
diff --git a/files/fr/web/css/position_value/index.md b/files/fr/web/css/position_value/index.md
index 0437058c5d..28cdfc27a5 100644
--- a/files/fr/web/css/position_value/index.md
+++ b/files/fr/web/css/position_value/index.md
@@ -1,22 +1,25 @@
 ---
 title: <position>
 slug: Web/CSS/position_value
-tags:
-  - CSS
-  - Reference
-  - Type
 translation_of: Web/CSS/position_value
 original_slug: Web/CSS/Type_position
+browser-compat: css.types.position
 ---
 {{CSSRef}}
 
-Le type de donnée CSS **`<position>`** définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément. Ce type de donnée est notamment utilisé avec la propriété {{cssxref("background-position")}}.
+Le type de donnée [CSS](/fr/docs/Web/CSS) **`<position>`** (ou **`<bg-position>`**) définit une paire de coordonnées dans l'espace (bidimensionnel) afin de définir la position relative d'une boîte. Ce type de donnée est notamment utilisé avec les propriétés [`background-position`](/fr/docs/Web/CSS/background-position) et [`offset-anchor`](/fr/docs/Web/CSS/offset-anchor).
+
+> **Note :** La position finale obtenue, décrite par la valeur `<position>`, n'est pas nécessairement située à l'intérieur de la boîte de l'élément.
 
 ## Syntaxe
 
-![](position_type.png)On peut définir un emplacement grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé. Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).
+![](position_type.png)
+
+On peut définir une position grâce à deux mots-clés avec chacun un décalage par rapport au côté correspondant à ce mot-clé.
+
+Un mot-clé représente un côté de la boîte ou la ligne du centre située entre les deux bords. Ce mot-clé sera `left`, `right`, `top`, `bottom` ou `center` (ce dernier représente le milieu entre les côtés droit et gauche ou le milieu entre les côtés haut et bas selon le contexte).
 
-Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type {{cssxref("&lt;percentage&gt;")}} ou une valeur absolue. Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).
+Le décalage peut être une valeur relative, exprimée en pourcentages (valeur de type [`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une valeur de longueur ([`<length>`](/fr/docs/Web/CSS/length)). Les valeurs positives décalent vers la droite ou vers le bas. Les valeurs négatives décalent dans l'autre sens (vers la gauche ou vers le haut).
 
 Si un seul décalage est indiqué, ce sera le décalage horizontal. Lorsqu'un seul décalage ou mot-clé est utilisé, la valeur par défaut pour l'autre axe est `center`.
 
@@ -39,67 +42,60 @@ mot-clé valeur mot-clé valeur /* Chaque valeur indique le décalage par rappor
 
 ### Syntaxe formelle
 
-    [
-     [ left | center | right ] || [ top | center | bottom ]
-    |
-     [ left | center | right | <length> | <percentage> ]
-     [ top | center | bottom | <length> | <percentage> ]?
-    |
-     [ [ left | right ] [ <length> | <percentage> ] ] &&
-     [ [ top | bottom ] [ <length> | <percentage> ] ]
-    ]
+```css
+[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+```
+
+> **Note :** La propriété [`background-position`](/fr/docs/Web/CSS/background-position) accepte également une syntaxe avec trois valeurs. Celle-ci n'est pas autorisée pour les autres propriétés qui utilisent une valeur `<position>`.
 
 ## Interpolation
 
-Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par la même fonction de temporisation ({{cssxref("easing-function")}}) et le point se déplacera donc sur une ligne.
+Les valeurs des coordonnées en abscisses et en ordonnées sont interpolées indépendamment. La vitesse de l'interpolation est définie par une unique fonction de temporisation ([`easing-function`](/fr/docs/Web/CSS/easing-function)), le point se déplacera donc sur une ligne.
 
 ## Exemples
 
-### CSS
+### Positions valides
 
-```css
-div {
-  background-color: #FFEE99;
-  background-repeat: no-repeat;
-  width: 300px;
-  height: 80px;
-  margin-bottom: 12px;
-}
-
-.exemple{
-  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 no-repeat;
-  // Ici un exemple de valeur <position>
-  background-position:  2.5cm bottom;
-}
-```
+```css example-good
+center
+left
+center top
 
-### HTML
+right 8.5%
+bottom 12vmin right -6px
 
-```html
-<div class="exemple">Exemple</div>
+10% 20%
+8rem 14px
 ```
 
-### Résultat
+### Positions invalides
 
-{{EmbedLiveSample('Exemples', 120, 200)}}
+```css example-bad
+left right
+bottom top
+10px 15px 20px 15px
+```
 
 ## Spécifications
 
-| Spécification                                                                                                    | État                                     | Commentaires                                                                                                                                                                                                           |
-| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Values', '#position', '&lt;position&gt;')}}                                 | {{Spec2('CSS3 Values')}}         | Renvoie aux deux définitions avec la contrainte suivante qui permet d'être cohérent : si {{SpecName('CSS3 Backgrounds')}} est pris en charge, c'est sa définition de  `<position>` qui doit être utilisée. |
-| {{SpecName('CSS3 Backgrounds', '#position', '&lt;position&gt;')}}                         | {{Spec2('CSS3 Backgrounds')}} | `<position>` est défini de façon explicite et est étendu afin de pouvoir exprimer un décalage depuis n'importe quel côté.                                                                                              |
-| {{SpecName('CSS2.1', 'colors.html#propdef-background-position', '&lt;position&gt;')}} | {{Spec2('CSS2.1')}}                 | Autorise la combinaison d'un mot-clé et d'une valeur {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}}.                                                                         |
-| {{SpecName('CSS1', '#background-position', '&lt;position&gt;')}}                             | {{Spec2('CSS1')}}                 | `<position>` est défini de façon anonyme comme valeur de {{cssxref("background-position")}}.                                                                                                                 |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.types.position")}}
+{{Compat}}
 
 ## Voir aussi
 
 - [Valeurs et unités en CSS](/fr/docs/Web/CSS/CSS_Values_and_Units)
-- [Tutoriel - Introduction aux valeurs et unités CSS](/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
-- {{cssxref("background-position")}}
-- {{cssxref("radial-gradient","radial-gradient()")}}
-- {{cssxref("conic-gradient","conic-gradient()")}}
+- [Tutoriel — Introduction aux valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [`background-position`](/fr/docs/Web/CSS/background-position)
+- [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient())
+- [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient())
diff --git a/files/fr/web/css/text-combine-upright/index.md b/files/fr/web/css/text-combine-upright/index.md
index 60ae92446f..38546b2597 100644
--- a/files/fr/web/css/text-combine-upright/index.md
+++ b/files/fr/web/css/text-combine-upright/index.md
@@ -1,18 +1,14 @@
 ---
 title: text-combine-upright
 slug: Web/CSS/text-combine-upright
-tags:
-  - CSS
-  - Experimental
-  - Propriété
-  - Reference
 translation_of: Web/CSS/text-combine-upright
+browser-compat: css.properties.text-combine-upright
 ---
 {{CSSRef}}
 
-La propriété **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.
+La propriété [CSS](/fr/docs/Web/CSS) **`text-combine-upright`** définit comment intégrer une combinaison de plusieurs caractères dans l'espace normalement alloué à un seul caractère. Si la combinaison obtenue est plus large qu'`1em`, l'agent utilisateur devra compresser le contenu afin qu'il tienne sur `1em`. La combinaison est ensuite manipulée comme un seul glyphe pour la disposition et pour la décoration. Enfin, cette propriété n'a d'effet que sur les modes d'écriture verticaux.
 
-Cela permet d'obtenir un effet appelé tate-chū-yoko (縦中横) en japonais ou 直書橫向 en chinois.
+Cela permet d'obtenir un effet appelé «&nbsp;tate-chū-yoko (縦中横)&nbsp;» en japonais ou «&nbsp;直書橫向&nbsp;» en chinois.
 
 ```css
 /* Valeurs avec un mot-clé */
@@ -20,17 +16,15 @@ text-combine-upright: none;
 text-combine-upright: all;
 
 /* Valeurs pour les chiffres */
-/* 2 chiffres qui se suivent prendront la place
-   d'un caractère dans du texte vertical */
-text-combine-upright: digits;
-/* Compresse jusqu'à 4 chiffres consécutifs afin
-   qu'ils occupent l'espace d'un caractère dans
-   du texte vertical */
-text-combine-upright: digits 4;
+text-combine-upright: digits;   /* 2 chiffres qui se suivent prendront la place d'un caractère dans du texte 
+                                   vertical */
+text-combine-upright: digits 4; /* Compresse jusqu'à 4 chiffres consécutifs afin qu'ils occupent l'espace 
+                                   d'un caractère dans du texte vertical */
 
 /* Valeurs globales */
 text-combine-upright: inherit;
 text-combine-upright: initial;
+text-combine-upright: revert;
 text-combine-upright: unset;
 ```
 
@@ -43,9 +37,13 @@ text-combine-upright: unset;
 - `all`
   - : L'agent utilisateur tente de compresser tous les caractères consécutifs dans une même boîte afin qu'ils occupent l'espace d'un seul caractère sur l'axe vertical de la boîte.
 - `digits <n>?`
-  - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030–U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides.
+  - : L'agent utilisateur tente d'afficher une suite de chiffres ASCII (U+0030-U+0039) avec au plus n caractères afin que cette suite occupe l'espace d'un seul caractère sur l'axe vertical de la boîte. La valeur par défaut (lorsque l'entier n'est pas indiqué) vaut 2. Les entiers en dehors de l'intervalle `[2;4]` sont considérés comme invalides.
 
-### Syntaxe formelle
+## Définition formelle
+
+{{CSSInfo}}
+
+## Syntaxe formelle
 
 {{csssyntax}}
 
@@ -53,53 +51,60 @@ text-combine-upright: unset;
 
 ### Exemple avec `digits`
 
-Utiliser ` digit``s ` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.
+Utiliser `digits` nécessite moins de règles et déclarations mais n'est pas encore largement pris en charge par les navigateurs.
+
+#### HTML
 
 ```html
-<p lang="ja" class="exempleText">平成20年4月16日に</p>
+<p lang="ja" class="texteExemple">平成20年4月16日に</p>
 ```
 
+#### CSS
+
 ```css
-.exempleText {
+.texteExemple {
   writing-mode: vertical-lr;
   text-combine-upright: digits 2;
   font: 36px serif;
 }
 ```
 
-{{EmbedLiveSample("Exemple_avec_digits", 100, 350, "https://mdn.mozillademos.org/files/12127/tate-chu-yoko.png")}}
+#### Résultat
+
+{{EmbedLiveSample('', 100, 350, "tate-chu-yoko.png")}}
 
 ### Exemple avec `all`
 
 Pour utiliser `all`, on devra baliser chaque fragment de texte horizontal mais cette valeur est actuellement mieux prise en charge que `digits`.
 
+#### HTML
+
 ```html
 <p lang="zh-Hant">民國<span class="num">105</span
 >年<span class="num">4</span
 >月<span class="num">29</span>日</p>
 ```
 
+#### CSS
+
 ```css
 html { writing-mode: vertical-rl; font: 24px serif }
 .num { text-combine-upright: all }
 ```
 
-{{EmbedLiveSample("Exemple_avec_all", 250, 300, "https://mdn.mozillademos.org/files/13096/text-combine-upright-all.png")}}
+#### Résultat
 
-## Spécifications
+{{EmbedLiveSample('', 250, 300, "text-combine-upright-all.png")}}
 
-| Spécification                                                                                                            | État                                     | Commentaires                 |
-| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- |
-| {{SpecName("CSS3 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS3 Writing Modes")}} | Définition initiale.         |
-| {{SpecName("CSS4 Writing Modes", "#propdef-text-combine-upright", "text-combine-upright")}} | {{Spec2("CSS4 Writing Modes")}} | Ajout de la valeur `digits`. |
+## Spécifications
 
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.text-combine-upright")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("writing-mode")}},
-- {{cssxref("text-orientation")}}
+- [`writing-mode`](/fr/docs/Web/CSS/writing-mode),
+- [`text-orientation`](/fr/docs/Web/CSS/text-orientation)
diff --git a/files/fr/web/css/url()/index.md b/files/fr/web/css/url()/index.md
index 228065095b..d914cc0ee0 100644
--- a/files/fr/web/css/url()/index.md
+++ b/files/fr/web/css/url()/index.md
@@ -1,101 +1,119 @@
 ---
 title: url()
 slug: Web/CSS/url()
-tags:
-  - CSS
-  - Fonction
-  - Reference
-  - Web
-  - url()
 translation_of: Web/CSS/url()
+browser-compat: css.types.url
 ---
 {{CSSRef}}
 
-La fonction CSS **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme {{cssxref('attr()')}}. Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de stye.
+La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style.
 
-La notation fonctionelle `url()` correspond au type de donnée CSS [`<url>`](</fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f>).
+La notation fonctionnelle `url()` correspond au type de donnée CSS `<url>`.
+
+> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource.
+>
+> Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données `<uri>`. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies `<url>`.
 
 ```css
 /* Utilisation simple */
-url(https://example.com/images/myImg.jpg);
+url(https://example.com/images/monImg.jpg);
 url(data:image/png;base64,iRxVB0…);
-url(myFont.woff);
-url(#IDofSVGpath);
+url(maPolice.woff);
+url(#IDdeCheminSVG);
 
 /* Propriétés utilisables */
-background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+background-image: url("star.gif");
 list-style-image: url('../images/bullet.jpg');
 content: url("pdficon.jpg");
-cursor: url(mycursor.cur);
+cursor: url(moncurseur.cur);
 border-image-source: url(/media/diamonds.png);
-src: url('fantasticfont.woff');
+src: url('superpolice.woff');
 offset-path: url(#path);
-mask-image: url("masks.svg#mask1");
+mask-image: url("masques.svg#masque1");
 
 /* Propriétés avec valeurs de recours */
 cursor: url(pointer.cur), pointer
 
 /* Propriétés raccourcies associées */
-background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+background: url('star.gif') bottom right repeat-x blue;
 border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
 
 /* Utilisation comme paramètre d'une fonction CSS */
 background-image: cross-fade(20% url(first.png), url(second.png));
-mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent);
+mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent));
 
 /* Utilisation avec plusieurs valeurs */
 content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
 
 /* Règles @ / at-rules */
-@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@document url("https://www.example.com/") { ... } /* expérimental */
 @import url("https://www.example.com/style.css");
 @namespace url(http://www.w3.org/1999/xhtml);
 ```
 
-Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante).
-
-La fonction **`url()`** peut être incluse comme valeur pour les propriétés {{cssxref('background-image')}}, {{cssxref('border-image')}}, {{cssxref('list-style-image')}}, {{cssxref('content' )}}, {{cssxref('cursor')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols)
+Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante.
 
-Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne permettait que de décrire des URL. Avec la spécification de niveau 2, la définition d'`url()` a été étendue afin de décrire n'importe quel URI, y compris des URI de données. Le module de spécification _CSS Values and Units_ de niveau 3 est revenu à la définition initiale plus stricte. Aussi, à l'heure actuelle et formellement `url()` ne permet que de décrire des valeurs `<url>`.
+La fonction **`url()`** peut être incluse comme valeur pour les propriétés [`background`](/fr/docs/Web/CSS/background), [`background-image`](/fr/docs/Web/CSS/background-image), [`border`](/fr/docs/Web/CSS/border), [`border-image`](/fr/docs/Web/CSS/border-image), [`border-image-source`](/fr/docs/Web/CSS/border-image-source), [`content`](/fr/docs/Web/CSS/content), [`cursor`](/fr/docs/Web/CSS/cursor), [`filter`](/fr/docs/Web/CSS/filter), [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`mask`](/fr/docs/Web/CSS/mask), [`mask-image`](/fr/docs/Web/CSS/mask-image), [`offset-path`](/fr/docs/Web/CSS/offset-path), comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols)
 
 ## Syntaxe
 
 ### Valeurs
 
-- `string`
+- `<string>`
 
   - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG.
 
     - `<url>`
 
-      - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de donnée éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes :
+      - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de données éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes&nbsp;:
 
-            <propriété_css>: url("https://example.com/image.png")
-            <propriété_css>: url('https://example.com/image.png')
-            <propriété_css>: url(https://example.com/image.png)
+        ```css
+        <propriete_css>: url("https://example.com/image.png")
+        <propriete_css>: url('https://example.com/image.png')
+        <propriete_css>: url(https://example.com/image.png)
+        ```
 
-        Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets(`"`) faisant partie de l'URL.
+      Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets (`"`) faisant partie de l'URL.
 
-- _chemin_
-  - : La référence à un identifiant d'une [forme SVG](/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, or `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.
+    - `chemin`
+      - : La référence à un identifiant d'une [forme SVG](/fr/docs/Web/SVG/Tutorial/Basic_Shapes), `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, ou `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin.
+  
 - `url-modifier` {{Experimental_Inline}}
   - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge.
 
 ### Syntaxe formelle
 
-    url( <string> <url-modifier>* )
+```css
+url( <string> <url-modifier>* )
+```
 
 ## Exemples
 
-### Propriété `content`
+### Une URL utilisée pour la propriété `background`
+
+```css
+.topbanner {
+  background: url("banniere_haut.png") #00D no-repeat fixed;
+}
+```
+
+### Une URL pour une image de puce pour une liste
+
+```css
+ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+```
+
+### Utilisation avec la propriété `content`
 
 #### HTML
 
 ```html
 <ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
+  <li>Élément 1</li>
+  <li>Élément 2</li>
+  <li>Élément 3</li>
 </ul>
 ```
 
@@ -103,15 +121,15 @@ Dans la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne per
 
 ```css
 li::after {
-  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+  content: ' - ' url(star.gif);
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample("Propriété_content", "100%", 50)}}
+{{EmbedLiveSample("", "100%", 150)}}
 
-### URI de données
+### Utilisation d'un URI de données
 
 #### HTML
 
@@ -123,38 +141,52 @@ li::after {
 
 ```css hidden
 .background {
-  height: 100vh;
+  height: 100vh;
 }
 ```
 
 ```css
 .background {
-  background: yellow;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
+  background: yellow;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E");
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample("URI_de_données", "100%", 50)}}
+{{EmbedLiveSample("", "100%", 50)}}
+
+### Utilisation pour les filtres
+
+Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être&nbsp;:
+
+1. Le chemin d'un fichier SVG avec l'ancre qui pointe vers l'identifiant du filtre.
+2. Ou l'identifiant du filtre si le SVG existe déjà sur la page.
+
+```css
+.blur {
+  filter: url(mon-fichier.svg#svg-blur);
+  /* L'URL d'un fichier SVG utilisé comme filtre */
+}
+
+.inline-blur {
+  filter: url(#svg-blur);
+  /* L'identifiant d'un SVG déjà chargé sur la page HTML */
+}
+```
 
 ## Spécifications
 
-| Spécification                                                        | État                             | Commentaires                                                                               |
-| -------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------ |
-| {{SpecName('CSS4 Values', '#urls', 'url()')}}         | {{Spec2('CSS4 Values')}} |                                                                                            |
-| {{SpecName('CSS3 Values', '#urls', 'url()')}}         | {{Spec2('CSS3 Values')}} | Aucune modification significative depuis la spécification de niveau 2 (première révision). |
-| {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}} | {{Spec2('CSS2.1')}}         | Aucune modification significative depuis la spécification de niveau 1.                     |
-| {{SpecName('CSS1', '#url', 'url()')}}                     | {{Spec2('CSS1')}}         | Définition initiale.                                                                       |
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.types.url")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("&lt;gradient&gt;")}}
-- {{cssxref("element()")}}
-- {{cssxref("_image","image()")}}
-- {{cssxref("image-set","image-set()")}}
-- {{cssxref("cross-fade()")}}
+- [`<gradient>`](/fr/docs/Web/CSS/gradient)
+- [`element()`](/fr/docs/Web/CSS/element())
+- [`image()`](/fr/docs/Web/CSS/image/image())
+- [`image-set()`](/fr/docs/Web/CSS/image/image-set())
+- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade())
diff --git a/files/fr/web/css/vertical-align/index.md b/files/fr/web/css/vertical-align/index.md
index 70a28e1e59..d6f3049f21 100644
--- a/files/fr/web/css/vertical-align/index.md
+++ b/files/fr/web/css/vertical-align/index.md
@@ -1,24 +1,21 @@
 ---
 title: vertical-align
 slug: Web/CSS/vertical-align
-tags:
-  - CSS
-  - Propriété
-  - Reference
 translation_of: Web/CSS/vertical-align
+browser-compat: css.properties.vertical-align
 ---
 {{CSSRef}}
 
-La propriété **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (_inline_) ou d'une cellule de tableau.
+La propriété [CSS](/fr/docs/Web/CSS) **`vertical-align`** définit l'alignement vertical d'une boîte en ligne (<i lang="en">inline</i>), en ligne / bloc (<i lang="en">inline-block</i>) ou d'une boîte de cellule de tableau.
 
 {{EmbedInteractiveExample("pages/css/vertical-align.html")}}
 
-La propriété `vertical-align` peut être utilisée dans deux contextes :
+La propriété `vertical-align` peut être utilisée dans deux contextes&nbsp;:
 
-- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ({{HTMLElement("img")}} sur une ligne de texte)
+- Afin d'aligner verticalement la boîte d'un élément en ligne à l'intérieur de la boîte en ligne de son conteneur (par exemple pour aligner verticalement une image ([`<img>`](/fr/docs/Web/HTML/Element/Img) sur une ligne de texte)
 - ou pour aligner verticalement le contenu d'une cellule dans un tableau
 
-`vertical-align` ne s'applique qu'aux cellules de tableaux et aux éléments en ligne (_inline_), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Éléments_en_bloc).
+`vertical-align` ne s'applique qu'aux cellules de tableaux, aux éléments en ligne (<i lang="en">inline</i>) ou en ligne / bloc (<i lang="en">inline-block</i>), elle ne peut pas être utilisée pour aligner verticalement [les éléments de bloc](/fr/docs/Web/HTML/Block-level_elements).
 
 ## Syntaxe
 
@@ -45,17 +42,19 @@ vertical-align: 20%;
 /* Valeurs globales */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
 vertical-align: unset;
 ```
+La propriété `vertical-align` s'utilise avec une des valeurs suivantes.
 
-### Valeurs
+### Valeurs pour les éléments en lignes
 
-#### Pour les éléments _inline_
+#### Valeurs relatives au parent
 
-> **Note :** La plupart des valeurs alignent l'élément verticalement, relativement à son élément parent.
+Ces valeurs alignent l'élément verticalement, relativement à son élément parent.
 
 - `baseline`
-  - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé), comme {{HTMLElement("textarea")}}, n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.
+  - : Aligne la ligne de base de l'élément avec celle de son parent. La ligne de base de certains [éléments remplacés](/fr/docs/Web/CSS/Replaced_element), comme [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea), n'est pas définie par la spécification HTML et le comportement de ce mot-clé peut donc changer d'un navigateur à un autre.
 - `sub`
   - : Aligne la ligne de base sur la ligne de base inférieure (celle utilisée pour les indices) de l'élément parent.
 - `super`
@@ -65,13 +64,15 @@ vertical-align: unset;
 - `text-bottom`
   - : Aligne le bas de l'élément avec le bas de la police de l'élément parent.
 - `middle`
-  - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur.
-- {{cssxref("&lt;length&gt;")}}
+  - : Aligne le milieu de l'élément avec la hauteur donnée par la ligne de base de l'élément parent à laquelle on ajoute la moitié de sa hauteur en x (<i lang="en">x-height</i>).
+- [`<length>`](/fr/docs/Web/CSS/length)
   - : Aligne la ligne de base de l'élément à la hauteur de la ligne de base de l'élément parent à laquelle on ajoute la hauteur donnée. Les valeurs négatives sont autorisées.
-- {{cssxref("&lt;percentage&gt;")}}
-  - : Fonctionne comme avec les valeurs de type {{cssxref("&lt;length&gt;")}}, le pourcentage indique une fraction de la propriété {{cssxref("line-height")}}. Les valeurs négatives sont autorisées.
+- [`<percentage>`](/fr/docs/Web/CSS/percentage)
+  - : Fonctionne comme avec les valeurs de type [`<length>`](/fr/docs/Web/CSS/length), le pourcentage indique une fraction de la propriété [`line-height`](/fr/docs/Web/CSS/line-height). Les valeurs négatives sont autorisées.
 
-Les valeurs suivantes alignent l'élément par rapport à la ligne entière (absolu) plutôt que par rapport à leur parent (relatif) :
+#### Valeurs relatives à la ligne
+
+Les valeurs suivantes alignent l'élément par rapport à la ligne entière plutôt que par rapport à leur parent&nbsp;:
 
 - `top`
   - : Aligne le haut de l'élément et de ses descendants avec le haut de la ligne entière.
@@ -80,78 +81,163 @@ Les valeurs suivantes alignent l'élément par rapport à la ligne entière (abs
 
 Pour les éléments qui n'ont pas de ligne de base définie, c'est le bord de la marge basse qui est utilisée.
 
-#### Pour les cellules de tableau
+### Pour les cellules de tableau
 
 - `baseline`, `sub`, `super`, `text-top`, `text-bottom`, `<length>` et `<percentage>`
-  - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base. Les valeurs négatives sont autorisées.
+  - : La ligne de base de la cellule est alignée avec celle de toutes les autres cellules de la ligne courante qui sont alignées par rapport à la ligne de base.
 - `top`
-  - : Aligne le bord haut de la boîte de remplissage (_padding_) de la cellule avec le haut de la ligne.
+  - : Aligne le bord haut de la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec le haut de la ligne.
 - `middle`
-  - : Centre la boîte de remplissage (_padding_) de la cellule avec la ligne.
+  - : Centre la boîte de remplissage (<i lang="en">padding</i>) de la cellule avec la ligne.
 - `bottom`
-  - : Aligne le bord bas de la boîte de remplissage (_padding_) avec le bas de la ligne.
+  - : Aligne le bord bas de la boîte de remplissage (<i lang="en">padding</i>) avec le bas de la ligne.
+
+## Définition formelle
+
+{{CSSInfo}}
 
-### Syntaxe formelle
+## Syntaxe formelle
 
 {{csssyntax}}
 
-## Exemple
+## Exemples
+
+### Exemple simple
 
 #### HTML
 
 ```html
-<div>
-  Une <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="une icone générique" width="32" height="32" />
-  image alignée par défaut.
-</div>
-<div>
-  Une <img class="haut" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
-  image alignée avec text-top.
-</div>
-<div>
-  Une <img class="bas" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
-  image alignée avec text-bottom.</div>
-<div>
-  Une <img class="pourcents" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" />
-  image alignée avec 200%.
-</div>
+<div>Une <img src="frame_image.svg" alt="link" width="32" height="32"/> image avec
+ un alignement par défaut.</div>
+<div>Une <img class="top" src="frame_image.svg" alt="link" width="32" height="32"/> image avec
+ un alignement en haut du texte.</div>
+<div>Une <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32"/> image avec
+ un alignement en bas du texte.</div>
+<div>Une <img class="middle" src="frame_image.svg" alt="link" width="32" height="32"/> image avec
+ un alignement au milieu.</div>
 ```
 
 #### CSS
 
 ```css
-img.haut {
-  vertical-align: text-top;
+img.top { vertical-align: text-top; }
+img.bottom { vertical-align: text-bottom; }
+img.middle { vertical-align: middle; }
+```
+
+#### Résultat
+
+{{EmbedLiveSample("")}}
+
+### Alignement vertical sur une boîte de ligne
+
+#### HTML
+
+```html
+<p>
+top:         <img style="vertical-align: top" src="star.png"/>
+middle:      <img style="vertical-align: middle" src="star.png"/>
+bottom:      <img style="vertical-align: bottom" src="star.png"/>
+super:       <img style="vertical-align: super" src="star.png"/>
+sub:         <img style="vertical-align: sub" src="star.png"/>
+</p>
+
+<p>
+text-top:    <img style="vertical-align: text-top" src="star.png"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png"/>
+-1em:        <img style="vertical-align: -1em" src="star.png"/>
+20%:         <img style="vertical-align: 20%" src="star.png"/>
+-100%:       <img style="vertical-align: -100%" src="star.png"/>
+</p>
+```
+
+```css hidden
+#* {
+  box-sizing: border-box;
 }
-img.bas {
-  vertical-align: text-bottom;
+
+img {
+  margin-right: 0.5em;
 }
-img.pourcents {
-  vertical-align: 200%;
+
+p {
+  height: 3em;
+  padding: 0 .5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
 }
 ```
 
 #### Résultat
 
-{{EmbedLiveSample("Exemple")}}
+{{EmbedLiveSample("", '100%', 160)}}
 
-## Spécifications
+### Alignement vertical d'une cellule de tableau
+
+#### HTML
+
+```html
+<table>
+  <tr>
+    <td style="vertical-align: baseline">baseline</td>
+    <td style="vertical-align: top">top</td>
+    <td style="vertical-align: middle">middle</td>
+    <td style="vertical-align: bottom">bottom</td>
+    <td>
+      <p>Elle voulait savoir si elle grandissait ou rapetissait, et fut
+         tout étonnée de rester la même; franchement, c'est ce qui
+         arrive le plus souvent lorsqu'on mange du gâteau; mais Alice
+         avait tellement pris l'habitude de s'attendre à des choses
+         extraordinaires, que cela lui paraissait ennuyeux et stupide
+         de vivre comme tout le monde.</p>
+      <p>Aussi elle se remit à l'œuvre, et eut bien vite fait
+         disparaître le gâteau.</p>
+    </td>
+  </tr>
+</table>
+```
+
+#### CSS
 
-| Spécification                                                                                            | État                                     | Commentaires                                                                                                                                                          |
-| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| {{SpecName('CSS3 Transitions', '#animatable-css', 'vertical-align')}}             | {{Spec2('CSS3 Transitions')}} | `vertical-align` peut désormais être animée.                                                                                                                          |
-| {{SpecName('CSS2.1', 'visudet.html#propdef-vertical-align', 'vertical-align')}} | {{Spec2('CSS2.1')}}                 | Ajoute la valeur {{cssxref("&lt;length&gt;")}} et permet d'appliquer la propriété aux éléments dont {{cssxref("display")}} est de type `table-cell`. |
-| {{SpecName('CSS1', '#vertical-align', 'vertical-align')}}                             | {{Spec2('CSS1')}}                 | Définition initiale.                                                                                                                                                  |
+```css
+table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table, th, td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+```
+
+#### Résultat
+
+{{EmbedLiveSample("", '100%', 230)}}
+
+
+## Spécifications
 
-{{cssinfo}}
+{{Specifications}}
 
 ## Compatibilité des navigateurs
 
-{{Compat("css.properties.vertical-align")}}
+{{Compat}}
 
 ## Voir aussi
 
-- {{cssxref("line-height")}}, {{cssxref("text-align")}}, {{cssxref("margin")}}
-- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement](https://phrogz.net/css/vertical-align/index.html) (en anglais)
-- [Tout ce qu'il y a à savoir sur `vertical-align`](https://christopheraue.net/design/vertical-align) (en anglais)
-- [Centrer des éléments avec _flexbox_](/fr/docs/Web/CSS/Disposition_flexbox_CSS/Cas_utilisation_flexbox#Centrer_des_éléments)
+- [Centrer des éléments avec Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#centrer_des_éléments)
+- [`line-height`](/fr/docs/Web/CSS/line-height)
+- [`text-align`](/fr/docs/Web/CSS/text-align)
+- [`margin`](/fr/docs/Web/CSS/margin)
+- [Comprendre `vertical-align` ou comment (ne pas) centrer des éléments verticalement (en anglais)](http://phrogz.net/css/vertical-align/index.html)
+- [Tout ce qu'il y a à savoir sur `vertical-align` (en anglais)](https://christopheraue.net/design/vertical-align)
-- 
cgit v1.2.3-54-g00ecf


From 1cd4fe900a1f3bbe6d4aca0c47bbd5100f640bd1 Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Tue, 15 Mar 2022 02:04:58 -0400
Subject: Update french operator precedence table (#4595)

* Update JS operator precedence table

* Fix sentence about precedence table
---
 .../operators/operator_precedence/index.md         | 272 ++++++++++-----------
 1 file changed, 126 insertions(+), 146 deletions(-)

diff --git a/files/fr/web/javascript/reference/operators/operator_precedence/index.md b/files/fr/web/javascript/reference/operators/operator_precedence/index.md
index 367e9624fb..dabf2bb2a5 100644
--- a/files/fr/web/javascript/reference/operators/operator_precedence/index.md
+++ b/files/fr/web/javascript/reference/operators/operator_precedence/index.md
@@ -44,7 +44,7 @@ avec le résultat attendu que `a` et `b` obtiennent la même valeur de 5. C'est
 
 ## Tableau
 
-Le tableau suivant est classé de la plus haute (0) à la plus basse (19) précédence.
+Le tableau suivant est classé de la plus haute (19) à la plus basse (1) précédence.
 
 <table class="fullwidth-table">
   <tbody>
@@ -55,9 +55,9 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <th>Opérateurs individuels</th>
     </tr>
     <tr>
-      <td>0</td>
+      <td>19</td>
       <td>
-        <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Groupement"
+        <a href="/fr/docs/Web/JavaScript/Reference/Operators/Grouping"
           >Groupement</a
         >
       </td>
@@ -65,31 +65,30 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <td><code>( … )</code></td>
     </tr>
     <tr>
-      <td colspan="1" rowspan="5">1</td>
+      <td colspan="1" rowspan="5">18</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_point"
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors#notation_avec_point"
           >Accès à un membre</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="2">Gauche à droite</td>
       <td><code>… . …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_membres#Notation_avec_crochets"
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors#notation_avec_crochets"
           >Accès à un membre calculé</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… [ … ]</code></td>
     </tr>
     <tr>
       <td>
         <code
           ><a
-            href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L&#x27;op%C3%A9rateur_new"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/new"
             >new</a
           ></code
         >
@@ -100,9 +99,9 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
     </tr>
     <tr>
       <td>
-        <a href="/fr/docs/Web/JavaScript/Guide/Fonctions">Appel de fonction</a>
+        <a href="/fr/docs/Web/JavaScript/Guide/Functions">Appel de fonction</a>
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="2">Gauche à droite</td>
       <td>
         <code>… ( <var>… </var>)</code>
       </td>
@@ -113,15 +112,14 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
           >Chaînage optionnel</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>?.</code></td>
     </tr>
     <tr>
-      <td>2</td>
+      <td>17</td>
       <td>
         <code
           ><a
-            href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L&#x27;op%C3%A9rateur_new"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/new"
             >new</a
           ></code
         >
@@ -131,393 +129,379 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <td><code>new …</code></td>
     </tr>
     <tr>
-      <td rowspan="2">3</td>
+      <td rowspan="2">16</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)"
+          href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation"
           >Incrémentation suffixe</a
         >
       </td>
-      <td>Non applicable</td>
+      <td rowspan="2">Non applicable</td>
       <td><code>… ++</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)"
+          href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation"
           >Décrémentation suffixe</a
         >
       </td>
-      <td>Non applicable</td>
       <td><code>… --</code></td>
     </tr>
     <tr>
-      <td colspan="1" rowspan="10">4</td>
+      <td colspan="1" rowspan="10">15</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_NOT_.28.21.29"
-          >NON logique</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_NOT"
+          >NON logique (!)</a
         >
       </td>
-      <td>Droite à gauche</td>
+      <td rowspan="10">Droite à gauche</td>
       <td><code>! …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.7E_.28NON_binaire.29"
-          >NON binaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT"
+          >NON binaire (~)</a
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>~ …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Plus_unaire_(.2B)"
-          >Plus unaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_plus"
+          >Plus unaire (+)</a
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>+ …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)"
-          >Négation unaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Unary_negation"
+          >Négation unaire (-)</a
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>- …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Incr.C3.A9ment_(.2B.2B)"
+          href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation"
           >Incrémentation préfixe</a
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>++ …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#D.C3.A9cr.C3.A9ment_(--)"
+          href="/fr/docs/Web/JavaScript/Reference/Operators#incrémentation_et_décrémentation"
           >Décrémentation préfixe</a
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>-- …</code></td>
     </tr>
     <tr>
       <td>
         <code
           ><a
-            href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_typeof"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/typeof"
             >typeof</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>typeof …</code></td>
     </tr>
     <tr>
       <td>
         <code
           ><a
-            href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_void"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/void"
             >void</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>void …</code></td>
     </tr>
     <tr>
       <td>
         <code
           ><a
-            href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_delete"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/delete"
             >delete</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>delete …</code></td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/await"
+          ><a href="/fr/docs/Web/JavaScript/Reference/Operators/await"
             >await</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>await …</code></td>
     </tr>
     <tr>
-      <td rowspan="4">5</td>
+      <td>14</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Exponentiation_(**)"
-          >Exponentiation</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Exponentiation"
+          >Exponentiation (**)</a
         >
       </td>
       <td>Droite à gauche</td>
       <td><code>… ** …</code></td>
     </tr>
     <tr>
+    <td rowspan="3">13</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Multiplication_(*)"
-          >Multiplication</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Multiplication"
+          >Multiplication (*)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="3">Gauche à droite</td>
       <td><code>… * …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Division_(.2F)"
-          >Division</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Division"
+          >Division (/)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… / …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Reste_(.25)"
-          >Reste</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Remainder"
+          >Reste (%)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… % …</code></td>
     </tr>
     <tr>
-      <td rowspan="2">6</td>
+      <td rowspan="2">12</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Addition_(.2B)"
-          >Addition</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Addition"
+          >Addition (+)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="2">Gauche à droite</td>
       <td><code>… + …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#Soustraction_(-)"
-          >Soustraction</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Subtraction"
+          >Soustraction (-)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… - …</code></td>
     </tr>
     <tr>
-      <td rowspan="3">7</td>
+      <td rowspan="3">11</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29"
-          >Décalage binaire à gauche</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Left_shift"
+          >Décalage binaire à gauche (&#x3C;&#x3C;)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="3">Gauche à droite</td>
       <td><code>… &#x3C;&#x3C; …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29"
-          >Décalage binaire à droite</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Right_shift"
+          >Décalage binaire à droite (>>)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… >> …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29"
-          >Décalage binaire à droite non-signé</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift"
+          >Décalage binaire à droite non-signé (>>>)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… >>> …</code></td>
     </tr>
     <tr>
-      <td rowspan="6">8</td>
+      <td rowspan="6">10</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_strict_(<)"
-          >Inférieur strict</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than"
+          >Inférieur strict (&#x3C;)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="6">Gauche à droite</td>
       <td><code>… &#x3C; …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Inf.C3.A9rieur_ou_.C3.A9gal_(<.3D)"
-          >Inférieur ou égal</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal"
+          >Inférieur ou égal (&#x3C;=)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… &#x3C;= …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_strict_(>)"
-          >Supérieur strict</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than"
+          >Supérieur strict (>)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… > …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#Sup.C3.A9rieur_ou_.C3.A9gal_(>.3D)"
-          >Supérieur ou égal</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal"
+          >Supérieur ou égal (>=)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… >= …</code></td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_in"
+          ><a href="/fr/docs/Web/JavaScript/Reference/Operators/in"
             >in</a
           ></code
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… in …</code></td>
     </tr>
     <tr>
       <td>
         <code
           ><a
-            href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/instanceof"
+            href="/fr/docs/Web/JavaScript/Reference/Operators/instanceof"
             >instanceof</a
           ></code
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… instanceof …</code></td>
     </tr>
     <tr>
       <td rowspan="4">9</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_simple_(.3D.3D)"
-          >Égalité faible</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Equality"
+          >Égalité faible (==)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="4">Gauche à droite</td>
       <td><code>… == …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_simple_(!.3D)"
-          >Inégalité faible</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Inequality"
+          >Inégalité faible (!=)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… != …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)"
-          >Égalité stricte</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_equality"
+          >Égalité stricte (===)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… === …</code></td>
     </tr>
     <tr>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#In.C3.A9galit.C3.A9_stricte_(!.3D.3D)"
-          >Inégalité stricte</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Strict_inequality"
+          >Inégalité stricte (!==)</a
         >
       </td>
-      <td>Gauche à droite</td>
       <td><code>… !== …</code></td>
     </tr>
     <tr>
-      <td>10</td>
+      <td>8</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#&#x26;_.28ET_binaire.29"
-          >ET binaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_AND"
+          >ET binaire (&#x26;)</a
         >
       </td>
       <td>Gauche à droite</td>
       <td><code>… &#x26; …</code></td>
     </tr>
     <tr>
-      <td>11</td>
+      <td>7</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#.5E_.28XOR_binaire.29"
-          >OU exclusif (<em>XOR</em>) binaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR"
+          >OU exclusif / XOR binaire (^)</a
         >
       </td>
       <td>Gauche à droite</td>
       <td><code>… ^ …</code></td>
     </tr>
     <tr>
-      <td>12</td>
+      <td>6</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)"
-          title="JavaScript/Reference/Operators/Bitwise_Operators"
-          >OU binaire</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Bitwise_OR"
+          >OU binaire (|)</a
         >
       </td>
       <td>Gauche à droite</td>
       <td><code>… | …</code></td>
     </tr>
     <tr>
-      <td>13</td>
+      <td>5</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#Logical_AND_.28&#x26;&#x26;.29"
-          >ET logique</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_AND"
+          >ET logique (&#x26;&#x26;)</a
         >
       </td>
       <td>Gauche à droite</td>
       <td><code>… &#x26;&#x26; …</code></td>
     </tr>
     <tr>
-      <td>14</td>
+      <td rowspan="2">4</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques#OU_logique_(.7C.7C)"
-          >OU logique</a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Logical_OR"
+          >OU logique (||)</a
         >
       </td>
-      <td>Gauche à droite</td>
+      <td rowspan="2">Gauche à droite</td>
       <td><code>… || …</code></td>
     </tr>
     <tr>
-      <td>15</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel"
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator"
+          >Coalescence des nuls (??)</a
+        >
+      </td>
+      <td><code>… ?? …</code></td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>
+        <a
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"
           >Opérateur conditionnel ternaire</a
         >
       </td>
@@ -525,14 +509,14 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <td><code>… ? … : …</code></td>
     </tr>
     <tr>
-      <td rowspan="13">16</td>
-      <td rowspan="13">
+      <td rowspan="18">2</td>
+      <td rowspan="16">
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_d_affectation"
+          href="/fr/docs/Web/JavaScript/Reference/Operators#opérateurs_daffectation"
           >Affectation</a
         >
       </td>
-      <td rowspan="13">Droite à gauche</td>
+      <td rowspan="16">Droite à gauche</td>
       <td><code>… = …</code></td>
     </tr>
     <tr>
@@ -542,13 +526,13 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <td><code>… -= …</code></td>
     </tr>
     <tr>
-      <td><code>… *= …</code></td>
+      <td><code>… **= …</code></td>
     </tr>
     <tr>
-      <td><code>… /= …</code></td>
+      <td><code>… *= …</code></td>
     </tr>
     <tr>
-      <td><code>… **= …</code></td>
+      <td><code>… /= …</code></td>
     </tr>
     <tr>
       <td><code>… %= …</code></td>
@@ -572,44 +556,40 @@ Le tableau suivant est classé de la plus haute (0) à la plus basse (19) préc
       <td><code>… |= …</code></td>
     </tr>
     <tr>
-      <td colspan="1" rowspan="2">17</td>
+      <td><code>… &#x26;&#x26;= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… ||= …</code></td>
+    </tr>
+    <tr>
+      <td><code>… ??= …</code></td>
+    </tr>
+    <tr>
       <td>
         <code
-          ><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/yield"
+          ><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield"
             >yield</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
+      <td rowspan="2">Droite à gauche</td>
       <td><code>yield …</code></td>
     </tr>
     <tr>
       <td>
         <code
-          ><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/yield*"
+          ><a href="/fr/docs/Web/JavaScript/Reference/Operators/yield*"
             >yield*</a
           ></code
         >
       </td>
-      <td>Droite à gauche</td>
       <td><code>yield* …</code></td>
     </tr>
     <tr>
-      <td>18</td>
-      <td>
-        <a
-          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition"
-          >Décomposition</a
-        >
-      </td>
-      <td>Non applicable</td>
-      <td><code>...</code> …</td>
-    </tr>
-    <tr>
-      <td>19</td>
+      <td>1</td>
       <td>
         <a
-          href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_virgule"
+          href="/fr/docs/Web/JavaScript/Reference/Operators/Comma_Operator"
           >Virgule</a
         >
       </td>
-- 
cgit v1.2.3-54-g00ecf


From 9e7fbb013772ebab9b35185f0d0836995acbe6db Mon Sep 17 00:00:00 2001
From: R00T80Y <86746744+R00T80Y@users.noreply.github.com>
Date: Tue, 15 Mar 2022 13:32:49 +0300
Subject: (ru) Fix typo at Document page (#4603)

---
 files/ru/web/api/document/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/ru/web/api/document/index.html b/files/ru/web/api/document/index.html
index d8f81c3fd2..6d547b86c8 100644
--- a/files/ru/web/api/document/index.html
+++ b/files/ru/web/api/document/index.html
@@ -24,7 +24,7 @@ translation_of: Web/API/Document
 
 <ul>
  <li>Все объекты документов реализуют интерфейс <a href="http://dom.spec.whatwg.org/#interface-document"><code>Document</code></a> (и следовательно {{domxref("Node")}} и {{domxref("EventTarget")}} интерфейсы). Таким образом основные свойства и методы, описанные на этой странице, доступны для всех видов документов.</li>
- <li>В современных браузерах некоторые документы (т.е. те, которые содержат контент <code>text/html</code>) также реагируют  {{domxref("HTMLDocument")}} интерфейс.</li>
+ <li>В современных браузерах некоторые документы (т.е. те, которые содержат контент <code>text/html</code>) также реализуют  {{domxref("HTMLDocument")}} интерфейс.</li>
  <li>В современных браузерах SVG документы реализуют {{domxref("SVGDocument")}} интерфейс.</li>
 </ul>
 
-- 
cgit v1.2.3-54-g00ecf